路由与多视图
在这一步中，你将学会如何通过使用被称为'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允许你定义针对你的应用程序的路由。
Angular模块解决了从应用程序中移除全局状态的问题，并提供配置注入器的方法。相对于AMD或require.js模块，Angular模块并不试图解决脚本载入次序问题或者懒惰式脚本取得问题。这些目标是完全独立的，两个模块系统可以并立存在，并实现他们的目标。
要想加深你对Angular上的DI的理解，请参看理解依赖性注入。
模板
$route服务常与ngView指令结合使用。ngView指令的角色是在布局模板中包含用于当前路由的视图模板。这使它完美恰合我们的index.html模板。
app/index.html:
...
我们已经在我们的索引文件添加了两个新的