本章我们将一起学习:
- 如何创建一个布局模版
- 如何如何创建一个多视图路由应用
- 如何使用
ngRoute指令实现视图路由
我们先看看本章对应的例子要做的事情是什么：
- 当你点击导航栏导航到
app/index.html时，你将被重定向到app/index.html/#/phones，它会显示手机列表。 - 当你点击一个手机链接时，URL地址栏的地址变化（显然），新的页面将显示手机的一些信息。
【注解】本章需要一定Provider提供者的知识，可以先看本章教程，如果看完之后想系统学习下提供者、服务相关的知识，点击AngularJS服务体系查看。
下面我们把代码切换到step-7：
git checkout -f step-7
假设你已经运行了网站，你只需要刷新你的浏览器来看效果。或者你可以在线看效果。
相关依赖
我们通过ngRoute指令实现视图路由技术，它不属于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.2.1",
"bootstrap": "~3.1.1",
"angular-route": "1.4.x"
}
}
"angular-route": "1.4.x" 这句话告诉bower安装1.4.x版本的Angular路由插件。我们需要保证路由插件的成功安装。
如果你已经全局安装了bower管理器，你可以通过bower install来安装所有的依赖。但是对于本项目来说，我们已经在npm脚本中配置了bower install的执行，所以我们只需要运行：
npm install
注意：如果你运行上述命令后，恰好一个新的Angular版本发布了，这时候，
bower install命令可能会执行失败，因为新旧版本的AngularJS有冲突。如果你遇到了这个问题，你只需要删除你的app/bower_components文件夹，再次运行npm install。
多视图，路由技术和布局模版
我们的应用内容越来越丰富了。在本章之前，应用只有一个视图（手机列表），并且所有的模版代码都在index.html文件中。下面我们将为列表中的每一个手机添加一个详情视图。
我们可以直接把详情视图添加到inde.html中，但是这样做会让index.html变得特别大，看起来会很糟糕。所以我们换一种做法，我们将把index.html分解成布局模版。这个模版适用于本应用中的所有页面（注解：这和sitemesh、velocity、apache Tiles等服务端模版技术对应）。其他的局部模版将根据当前的路由被选择性的集成到当前模版中，从而最终呈现给用户。
Angular使用$routeProvider来申明应用应用路由，它是$route service的提供者。这个服务可以很容易的把控制器、视图模版和当前的URL地址绑定在一起。通过这个特性，我们可以实现deep linking，通过它我们可以利用浏览器的历史功能（往后和前进）以及书签功能。
探讨下依赖注入、注入器和提供者
依赖注入功能是AngularJS的核心功能，所以了解一点它的知识是有必要的。
当应用启动时，AngularJS将先创建一个注入器，它将寻找并且注入应用所需要的所有服务。注入器本身是不知道$http或者$route服务是干嘛的。实时上，注入器都不知道它们的存在，除非他们被依赖进来。
注入器只完成以下几个步骤：
- 加载应用中指定的模块定义
- 注册模块定义中所有的提供器（提供者）——配置阶段
- 当需要的时候，注入服务或者提供者延迟初始化的依赖等。——运行阶段
提供者的功能为创建服务实例和暴露配置API，后者包括控制服务的创建和运行时行为。在$route服务中，$routeProvider暴露一些允许你定义路由的API。
注意：提供者只能在
config函数里被注入。所以你无法把$routeProvider注入到PhoneListCtrl中。
Angular模块解决了移除应用全局状态的问题，并且提供了一个配置注入器的方式。跟AMD或者require.js不一样的是，Angular模块不会去解决脚本加载顺序或者延迟脚本获取的问题。这些目标是相互独立的，他们可以共同工作于一个系统中，各自完成自己的目标（意思就是AngularJS和AMD或者require.js框架可以公用）。
如果你想进一步了解Angular中的依赖注入，可以看看这里：理解依赖注入.
模版
$route指令通常和$ngView指令结合使用。$ngView指令所扮演的角色是把当前路由对应的视图模版加入布局模版中。所以这里使用它正好。
注意：从AngularJS 1.2起，
ngRoute就是Angular的自有模块了，而且必须通过加载另外的angular-route.js文件来完成载入（由Bower下载）
app/index.html
...
这段代码中，我们新增了两个