Question

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

这里特别是 Angular-Way 是什么。我的意思是使用最少代码和最默认的角度设置来实现此目的。

我知道$ resource及其默认操作。我不确定如何实现/命名端点以及使用哪些控制器。

对于这个例子，我想实现一个简单的用户管理系统，用于创建/更新/删除/列出用户。由于我自己实现了服务器端点，因此我可以完全自由地以最友好的方式实现它。

我喜欢的答案如下：

服务器的端点：

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意图< / strong>方式（我认为它应该产生最少的代码，因为它可以使用最默认的代码）。

修改

我正在寻找全貌。我喜欢的将是一个答案，例如：＆＃34;你可以使用在线3端点[...]，2个路由[...]和2个控制器[...]来做到这一点方式使用默认...＆＃34;

Answer 1

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

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

ListController
的FormController

表单控制器用于编辑和创建操作。使用路由定义中的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

我对类似任务的研究使我得到了这个项目“angular-schema-form”https://github.com/Textalk/angular-schema-form。

对于这种方法...... 您制作描述数据的 JSON-Schema 。然后使用另一个描述“表单”的小JSON结构来扩充它（即，不属于数据模式的视图特定信息），并为您创建UI（表单）。

一个很酷的优点是架构在验证数据（客户端和服务器端）中也很有用，所以这是一个奖励。

你必须弄清楚哪些事件应该从GET / POST / ...回到你的API。但那将是你的偏好，例如。点击每个击键的API或经典的[提交]按钮POST回样式或其间的定时自动保存。

为了保持这个想法，我认为可以使用StrongLoop制作一个快速API，它（再次）使用您的数据的架构（增加了一些存储细节）来定义API 。

没有＆lt; 3使用该架构，请参阅[http://json-schema.org/]，这是此方法的核心。

（读：不少于三个：）

Answer 3

你可能会混淆。 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不提供任何具体内容。

Answer 4

我认为您所寻找的内容可以在http://www.synthjs.com/

中找到

只需创建文件夹即可轻松创建新的RESTful API资源命名功能以某种方式。
从这些中返回数据或承诺函数，它们将作为JSON呈现给客户端。
扔一个错误，它会被记录下来。如果在开发模式下运行，则会出错也可以退回给客户。
预加载页面加载时的角度模型数据（节省额外费用）往返）。
在页面加载时预加载html视图（另外保存另一个往返！）
简化的项目结构前端代码（角度代码，html，css，凉亭包等）在前面＆＃39;文件夹和后端代码（节点代码和节点包裹）在＆＃39; back＆＃39;夹。
一个命令行工具安装第三方软件包，使用npm + bower，自动更新清单文件。
根据请求自动编译资产，以及 prod的预编译（包括缩小和ngmin）。检测到更改时自动重新启动服务器。
支持各种后端和前端模板，以帮助获得一个新项目快点。

AngularJS最佳实践REST / CRUD

4 个答案: