AngularJS多重视图和路由教程

多重视图和路由

能够从页面的一个视图跳转到另外一个视图,对单页面应用来讲是至关重要的。当应用变得越来越复杂时,我们需要一个合理的方式来管理用户在使用过程中看到的界面。也许我们已经通过在主HTML中添加行内的模板代码,实现了对视图的管理,但这些代码也会变得越来越复杂和难以管理,同时其他开发者也很难加入到开发工作中来。另外,由于应用的状态信息会包含在URL中,我们也无法将代码直接复制并发送给朋友。除了用 ng-include 指令在视图中引用多个模板外,更好的做法是将视图分解成布局和模板视图,并且根据用户当前访问的URL来展示对应的视图。我们会将这些模板分解到视图中,并在布局模板内进行组装。AngularJS允许我们在 $route服务的提供者 $routeProvider 中通过声明路由来实现这个功能。通过 $routeProvider ,可以发挥出浏览器历史导航的优势,并让用户基于浏览器当前的URL地址创建书签或分享页面。

安装

从1.2版本开始,AngularJS将 ngRoutes 从核心代码中剥离出来成为独立的模块。我们需要安装并引用它,才能够在AngularJS应用中正常地使用路由功能。

可以从code.angularjs.org下载它,然后保存到一个可以在HTML页面中进行引用的位置,例如js/vendor/angular-route.js。也可以用Bower来安装,这样会将它存放到Bower的目录中。

 
Copyright © 2008-2021 lanxinbase.com Rights Reserved. | 粤ICP备14086738号-3 |