七步从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
最新文章
- 学习EF之贪懒加载和延迟加载(2)
- golang github.com/go-sql-driver/mysql 遇到的数据库,设置库设计不合理的解决方法
- 关于JavaScipt对象的基本知识
- topcoder 594 DIV2 foxandclassroom
- oracle 事务简介,锁的概念,java访问数据库注意事项
- AngularJS ng-class用法
- Installshield停止操作系统进程的代码--IS5版本适用
- HDU2952:Counting Sheep(DFS)
- [LeetCode] 63. Unique Paths II_ Medium tag: Dynamic Programming
- Android中碎片的添加问题
- hdoj3247
- sql获取当前月份的前一月，当前天的前一天，当前年的前一年
- AI 帮助涂鸦
- CMDB-实现的几种方式
- g4e基础篇#4 了解Git存储库(Repo)
- 网页布局之grid属性图
- SpringBoot 之静态资源
- Logview_pro破解版
- 使用pyqt写了一个检查大数据环境的gui
- C# DateTime 转 JavaScript Date
热门文章