我有兴趣将客户的许多“逻辑”从Rails路由转移到AngularJS。我对一个主题有些困惑，这就是联系。现在，我的确知道有多种方法可以解决此问题，但是AngularJS社区中处理URL的常见做法是处理资源的CRUD。想象一下，对于一名运动员，我们有一个如下所示的网址列出了所有运动员：
http://example.com/athletes
要查看单个运动员：
http://example.com/athletes/1
要编辑单个运动员：
http://example.com/athletes/1/edit
要创建新运动员：
http://example.com/athletes/new
在AngularJS中，重新路由到类似的URL以创建/编辑/更新是一种常见的做法吗？您是否只有一个URL可以在一个界面中处理所有CRUD类型的操作，而从不更改URL？如果要更改URL，是否可以通过ng-click进行处理？在click事件中，您是否会使用该$location对象来更改URL？我很希望能够阅读诸如此类的常见做法，但是很难在AngularJS上下文中找到有关它的最新文献。
** 注意 **
我完全明白，您仍然可以使用RESTful路由到后端，以便与服务器端资源进行交互。我的问题是，在客户端更新URL时建议使用哪种样式。您是否正在使用AngularJS对每个CRUD操作执行此操作？
我绝对会为每个操作建议单独的URL（以启用直接链接）。您建议的外观很好。
在AngularJS中，您可以将$route服务与ngView指令结合使用，以为每个操作加载适当的模板，并为您处理浏览器的位置和历史记录机制。
AngularJS教程的第7步提供了一个按我在此描述的方式使用视图，路由和模板的示例。以下是您的示例的简化版本：
在您的主要应用程序脚本（例如app.js）中：
angular.module('AthletesApp', []).
config(['$routeProvider', function($routeProvider, $locationProvider) {
// Configure routes
$routeProvider.
when('/athletes', {templateUrl: 'partials/athletes-list.html', controller: AthleteListCtrl}).
when('/athletes/:athleteId', {templateUrl: 'partials/athlete-detail.html', controller: AthleteDetailCtrl}).
when('/athletes/:athleteId/edit', {templateUrl: 'partials/athlete-edit.html', controller: AthleteEditCtrl}).
when('/athletes/:athleteId/new', {templateUrl: 'partials/athlete-new.html', controller: AthleteNewCtrl}).
otherwise({redirectTo: '/athletes'});
// Enable 'HTML5 History API' mode for URLs.
// Note this requires URL Rewriting on the server-side. Leave this
// out to just use hash URLs `/#/athletes/1/edit`
$locationProvider.html5Mode(true);
}]);
我们还为网址启用了“ HTML模式”，请参阅下面的注释。
ngView向您的HTML添加指令在主index.html中，指定所选部分模板在整体布局中的位置：
<!doctype html>
<html ng-app="AthletesApp">
...
<!-- Somewhere within the <body> tag: -->
<div ng-view></div>
...
</html>
然后，您为每个操作创建部分视图模板和匹配的控制器。例如，运动员详细视图：
partials / athelete-detail.html：
<div>
... Athete detail view here
</div>
sportsDetailCtrl.js：
angular.module('AthletesApp').controller('AtheleteDetailCtrl',
function($scope, $routeParams) {
$scope.athleteId = $routeParams.athleteId;
// Load the athlete (e.g. using $resource) and add it
// to the scope.
}
您可以:athleteId通过该$routeParams服务访问route参数（在route配置中使用定义）。
最后一步是在HTML中实际包含链接和按钮以进入不同的视图。只需使用标准HTML并指定URL，例如：
<a href="/athletes/{{athleteId}}/edit">Edit</a>
在不支持HTML5历史记录API的旧版浏览器中，您的网址看起来更像http://example.com/#/athletes和http://example.com/#/athletes/1。
该$location服务（由自动使用$route）可以为您处理此问题，因此您可以在现代浏览器中获得漂亮的干净URL，而在旧版浏览器中可以回退到哈希URL。您仍然可以如上所述指定链接，$location并将为较旧的客户端重写它们。唯一的附加要求是您在服务器端配置URL重写，以便将所有URL都重写为应用程序的主index.html。有关更多详细信息，请参见AngularJS $ location指南。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句