AngularJS最佳实践REST/CRUD

发布时间：2020-12-17 08:19:48 所属栏目：安全来源：网络整理

导读：使用AngularJS通过REST执行CRUD操作的最佳做??法是什么？特别是这里的Angular-Way。通过这个我的意思是使用最少的代码和最默默的角度设置来解决这个问题。我知道$资源，这是默认操作。我不知道如何实现/命名端点和要使用的控制器。对于这个例子，我想实现

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!