什么是AngularJS＆QUOT;方式＆QUOT;处理一个CRUD资源 [英] What's the AngularJS "way" of handling a CRUD resource
问题描述
我感兴趣的是动了不少我的客户的逻辑，从客场Rails的路由到AngularJS。我有轻微的困惑一个主题中，并且是链接。现在，我明白有来处理这个方法不止一种，但究竟是在AngularJS社区有关处理CRUD资源处理URL中的常见做法。在一名运动员，我们有一个URL的情况下，想象一下，比如下面列出所有的运动员：
I am interested in moving a lot of my client's "logic" away from Rails routing to AngularJS. I have slight confusion in one topic and that is linking. Now, I do understand there's more than one way to handle this, but what is the common practice in the AngularJS community for handling URLs on handling CRUD for resources. Imagine in the case of an athlete we have a URL such as the following to list all athletes:
http://example.com/athletes
要查看单个运动员：
http://example.com/athletes/1
要编辑个别运动员：
http://example.com/athletes/1/edit
要创建一个新的运动员：
To create a new athlete:
http://example.com/athletes/new
在AngularJS，它是常见的做法是重新路由到类似的URL创建/编辑/更新？你只是有一个URL处理所有的在一个界面中的CRUD类型的行动和永远不变的网址？如果要更改URL，是否获得通过NG-点击Click事件中你会使用 $位置对象改变的URL处理？我很想能够在共同的做法，如这些念起来，但有在一个AngularJS背景下发现它更近的文学一个艰难的时刻。
In AngularJS, is it common practice to reroute to similar URLs to create/edit/update? Would you just have one URL handle all of the CRUD type actions in one interface and never change the URL? If you were to change the URL, does that get handled via ng-click and in the click event would you use the $location object to change URLs? I'd love to be able to read up on common practices such as these, but having a difficult time in finding more recent literature on it in an AngularJS context.
** NOTE **
** NOTE **
我完全得到你仍然可以使用REST风格的路线到后端，以与服务器端资源交互。我的问题是，什么是建议在客户端更新URL时使用的样式。您是否使用AngularJS做每个CRUD操作？
I totally get that you can still use RESTful routes to the backend in order to interact with server-side resources. My question is, what is the style that is recommended to use when updating URLs on the client-side. Are you using AngularJS to do that for each of the CRUD operations?
推荐答案
我肯定会推荐不同的URL为每个操作（使能直接链接）。那些你认为已经很好了。
I would definitely recommend separate URLs for each operation (to enable direct linking). The ones you suggest look fine.
在AngularJS可以使用 $路线服务与 ngView 指令组合来加载相应的模板每一个操作和处理浏览器的地理位置和历史力学为您服务。
In AngularJS you can use the $route service in combination with the ngView directive to load the appropriate template for each operation and handle the browser location and history mechanics for you.
在AngularJS教程给出了使用意见，路由的实例和模板，我在这里描述的方式第7步。以下是对您的示例的简化版本
Step 7 of the AngularJS tutorial gives an example of using Views, Routing and Templates the way I describe here. The following is a simplified version for your example:
在主应用程序的脚本（如 app.js ）
In your main application script (e.g. 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模式，见下面的注释。
We also enable 'HTML Mode' for URLs, see note below.
在主 index.html的您指定选定局部模板将在整体布局走：
In your main index.html you specify where the selected partial template will go in the overall layout:
<!doctype html>
<html ng-app="AthletesApp">
...
<!-- Somewhere within the <body> tag: -->
<div ng-view></div>
...
</html>
3。创建模板和控制器
然后，创建局部视图模板和匹配的控制器为每个操作。例如。为运动员详细视图：
3. Create templates and controllers
Then you create the partial view templates and matching controllers for each of the operations. E.g. for the athlete detail view:
的谐音/痤疮各类-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 服务。
You get access to the route parameter (defined using :athleteId in the route config) via the $routeParams service.
最后一步是真正在你的HTML链接和按钮来获得不同的看法。只需使用标准的HTML，并指定URL，如：
The final step is to actually have links and buttons in your HTML to get to the different views. Just use standard HTML and specify the URL such as:
<a href="/athletes/{{athleteId}}/edit">Edit</a>
注：标准VS哈希网址
在旧的浏览器不支持HTML5历史API你的URL看起来更像 http://example.com/#/athletes 和 http://example.com/#/athletes/1 。
的 $位置服务（由 $自动路由使用）可以处理这个给你，让你获得不错在现代浏览器和后备网址干净散列的URL在旧的浏览器。您仍然指定链接如上和 $位置将处理重写他们旧客户端。唯一的附加要求是配置URL重写在服务器端，让所有的URL重写为您的应用程序的主index.html的。请参阅 AngularJS $位置指南了解更多详情。
The $location service (used automatically by $route) can handle this for you, so you get nice clean URLs in modern browsers and fallback to hash URLs in older browsers. You still specify your links as above and $location will handle rewriting them for older clients. The only additional requirement is that you configure URL Rewriting on the server side so that all URLs are rewritten to your app's main index.html. See the AngularJS $location Guide for more details.
这篇关于什么是AngularJS＆QUOT;方式＆QUOT;处理一个CRUD资源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
