<html lang="en" ng-app="phonecat"> <head> ... <script src="https://www.jb51.net/lib/angular/angular.js"></script> <script src="https://www.jb51.net/js/app.js"></script> <script src="https://www.jb51.net/js/controllers.js"></script> </head> <body> <div ng-view></div> </body> </html>
注意，我们把index.html模板里面大部分代码移除，我们只放置了一个<div>容器，这个<div>具有ng-view属性。我们删除掉的代码现在被放置在phone-list.html模板中：
app/partials/phone-list.html
<div> <div> <div> <!--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> <!--Body content--> <ul> <li ng-repeat="phone in phones | filter:query | orderBy:orderProp"> <a href="#/phones/{{phone.id}}"><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 {{phoneId}}
注意到我们的布局模板中没再添加PhoneListCtrl或PhoneDetailCtrl控制器属性！
测试
为了自动验证所有的东西都良好地集成起来，我们需要写一些端到端测试，导航到不同的URL上然后验证正确地视图被渲染出来。
... it('should redirect index.html to index.html#/phones', function() { browser().navigateTo('../../app/index.html'); expect(browser().location().url()).toBe('/phones'); }); ... describe('Phone detail view', function() { beforeEach(function() { browser().navigateTo('../../app/index.html#/phones/nexus-s'); }); it('should display placeholder page with phoneId', function() { expect(binding('phoneId')).toBe('nexus-s'); }); });
你现在可以刷新你的浏览器，然后重新跑一遍端到端测试，或者你可以在AngularJS的服务器上运行一下。
练习
试着在index.html上增加一个{{orderProp}}绑定，当你在手机列表视图上时什么也没变。这是因为orderProp模型仅仅在PhoneListCtrl管理的作用域下才是可见的，这与<div ng-view>元素相关。如果你在phone-list.html模板中加入同样的绑定，那么这个绑定会按你设想的那样被渲染出来。
总结
设置路由并实现手机列表视图之后，我们已经可以进入步骤8来实现手机详细信息视图了。