Routing(路由) & Multiple Views(多个视图) step 7

Routing(路由) & Multiple Views(多个视图) step 7

1.切换分支到step7,并启动项目

git checkout  step-7
npm start

2.需求:

在步骤7之前，应用只给我们的用户提供了一个简单的界面（一张所有手机的列表），并且所有的模板代码位于

index.html

文件中。下一步是增加一个能够显示我们列表中每一部手机详细信息的页面。可以先看一下step6和7的代码区别 .

为了增加详细信息视图，我们可以拓展

index.html

来同时包含两个视图的模板代码，但是这样会很快给我们带来巨大的麻烦。相反，我们要把

index.html

模板转变成“布局模板”。这是我们应用所有视图的通用模板。其他的“局部布局模板”随后根据当前的“路由”被充填入，从而形成一个完整视图展示给用户。

AngularJS中应用的路由通过$routeProvider来声明，它是$route服务的提供者。这项服务使得控制器、视图模板与当前浏览器的URL可以轻易集成。应用这个特性我们就可以实现深链接，它允许我们使用浏览器的历史(回退或者前进导航)和书签。

3.效果:

View Code

测试结果:

Using ChromeDriver directly...
.....

Finished in 7.368 seconds
5 tests, 8 assertions, 0 failures