Page 118 - AngularJS权威教程

98 第 12 章 多重视图和路由

第12章

多重视图和路由

能够从页面的一个视图跳转到另外一个视图，对单页面应用来讲是至关重要的。当应用变得
越来越复杂时，我们需要一个合理的方式来管理用户在使用过程中看到的界面。
也许我们已经通过在主HTML中添加行内的模板代码，实现了对视图的管理，但这些代码也
会变得越来越复杂和难以管理，同时其他开发者也很难加入到开发工作中来。另外，由于应用的
状态信息会包含在URL中，我们也无法将代码直接复制并发送给朋友。

除了用ng-include指令在视图中引用多个模板外，更好的做法是将视图分解成布局和模板
视图，并且根据用户当前访问的URL来展示对应的视图。
我们会将这些模板分解到视图中，并在布局模板内进行组装。AngularJS允许我们在$route
服务的提供者$routeProvider中通过声明路由来实现这个功能。
通过$routeProvider，可以发挥出浏览器历史导航的优势，并让用户基于浏览器当前的URL
地址创建书签或分享页面。

12.1 安装

从1.2版本开始，AngularJS将ngRoutes从核心代码中剥离出来成为独立的模块。我们需要安
装并引用它，才能够在AngularJS应用中正常地使用路由功能。
可以从code.angularjs.org下载它，然后保存到一个可以在HTML页面中进行引用的位置，例
如js/vendor/angular-route.js。

也可以用Bower来安装，这样会将它存放到Bower的目录中。查看34.6节获取更多关于Bower
的信息。

$bower install--save angular -route

在HTML中，需要在AngularJS之后引用angular-route：
<script src="js/vendor/angular.js"></script>
<script src="js/vendor/angular-route.js"></script>
最后，要把ngRoute模块在我们的应用中当作依赖加载进来：
angular.module('myApp', ['ngRoute']);