AngularJS最佳实践REST/CRUD

Question

使用AngularJS通过REST进行CRUD操作的最佳实践是什么？

特别是这里的Angular-Way是什么.通过这个我的意思是使用最少的代码和最默认的角度设置来实现这一点.

我知道$ resource和它的默认操作.我不确定如何实现/命名端点和使用哪些控制器.

对于此示例,我想实现一个简单的用户管理系统,用于创建/更新/删除/列出用户.由于我自己实现了Server-Endpoints,因此我可以完全自由地以最友好的角度进行操作.

我喜欢的答案是这样的:

服务器端点:

GET /service/users -> array of users
GET /service/user/new -> return an empty user with default values which has no id
POST /service/user/new -> store a new user and create an id. return the saved user.
POST /service/user/:ID -> save an existing user. Return the saved user
DELETE /service/user/:ID -> delete an existing user

角服务:

.factory( 'User', [ '$resource', function( $resource ){

    return $resource( '/service/user/:userId', { userId: '@id' } )
    [...]

}])

路由:

.when( '/users', {
    templateUrl: BASE + 'partials/user-list.html',
    controller: 'UserListCtrl' } )

.when( '/user/new', {
    templateUrl: BASE + 'partials/user-edit.html',
    controller: 'UserNewCtrl' } )

.when( '/user/:userId', {
    templateUrl: BASE + 'partials/user-edit.html',
    controller: 'UserEditCtrl' } )
...

控制器:

UserListCtrl:

    $scope.data = User.get(...)

UserNewCtrl:

    $scope.user = User.get( { userId: "new" } )

...

请注意,我并不认为最好的(tm)方法是什么,但我想知道什么是Angular的预期方式(我认为它应该产生最少的代码,因为它可以使用最默认的) .

编辑:

我正在寻找整个画面.我会爱会像如回答:"你可以做到这一点使用在线3个终点[...],2条路线[...]和2个控制器[...]如果你做这个用的方式是违约......"

Answer 1

对于你所要求的,没有Angular规定的方式.由您决定实施细节.

通常我每个资源只使用两个控制器和模板:

1. ListController
2. 的FormController

Form控制器用于编辑和创建操作.使用resolve路径定义中的选项传入User.get()或者User.new()和一个标志,指示这是编辑还是创建操作.然后可以在FormController中使用此标志来决定调用哪个save方法.这是一个简单的例子:

.when( '/users', {
  templateUrl: BASE + 'partials/user-list.html',
  controller: 'UserListCtrl' } )
.when( '/user/new', {
  templateUrl: BASE + 'partials/user-form.html',
  resolve: {
    data: ['User', function(User) { return User.new(); }],
    operation: 'create'
  }
  controller: 'UserFormCtrl' } )
.when( '/user/:userId', {
  templateUrl: BASE + 'partials/user-form.html',
  resolve: {
    data: ['User', '$route', function(User, $route) { return User.get($route.current.params.userId); }],
    operation: 'edit'
  }
  controller: 'UserFormCtrl' } )

和你的表单控制器:

app.controller('UserFormCtrl', ['$scope', 'data', 'operation', function($scope, data, operation){
  $scope.data = data;
  $scope.save = function() {
    if (operation === 'edit') {
      // Do you edit save stuff
    } else {
      // Do you create save stuff
    }
  }
}]);

您可以更进一步,创建一个基本列表和表单控制器来移动诸如错误处理,服务器端验证通知等内容.事实上,对于大多数CRUD操作,您甚至可以将保存逻辑移动到此基本控制器.

Answer 2

你可能把事情搞混了。API 级别的 CRUD 操作是使用 $resource 完成的，这些操作可能会也可能不会映射到 UI。因此，$resouce如果您将资源定义为

var r = $resource('/users/:id',null,   {'update': { method:'PUT' }});
r.query()  //does GET on /users and gets all users
r.get({id:1}) // does GET on /users/1 and gets a specific user
r.save(userObject)  // does a POST to /users to save the user
r.update({ id:1 }, userObject) // Not defined by default but does PUT to /users/1 with user object.

正如您所看到的，API 资源已满，但没有以任何方式链接到任何 UI 视图。

对于视图，您可以使用您定义的约定，但 Angular 没有提供任何具体内容。