angular-phonecat教程中文版

步骤7——路由与多视图

这一步,将学习到如何创建布局模板,以及利用Angular路由模块(ngRoute)实现的多视图应用。 当浏览器导航到app/index.html时,会重定向到app/index.html#/phones来访问呈现一个手机列表。 当点击手机链接时,URL会改变指向到一款具体的手机,并且显示其详细的信息页面。

工作区切换到步骤7

直接用浏览器访问步骤7在线演示

大多数的重要改变都会列在下面,不过你也可以在GitHub看到完整的差异。

依赖

这一步添加的路由功能是由Angular的ngRoute模块提供,这是一个独立于Angular核心框架的模块。

我们使用Bower来安装客户端依赖。这一步骤中我们会更新bower.json配置文件来包含新的依赖关系:

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

新的依赖关系"angular-route": "~1.2.x"告诉bower安装版本1.2.x的angular-route组件。我们必须明确告诉bower下载安装这个依赖。

如果你是在全局环境中使用bower安装,你可能会用直接到bower install指令,但是在这个项目中我们已经预配使用npm来启动bower install,所以你只需要: npm install

多视图、路由与布局模板

我们的程序逐渐强大,也变得更加复杂。在步骤7(本步骤)之前,我们只有唯一的视图来(用来显示手机列表),并且所有的模板代码都放置在index.html中。新的步骤中会添加一个视图来显示列表中每个设备详细的信息(详细说明视图)。

为了添加详细说明视图,我们扩展index.html模板文件来包含两个视图,但这将很快引起混乱,为了替代,我们尝试把index.html转换到我们称为布局模板(layout template)其中有模板(布局模板)在所有视图中通用,其他则是局部模板(partial templates),局部模板只包括当前路由route——视图当前显示需要的部分。

在Angular中,程序的路由通过$routeProvider声明,它是$route服务的提供者。这个服务能容易的把控制器、视图模板和浏览器当前的地址栏信息连接起来。使用这个特性,我们可以实现深层链接(deep linking),它可以让你可以利用浏览器历史(后退和前进)以及收藏标签。

关于依赖注入(DI)的提醒:注入器(Injector)和提供者(Providers)

是否注意到,依赖注入(DI)是AngularJS的核心,所以了解一下其是如何实现的是十分重要的。

当程序启动时,Angular创建一个注入器用于查找和注入程序需要的服务。注入器自身是不知道任何关于$http或者$route服务能做什么的,事实上注入器都不知道这些服务是否存在(除非服务配置在适当的模块定义中)。

注入器只执行以下步骤:

  • 加载描述在程序中的模块定义
  • 注册所有模块定义的提供者
  • 当有实际的请求时,注入器检测具体的功能要求及对应的依赖(服务),再通过其提供者(延时)实例化来完成功能的提供

提供者是一种可以提供(创建)服务实例的对象,其还可以通过配置的API暴露调用接口,用于控制的建立和运行时行为功能。实际上这$route服务、$routeProvider暴露的API允许为你的程序定义路由。

注意:提供者只能注入到config功能,因此你不能把$routeProvider注册入$PhoneListCtrl

Angular模块从应用程序中解决(去除了)全局状态的问题,并提供一个配置注入器的方法。与AMD或者require.js模块截然相反,Angular模块不会尝试处理脚本的加载和延时获取等问题。这些目标是完全独立的模块系统,它们可以并列存在和实现他们的目标。

要深入理解Angular的依赖注入,观看Understanding Dependency Injection

模板

$route服务通常与ngView指令联合使用。ngView指令规包含了视图模板如何路由到的布局视图。这使得index.html模板显得更加完美。

注意:从AngularJS版本1.2开始ngRoute是独立的模块,需要单独加载angular-route.js文件,这可以通过bower下载到。

app/index.html

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

  <div ng-view></div>

</body>
</html>

我们添加了2个新的<script>标签以在我们的index文件中加载额外的JavaScript文件:

  • angular-route.js:定义了Angular的ngRoute模块,用于提供路由功能
  • app.js:这个文件在程序中提供一个root模块。

注意我们从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`(下面会看见)。

我们添加angular-route.jsindex.html中,并添加了一个新的phonecatControllers模块到controllers.js中。这些不是所有我们会用到的代码,我们还要添加一些我们程序依赖的模块。下面两个模块都是phonecatApp需要的,我们可用指令和服务提供。

app/js/app.js:

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

...

注意传递给angular.module的第2个参数['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()方法提供了自定义路由规则。

我们的程序定义了如下的路由:

  • 匹配/phones :当URL结尾片段是/phones时显示一个手机列表。为了构造这个输出视图,Angular会使用phone-list.html模板和PhoneListCtrl控制器
  • 匹配/phones/:phoneId: 当URL结尾片段匹配/phones/:phoneId时会显示对应手机的详细说明视图。这里:phoneId是一个URL变量区块。为了生成这个手机详细说明视图,Angular使用phone-detail.html模板和PhoneDetailCtrl控制器。
  • 其他的匹配(重定向到/phones):当浏览器地址栏信息不能匹配到有效路由(自定义的路由设置没有对应项目)时,尝试重定向到/phones

我们再次使用了上一步骤的PhoneListCtrl控制器,然后添加了一个新的(但是是空的)PhoneDetailCtrl控制器到app/js/controllers.js文件中来为手机详细说明视图提供数据。

注意在第2个路由声明中的:phoneId参数。$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;
  }]);

再次提醒,我们是创建了一个新的模块叫做phonecatControolers。对于很多小的AngularJS程序,共同创造是一个模块为所有控制器(如果有几个)公用。随着程序的增强,很容易为程序添加更多的公用模块。对于大的程序,你需要为每个主要的程序功能创建特定的模块。

因为我们的例子程序是相对比较小的程序,所以我们把所有的控制器都添加到phoecatControllers模块中。

测试

为了自动验证所有的可能,我们写端到端测试来导航到各式URL,并且验证是否能显示正确:

...
   it('should redirect index.html to index.html#/phones', function() {
    browser.get('app/index.html');
    browser.getLocationAbsUrl().then(function(url) {
        expect(url.split('#')[1]).toBe('/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模型中的作用范围内有效(可见)。为了关联

元素,你需要添加相同绑定到phone-list.html模板中,这个绑定将正常工作。

小结

这一步,我们建立了路由,并实现了手机列表视图,接下来的步骤8中,我们将实现手机详细说明视图。