AngularJS 最佳实践 REST/CRUD

Question

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

特别是在这里，什么是“Angular-Way”。我的意思是使用最少的代码和最多的默认Angular设置来实现这一点。

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

对于这个例子，我想实现一个简单的用户管理系统，可以创建/更新/删除/列出用户。由于我自己实现了服务器端点，所以可以完全自由地以最符合Angular的方式进行操作。

我希望得到的答案类似于：

服务器端点：

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

Angular服务：

.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" } )

...

请注意，我对于如何最好地完成这个任务并不感兴趣，我想知道的是Angular建议的方式（因为它可以使用大多数默认设置从而编写最少的代码）。

编辑：我想要了解整体情况。我希望得到这样的回答：“如果你按照这种方式，并使用那个默认设置，你可以使用在线3个端点[...]，2个路由[...]和2个控制器[...]来完成此任务。”

- Scheintod

Answer 1

对于您所询问的内容，Angular没有规定的方法。如何实现取决于您自己决定。

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

1. ListController
2. 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', {
  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 操作，你甚至可以将保存逻辑移到这个基础控制器中。

- Beyers

---

我一直在按照您在这里所解释的方式进行，但从未见过它被证实。大多数示例显示为创建和编辑分别使用不同的控制器，但我认为对于简单流程而言这是过度设计了。 - ceebreenk

Answer 2

我的研究与类似的探索有关，导致我找到了这个项目“angular-schema-form”https://github.com/Textalk/angular-schema-form。

对于这种方法...

您需要创建一个描述数据的JSON-Schema。然后使用另一个小的JSON结构来描述“表单”（即视图特定信息，不属于数据模式），然后它会为您生成UI（表单）。

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

您需要确定哪些事件应该触发GET / POST / ...返回到您的API。但那将是您的首选项，例如每击键一次命中API或传统的[提交]按钮POST回样式或介于其中具有定时自动保存。

为了保持这个想法继续发展，我认为可以使用StrongLoop快速创建API，该API（再次）使用数据的模式（附加了一些存储详细信息）来定义API。

没有少于三个使用该方案，请参见[http://json-schema.org/]，这是这种方法的核心。

（读取：不少于三个 :)

- Nate-

Answer 3

你可能混淆了一些概念。在API级别上，使用$resource进行CRUD操作，这些操作可能与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没有提供任何特定的内容。

- Chandermani

---

谢谢。是的，我知道如何使用 $resource。在我的例子中，url 偶然相同，因为它们倾向于执行相同的操作。我所寻求的是“整体画面”。我如何能够以最少的代码将其与其他部分组合使用？ - Scheintod

Answer 4

我认为你正在寻找的内容可以在http://www.synthjs.com/中找到。

• 只需创建文件夹并以特定方式命名函数，即可轻松创建新的RESTful API资源。
• 从这些函数返回数据或承诺，并将其作为JSON呈现给客户端。
• 抛出错误，它将被记录。如果在开发模式下运行，错误也将返回给客户端。
• 在页面加载时预加载Angular模型数据（节省额外的往返）。
• 在页面加载时预加载HTML视图（再次节省额外的往返！）。
• 简化的项目结构，前端代码（Angular代码、HTML、CSS、Bower包等）位于“front”文件夹中，后端代码（Node代码和Node包）位于“back”文件夹中。
• 一个命令行工具，用于安装第三方包，使用npm + bower，自动更新清单文件。
• 根据请求自动编译开发环境的资产，并为生产环境进行预编译（包括缩小和ngmin）。当检测到更改时，自动重新启动服务器。
• 支持各种后端和前端模板，以帮助快速启动新项目。

- Eran Witkon