AngularJS 路由与多视图

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› Angular›Angluar教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

路由与多视图

在这一步中，你将学会如何通过使用被称为'ngRoute'的Angular模块添加路由，创建一个布局模板，以及如何绑定一个具有多视图的应用。

当你导航到app/index.html上时，你将跳车到app/index.html/#/phones，而且手机列表出现在浏览器中。
当你在手机链接上点击时，url变成特定的手机，出现了手机详情页。

把工作空间重置到第七步

git checkout -f step-7

刷新你的浏览器或在线检查这一步：Step 7 Live Demo

下面列出了第六步和第七步之间的区别。你可以在GitHub里看到完整的差异。

依赖性

这一步中添加路由功能是由 ngRoute模块中的angular提供的，它与核心的Angular框架分离分布。

我们使用Bower以安装客户端依赖性。这一步更新了bower.json配置文件，以包含新的依赖性：

{
  "name": "angular-phonecat",
  "description": "A starter project for AngularJS",
  "version": "0.0.0",
  "homepage": "https://github.com/angular/angular-phonecat",
  "license": "MIT",
  "private": true,
  "dependencies": {
    "angular": "1.4.x",
    "angular-mocks": "1.4.x",
    "jquery": "~2.1.1",
    "bootstrap": "~3.1.1",
    "angular-route": "1.4.x"
  }
}

新的依赖性"angular-route": "1.4.x"告诉bower要安装与v1.4x兼容的angular-router组件版本。我们将告诉bower以下载并安装该依赖性。

如果你已经全局安装了bower，则你可以只对该项目运行bower install，我们已经预配置了npm，从而为我们运行bower安装：

npm install

多个视图、路由和布局模板

我们的应用渐渐地完善，变得越来越复杂。在第七步之前，应用向我们用户提供了单一视图（手机的列表），而且所有的模板代码都位于index.html文件中。构建应用的下一步是添加一个视图，这个视图将显示我们的列表中每款设备的详细信息。

要想添加详情视图，我们可以扩展index.html以包含两套视图的模板代码，但是那将很快变得混乱。因此我们不用这种方法，而是把index.html变成“布局模板”。这是一个模板，常用于我们应用中的所有视图。然后别的“局部布局模板”根据当前的“路由”包含到这个布局模板中，从而形成一个完整视图展示给用户。

通过$routeProvider来声明Angular中的应用程序路由，它是$route服务的提供者。这个服务使接通控制器、视图模板以及浏览器中的当前位置变得容易。利用这个功能，我们可以实现深链接，深链接让我们可以使用浏览器的历史（回退和前进导航）以及书签。

一条关于DI、注入器和提供者的提醒

如你已注意到的，依赖性注入（DI）是AngularJS的核心，所以对它的工作原理略知一二是很重要的。

在应用程序引导中，Angular创建了一个注入器，注入器用来寻找并注入你的应用所需要的所有的服务。注入器本身对$http或$route服务是做什么的一无所知。实际上，注入器甚至不知道这些服务是否存在，除非用适当的模板定义对它进行配置。

注入器只在以下步骤中出场：

载入你在你的应用中指定的模块定义。
注册所有的在模块定义中定义的提供者。
当被要求做这的时候，注入一个指定的函数以及一些必要的依赖性（服务），它通过它们的提供者来惰性实例化。

提供者是提供（创建）服务实例并且对外提供配置API的对象，API可以用来控制一个服务的创建和运行时行为。对于$route来说，$routeProvider对外提供API，API允许你定义针对你的应用程序的路由。

**注意：**只能够把提供者注入到`config`函数中。因此你不能够把`$routeProvider`注入到`PhoneListCtrl`中。

Angular模块解决了从应用程序中移除全局状态的问题，并提供配置注入器的方法。相对于AMD或require.js模块，Angular模块并不试图解决脚本载入次序问题或者懒惰式脚本取得问题。这些目标是完全独立的，两个模块系统可以并立存在，并实现他们的目标。

要想加深你对Angular上的DI的理解，请参看理解依赖性注入。

模板

$route服务常与ngView指令结合使用。ngView指令的角色是在布局模板中包含用于当前路由的视图模板。这使它完美恰合我们的index.html模板。

**注意：**从AngularJS v1.2版开始，`ngRoute`在它自己的模块中，必须通过载入额外的`angular-route.js`文件来载入它，我们通过上面的Bower来下载`angular-route.js`文件。

app/index.html:

<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
...
  <script src="/attachments/image/wk/angularjs/angular.js"></script>
  <script src="/attachments/image/wk/angularjs/angular-route.js"></script>
  <script src="/attachments/image/wk/angularjs/app.js"></script>
  <script src="/attachments/image/wk/angularjs/controllers.js"></script>
</head>
<body>

  <div ng-view></div>

</body>
</html>

我们已经在我们的索引文件添加了两个新的<script>标记，从而把外部JavaScript文件载入到我们的应用程序中：

angular-route.js : 定义Angular ngRoute模块，ngRoute模块向我们提供了路由。
app.js : 现在这个文件控住了我们的应用程序的根模块。

注意：我们删除了index.html模板中的大部分代码，把它替换成一行代码，包含了一个带有元素属性ng-view的div。我们已经移除的这个代码被放到了phone-list.html模板中：

app/partials/phone-list.html:

<div class="container-fluid">
  <div class="row">
    <div class="col-md-2">
      <!--Sidebar content-->

      Search: <input ng-model="query">
      Sort by:
      <select ng-model="orderProp">
        <option value="name">Alphabetical</option>
        <option value="age">Newest</option>
      </select>

    </div>
    <div class="col-md-10">
      <!--Body content-->

      <ul class="phones">
        <li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail">
          <a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>
          <a href="#/phones/{{phone.id}}">{{phone.name}}</a>
          <p>{{phone.snippet}}</p>
        </li>
      </ul>

    </div>
  </div>
</div>

我们还为手机详情视图添加了一个占位符模板：

app/partials/phone-detail.html:

TBD: detail view for <span>{{phoneId}}</span>

注意，我们正在使用的phoneId表达式将在PhoneDetailCtrl控制器中定义。

应用模块

要想增强应用的组织，我们动用了Angular的ngRoute模块，我们已经把控制器移到它们自己的模块phonecatControllers中（如下所示）。

我们给index.html添加angular-route.js，并在controllers.js中创建一个新的phonecatControllers模块。然而，要想使用它们的代码，我们需要做的不止于此。我们还需要添加模块，作为我们的应用的依赖性。通过把两个应用作为phonecatApp的依赖性列表，我们可以使用这些指令以及它们提供的服务。

app/js/app.js:

var phonecatApp = angular.module('phonecatApp', [
  'ngRoute',
  'phonecatControllers'
]);

...

注意第二个参数传递到angular.module,['ngRoute','phonecatControllers']。这个数组列出了phonecatApp所依赖的模块。

...

phonecatApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/phones', {
        templateUrl: 'partials/phone-list.html',
        controller: 'PhoneListCtrl'
      }).
      when('/phones/:phoneId', {
        templateUrl: 'partials/phone-detail.html',
        controller: 'PhoneDetailCtrl'
      }).
      otherwise({
        redirectTo: '/phones'
      });
  }]);

使用phonecatApp.config()方法，我们请求了$routeProvider，它会被注入到我们的配置函数中，并使用?$routeProvider.when()方法以定义我们的路由。

我们的应用程序路由定义如下：

when('/phones')：当URL映射段为/phones的时候。将展示这个手机列表视图。要想构造这个视图，Angular将使用phone-list.html模板，以及PhoneListCtrl控制器。
when('/phones/:phoneId')：当URL映射段匹配/phones/:phoneId的时候（其中:phoneId是URL的变量部分），将展示手机详情视图。要想构造手机详情视图，Angular将使用phone-detail.html模板以及PhoneDetailCtrl控制器。
otherwise({redirectTo: '/phones'})：当浏览器的地址不匹配我们别的路由的时候，触发一个重定向到/phones。

我们再次使用我们在上一步中构造的PhoneListCtrl控制器，并为手机详情视图向app/js/controllers.js文件添加了一个新的、空的PhoneDetailCtrl控制器。

注意在第二个路由声明中:phoneId参数的使用。$route服务使用route声明'/phones/:phoneId'作为匹配当前URL的模板。所有用:记号法定义的变量都会提取出来，放到?$routeParams对象上。

控制器

app/js/controllers.js:

var phonecatControllers = angular.module('phonecatControllers', []);

phonecatControllers.controller('PhoneListCtrl', ['$scope', '$http',
  function ($scope, $http) {
    $http.get('phones/phones.json').success(function(data) {
      $scope.phones = data;
    });

    $scope.orderProp = 'age';
  }]);

phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams',
  function($scope, $routeParams) {
    $scope.phoneId = $routeParams.phoneId;
  }]);

再次提醒注意，我们创建了一个新的模块，称为phonecatControllers。对于小型的AngularJS应用，通常针对所有的控制器只创建一个模板，如果控制器只有为数不多的几个。随着你的应用程序扩大，常常要把你的代码重构到额外的模块中。为了更大的应用，你可能将会想要为你的应用的所有的主要功能创建独立的模块。

因为我们的应用比较小，我们将把我们所有的控制器添加到phonecatControllers模块中。

测试

要想自动核查所有东西都正确连通了，我们编写了一个端到端的测试，导航到不同的URL上，并核查是否呈现了正确的视图。

...
   it('should redirect index.html to index.html#/phones', function() {
    browser.get('app/index.html');
    browser.getLocationAbsUrl().then(function(url) {
        expect(url).toEqual('/phones');
      });
  });

  describe('Phone list view', function() {
    beforeEach(function() {
      browser.get('app/index.html#/phones');
    });
...

  describe('Phone detail view', function() {

    beforeEach(function() {
      browser.get('app/index.html#/phones/nexus-s');
    });

    it('should display placeholder page with phoneId', function() {
      expect(element(by.binding('phoneId')).getText()).toBe('nexus-s');
    });
  });

你现在可以再次运行npm run protractor来查看测试的运行。

实验

尝试添加一个绑定到index.html的{{orderProp}}，而且你将看到什么事也没有发生，哪怕你正在手机列表视图中。这是因为orderProp模块只有在PhoneListCtrl管理的作用域内是可见的，PhoneListCtrl与<div ng-view>元素关联。如果你在phone-list.html模板上添加同样的绑定，绑定将如你的预期运作起来。