Question

我有兴趣将我的客户的许多“逻辑”从Rails路由转移到AngularJS。我在一个主题中有轻微的混淆，那就是链接。现在，我确实理解处理这个问题的方法不止一种，但是AngularJS社区中用于处理处理CRUD资源的URL的常见做法是什么。想象一下，在运动员的情况下，我们有一个URL，如下所示列出所有运动员：

http://example.com/athletes

观看个别运动员：

http://example.com/athletes/1

编辑一名运动员：

http://example.com/athletes/1/edit

创建一名新运动员：

http://example.com/athletes/new

在AngularJS中，通常的做法是重新路由到类似的URL来创建/编辑/更新？您是否只有一个URL处理一个界面中的所有CRUD类型操作，并且永远不会更改URL？如果您要更改URL，是否可以通过ng-click处理，并且在click事件中您是否会使用$location对象来更改URL？我希望能够阅读这些常见的做法，但在AngularJS背景下找到更多关于它的文献很困难。

**注意**

我完全知道你仍然可以使用RESTful路由到后端，以便与服务器端资源进行交互。我的问题是，在客户端更新URL时建议使用的样式是什么。您是否正在使用AngularJS为每个CRUD操作执行此操作？

Answer 1

我肯定会为每个操作推荐单独的URL（以启用直接链接）。你建议看起来很好。

在AngularJS中，您可以将$route服务与ngView指令结合使用，为每个操作加载相应的模板，并为您处理浏览器位置和历史记录机制。

Step 7 of the AngularJS tutorial给出了一个使用视图，路由和模板的示例，就像我在这里描述的那样。以下是您的示例的简化版本：

定义路线

在主应用程序脚本中（例如 app.js ）：

angular.module('AthletesApp', []).
  config(['$routeProvider', function($routeProvider, $locationProvider) {
  // Configure routes
  $routeProvider.
      when('/athletes', {templateUrl: 'partials/athletes-list.html',   controller: AthleteListCtrl}).
      when('/athletes/:athleteId', {templateUrl: 'partials/athlete-detail.html', controller: AthleteDetailCtrl}).
      when('/athletes/:athleteId/edit', {templateUrl: 'partials/athlete-edit.html', controller: AthleteEditCtrl}).
      when('/athletes/:athleteId/new', {templateUrl: 'partials/athlete-new.html', controller: AthleteNewCtrl}).
      otherwise({redirectTo: '/athletes'});
  // Enable 'HTML5 History API' mode for URLs.
  // Note this requires URL Rewriting on the server-side. Leave this
  // out to just use hash URLs `/#/athletes/1/edit`
  $locationProvider.html5Mode(true);
}]);

我们还为网址启用“HTML模式”，请参阅下面的注释。

2。在HTML

中添加ngView指令

在您的主 index.html 中，指定所选部分模板在整体布局中的位置：

<!doctype html>
<html ng-app="AthletesApp">
...
   <!-- Somewhere within the <body> tag: -->
   <div ng-view></div>
...
</html>

3。创建模板和控制器

然后为每个操作创建局部视图模板和匹配控制器。例如。对于运动员的详细信息视图：

<强>分音/痤疮各类-detail.html：

<div>
    ... Athete detail view here
</div>

<强> athleteDetailCtrl.js：

angular.module('AthletesApp').controller('AtheleteDetailCtrl',
    function($scope, $routeParams) {
        $scope.athleteId = $routeParams.athleteId;
        // Load the athlete (e.g. using $resource) and add it
        // to the scope.
    }

您可以通过:athleteId服务访问路由参数（使用路由配置中的$routeParams定义）。

4。添加链接

最后一步是在HTML中实际拥有链接和按钮以获取不同的视图。只需使用标准HTML并指定URL，例如：

<a href="/athletes/{{athleteId}}/edit">Edit</a>

注意：标准与Hash URL

在不支持HTML5历史记录API的旧版浏览器中，您的网址看起来更像http://example.com/#/athletes和http://example.com/#/athletes/1。

$location服务（$route自动使用）可以为您处理此问题，因此您可以在现代浏览器中获得干净的网址，并在旧浏览器中回退到哈希网址。您仍然按上述方式指定链接，$location将处理为旧客户端重写的链接。唯一的附加要求是在服务器端配置URL重写，以便将所有URL重写到应用程序的主index.html。有关详细信息，请参阅AngularJS $location Guide。

Answer 2

角度方式是宁静的方式：

GET all http://example.com/athletes
GET one http://example.com/athletes/1
POST new http://example.com/athletes
PUT edit http://example.com/athletes/1
DELETE remove http://example.com/athletes/1

请注意，$resource还需要一些其他的东西，例如资源URL不以斜杠结尾，PUT请求返回更新的资源等。

如果您的API不符合这些条件，或者您只需要更多灵活性，则可以基于较低级别的$http服务构建自己的类似资源的CRUD服务。解释后者的一种方法是here

Answer 3

选项1：$ http服务

AngularJS提供了完全符合您要求的$http service：使用JSON（非常适合与REST服务交谈）向Web服务发送AJAX请求并从中接收数据。

举一个例子（摘自AngularJS文档并略微改编）：

$http({ method: 'GET', url: '/foo' }).
  success(function (data, status, headers, config) {
    // ...
  }).
  error(function (data, status, headers, config) {
    // ...
  });

选项2：$ resource service

请注意，AngularJS中还有另一项服务，$resource service以更高级的方式提供对REST服务的访问（例如，再次从AngularJS文档中获取）：

var Users = $resource('/user/:userId', { userId: '@id' });
var user = Users.get({ userId: 123 }, function () {
  user.abc = true;
  user.$save();
});

选项3：Restangular

此外，还有第三方解决方案，例如Restangular。请参阅其documentation了解如何使用它。基本上，它更具说明性，并且将更多细节抽象出来。

Answer 4

在AngularJS中，您绝对可以使用RESTful服务器端数据源，这里有一个名为$resource的内置服务。

或者，您也可以使用{$ 3}}，它具有超过$ resource的附加功能。

如果你想拥有完全控制权，你可以随时使用restangular服务，这是低级角度组件，用于与http进行交互。

Answer 5

简单地实现RESTful的东西，即angularJS方式。如果你不知道RESTful是什么，或者知道一点，想要了解更多，那么我建议你阅读this文章。

基本上，REST是理解为WEB URI的直观实现，它还利用了所有HTTP动词，实际上正确使用它们。 REST是一种构建Web应用程序的方法和体系结构。

什么是AngularJS处理CRUD资源的“方式”

5 个答案: