首页 > 代码库 > 七步从AngularJS菜鸟到专家(7):Routing
七步从AngularJS菜鸟到专家(7):Routing
这是"AngularJS – 七步从菜鸟到专家"系列的第七篇。
在第一篇,我们展示了如何開始搭建一个AngularaJS应用。在第四、五篇我们讨论了Angular内建的directives。上一篇了解了services的强大。
在这一章。我们来看几个前面没有机会细说的关键点。文章的最后会列举一些特别棒的学习资源链接和工具。
通过这整个系列的教程,我们会开发一个NPR(美国全国公共广播电台)广播的音频播放器,它能显示Morning Edition节目里如今播出的最新故事,并在我们的浏览器里播放。完毕版的Demo能够看这里。
7. Routing
在单页面应用中。视图之间的跳转就显尤为重要的,随着应用越来越复杂,我们须要用一种方法来精确控制什么时候该呈现如何的页面给用户。
咱们能够通过在主页面中引入不同的模板来支持不同页面的切换。可是这么做的缺点就是,越来越多的内嵌代码导致最后难以管理。
通过ng-include指令我们能够把非常多的模板整合在视图中,可是我们有更好的方法来处理这样的情况,我们能够把视图打散成layout和模板视图。然后依据用户訪问的特定的URL来显示须要的视图
我们能够将这些“碎片”在一个布局模板中拼接起来
AngularJS通过在$routeProvider($route服务的提供者)上声明routes来实现上面的构想
使用$routeProvider,我们能够更好的利用浏览历史的API而且能够让用户能够把当前路径存成书签以方便以后的使用
在我们的应用中设定路由,我们须要做两件事情:第一,我们须要指出我们存放将要存放新页面内容的布局模板在哪里。比方,假设我们想在全部页面都配上header和footer,我们能够这样设计布局模板:
- <header>
- <h1>Header</h1>
- </header>
- <div class="content">
- <div ng-view></div>
- </div>
- <footer>
- <h5>Footer</h5>
- </footer>
ng-view指令将快速$routeProvider在哪里渲染模板
第二,我们须要配置我们的路由信息。我们将在应用中配置$routeProvider
$routeProvider提供了两种方法处理路由:when和otherwise。
方法when接收两个參数,第一个设置$location.path(). (直接用“//”也没有问题)
第二个參数是配置对象,这个能够包括不同的键。我们能够简单的说几个
controller
- controller: ‘MyController‘
- // or
- controller: function($scope) {
- // ...
- }
假设在配置对象中设置了controller属性。那这个controller会在route载入的时候实例化,这个属性能够是一个字符串(必须在module中注冊过的controller)也能够是controller function
Template模板
- template: ‘<div><h2>Route</h2></div>‘
假设我们在配置对象的template属性设置了值。那么模板就会被渲染到DOM中的ng-view处
templateUrl
七步从AngularJS菜鸟到专家(7):Routing