步骤8——模板链接与图形
在这一步，会为手机列表添加缩略图以及对应的购买信息链接。后续步骤中，你将通过链接显示目录中手机的更多附加（详细）信息。
现在就为手机列表添加缩略图
工作区切换到步骤8
数据
注意到在phones.json中包含了每个手机独一无二的id和图片链接地址。这些链接地址都指向app/img/phones/目录。 app/phones/phones.json（一段手机数据的快照）
[
{
...
"id": "motorola-defy-with-motoblur",
"imageUrl": "img/phones/motorola-defy-with-motoblur.0.jpg",
"name": "Motorola DEFY\u2122 with MOTOBLUR\u2122",
...
},
...
]
模板
phone-list.template.html
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<!--Sidebar content-->
<p>
Search:
<input ng-model="$ctrl.query" />
</p>
<p>
Sort by:
<select ng-model="$ctrl.orderProp">
<option value="name">Alphabetical</option>
<option value="age">Newest</option>
</select>
</p>
</div>
<div class="col-md-10">
<!--Body content-->
<ul class="phones">
<li ng-repeat="phone in $ctrl.phones | filter:$ctrl.query | orderBy:$ctrl.orderProp" class="thumbnail">
<a href="#/phones/{{phone.id}}" class="thumb">
</a>
<a href="#/phones/{{phone.id}}">{{phone.name}}</a>
<p>{{phone.snippet}}</p>
</li>
</ul>
</div>
</div>
</div>
为了动态处理链接（这在后面将导向手机的详细介绍页面），我们给href属性的赋值中用到了由双大括号括起来的数据绑定。在步骤2中，我们把{{phone.name}}绑定到一个html元素的内容中，这一步{{phone.id}}将用来绑定到元素属性中。
我们还为每款手机添加了图片，这里用到了ngSrc命令，它会阻止浏览器在Angular还没有初始化并能够正常展开绑定时发出诸如下面一样的无效URL请求: <code>http://localhost:8000/app/{{phone.imageUrl}}</code>，而是仅仅描述当前元素需要一个src属性，这个属性<code>（
步骤9——路由与多视图
工作区切换到步骤9
依赖
这一步添加的路由功能是由Angular的ngRoute模块提供，这是一个独立于Angular核心框架的模块。
我们使用Bower来安装客户端依赖。这一步骤中我们会更新bower.json配置文件来包含新的依赖关系
{
"name": "angular-route",
"version": "1.5.11",
"license": "MIT",
"main": "./angular-route.js",
"ignore": [],
"dependencies": {
"angular": "1.5.11"
}
}
新的依赖关系"angular-route": "~1.2.x"告诉bower安装版本1.2.x的angular-route组件。我们必须明确告诉bower下载安装这个依赖。
多视图、路由与布局模板
我们的程序逐渐强大，也变得更加复杂。本步骤之前，我们只有唯一的视图来（用来显示手机列表），并且所有的模板代码都放置在index.html中。新的步骤中会添加一个视图来显示列表中每个设备详细的信息（详细说明视图）。
为了添加详细说明视图，我们扩展index.html模板文件来包含两个视图，但这将很快引起混乱，为了替代，我们尝试把index.html转换到我们称为布局模板（layout template）其中有模板（布局模板）在所有视图中通用，其他则是局部模板（partial templates），局部模板只包括当前路由route——视图当前显示需要的部分。
在Angular中，程序的路由通过$routeProvider声明，它是$route服务的提供者。这个服务能容易的把控制器、视图模板和浏览器当前的地址栏信息连接起来。使用这个特性，我们可以实现深层链接(deep linking)，它可以让你可以利用浏览器历史（后退和前进）以及收藏标签。
好了。我蒙圈了。。。
