ran*_*its 29 javascript ruby-on-rails angularjs ruby-on-rails-4
我有兴趣将我的客户端的"逻辑"从Rails路由转移到AngularJS.我在一个主题中有轻微的混淆,那就是链接.现在,我确实理解处理这个问题的方法不止一种,但是AngularJS社区中用于处理处理CRUD资源的URL的常见做法是什么.想象一下,在运动员的情况下,我们有一个URL,如下所示列出所有运动员:
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操作执行此操作？
小智 45
我肯定会为每个操作推荐单独的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>
然后为每个操作创建局部视图模板和匹配控制器.例如,运动员详细信息视图:
谐音/痤疮各类-detail.html:
<div>
... Athete detail view here
</div>
athleteDetailCtrl.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参数(在路由配置中定义).
最后一步是在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 $位置指南.
hol*_*ple 16
角度方式是宁静的方式:
GET all http://example.com/athletes
GET one http://example.com/athletes/1
POST new http://example.com/athletes
PUT edit http://example.com/athletes/1
DELETE remove http://example.com/athletes/1
请注意,$ resource还需要一些其他的东西,比如资源URL不以斜杠结尾,PUT请求返回更新的资源等.
如果您的API不符合这些条件,或者您只需要更多灵活性,则可以基于较低级别的$ http服务构建自己的类资源CRUD 服务.这里解释了做后者的一种方法
AngularJS提供的$http服务完全符合您的要求:使用JSON(非常适合与REST服务交谈)向Web服务发送AJAX请求并从中接收数据.
举一个例子(取自AngularJS文档并略微调整):
$http({ method: 'GET', url: '/foo' }).
success(function (data, status, headers, config) {
// ...
}).
error(function (data, status, headers, config) {
// ...
});
请注意,AngularJS中还有另一项服务,该$resource服务以更高级的方式提供对REST服务的访问(例如,再次从AngularJS文档中获取):
var Users = $resource('/user/:userId', { userId: '@id' });
var user = Users.get({ userId: 123 }, function () {
user.abc = true;
user.$save();
});
此外,还有第三方解决方案,如Restangular.请参阅有关如何使用它的文档.基本上,它更具说明性,并将更多细节抽象出来.
| 归档时间： |
|
| 查看次数： |
18779 次 |
| 最近记录： |