AngularJS最佳实践REST/CRUD

前端之家收集整理的这篇文章主要介绍了AngularJS最佳实践REST/CRUD前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
使用AngularJS通过REST执行CRUD操作的最佳做​​法是什么?

特别是这里的Angular-Way。通过这个我的意思是使用最少的代码和最默默的角度设置来解决这个问题。

我知道$资源,这是默认操作。我不知道如何实现/命名端点和要使用的控制器。

对于这个例子,我想实现一个创建/更新/删除/列出用户的简单用户管理系统。由于我自己实现了服务器端点,所以我完全可以以最有角度的方式做到这一点。

我喜欢的答案是:

服务器端点:

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',controller: 'UserEditCtrl' } )
...

控制器:

UserListCtrl:

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

UserNewCtrl:

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

...

请注意,我并没有意识到最好的(tm)方法是什么,但我想知道Angular的意图是什么(我认为应该产生最少的代码,因为它可以使用最缺省的) 。

编辑:

我正在寻找整个画面。我会喜欢的将是一个答案,例如:“你可以使用在线3端点[…],2路由[…]和2控制器[…]如果你这样做使用该默认值……”

你所要求的没有任何角度的方式。由您决定实施细节。

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

> ListController
> FormController

表单控制器用于编辑和创建操作。在路由定义中使用resolve选项传入User.get()或User.new(),并显示一个指示是否是编辑或创建操作的标志。然后可以在FormController内使用此标志来决定要调用哪种保存方法。这是一个简单的例子:

.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','$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操作,您甚至可以将保存逻辑移动到该基本控制器。

猜你在找的Angularjs相关文章