29

我有兴趣将我客户的许多“逻辑”从 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 操作执行此操作？

4

5 回答 5

45

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

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

AngularJS 教程的第 7 步给出了一个使用视图、路由和模板的例子，我在这里描述的方式。以下是您的示例的简化版本：

定义路线

在您的主应用程序脚本（例如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);
}]);

我们还为 URL 启用了“HTML 模式”，请参见下面的注释。

2. 在您的 HTML 中添加ngView指令

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

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

3. 创建模板和控制器

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

部分/athelete-detail.html：

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

运动员DetailCtrl.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>

注意：标准与哈希 URL

http://example.com/#/athletes在不支持 HTML5 History API 的旧浏览器中，您的 URL 看起来更像http://example.com/#/athletes/1.

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

于 2013-08-04T12:46:27.190 回答
16

角度方式是宁静的方式：

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服务的基础上构建自己的 $resource-like CRUD服务。此处解释了执行后者的一种方法

于 2013-08-01T19:47:18.330 回答
5

选项 1：$http 服务

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

举个例子（取自 AngularJS 文档并稍作修改）：

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

选项 2：$resource 服务

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

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

选项 3：Restangular

此外，还有第三方解决方案，例如Restangular。请参阅其文档以了解如何使用它。基本上，它更具声明性，并从您那里抽象出更多细节。

于 2013-08-04T12:25:41.430 回答
2

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

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

如果你想拥有完全的控制权，你总是可以使用$http服务，它是用于与 http 交互的低级角度组件。

于 2013-08-01T19:48:32.260 回答
0

只需实现 RESTful 的东西，即 angularJS 方式。如果您不知道 RESTful 是什么，或者知道一点并想了解更多，那么我建议您阅读这篇文章。

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

于 2013-08-04T12:30:23.030 回答