七步从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,我们能够这样设计布局模板:

  1. <header>
  2. <h1>Header</h1>
  3. </header>
  4. <div class="content">
  5. <div ng-view></div>
  6. </div>
  7. <footer>
  8. <h5>Footer</h5>
  9. </footer>

ng-view指令将快速$routeProvider在哪里渲染模板

第二,我们须要配置我们的路由信息。我们将在应用中配置$routeProvider

$routeProvider提供了两种方法处理路由:when和otherwise。

方法when接收两个參数,第一个设置$location.path(). (直接用“//”也没有问题)

第二个參数是配置对象,这个能够包括不同的键。我们能够简单的说几个

controller

  1. controller: ‘MyController‘
  2. // or
  3. controller: function($scope) {
  4. // ...
  5. }

假设在配置对象中设置了controller属性。那这个controller会在route载入的时候实例化,这个属性能够是一个字符串(必须在module中注冊过的controller)也能够是controller function

Template模板

  1. template: ‘<div><h2>Route</h2></div>‘

假设我们在配置对象的template属性设置了值。那么模板就会被渲染到DOM中的ng-view处

templateUrl

时间: 2024-09-28 22:22:12

七步从AngularJS菜鸟到专家(7):Routing的相关文章

七步从AngularJS菜鸟到专家(4和5):指令和表达式

这一篇包含了"AngularJS - 七步从菜鸟到专家"系列的第四篇(指令)和第五篇(表达式). 之前的几篇展示了我们应用的核心组件,以及如何设置搭建一个Angular.js应用.在这一部分,我们会厘清一些术语,然后深入探讨很多Angular.js提供的核心功能. 通 过这整个系列的教程,我们会开发一个NPR(美国全国公共广播电台)广播的音频播放器,它能显示Morning Edition节目里现在播出的最新故 事,并在我们的浏览器里播放它们.完成版的Demo可以看这里(http://www.ng

七步从AngularJS菜鸟到专家(6):服务

这是"AngularJS – 七步从菜鸟到专家"系列的第六篇. 在第一篇,我们展示了如何开始搭建一个AngularaJS应用.在第五篇我们讨论了Angular内建的directives.在这一章,我们来讨论services,整理我们的代码并完成我们的音频播放器应用. 通过这整个系列的教程,我们会开发一个NPR(美国全国公共广播电台)广播的音频播放器,它能显示Morning Edition节目里现在播出的最新故事,并在我们的浏览器里播放.完成版的Demo可以看看这里. 目前为止,我们把注意力都放在

[学习笔记] 七步从AngularJS菜鸟到专家(6):服务 [转]

这是"AngularJS – 七步从菜鸟到专家"系列的第六篇. 在第一篇,我们展示了如何开始搭建一个AngularaJS应用.在第五篇我们讨论了Angular内建的directives.在这一章,我们来讨论services,整理我们的代码并完成我们的音频播放器应用. 通过这整个系列的教程,我们会开发一个NPR(美国全国公共广播电台)广播的音频播放器,它能显示Morning Edition节目里现在播出的最新故事,并在我们的浏览器里播放.完成版的Demo可以看看这里. 目前为止,我们把注意力都放在

[学习笔记] 七步从AngularJS菜鸟到专家(4和5):指令和表达式 [转]

这一篇包含了"AngularJS - 七步从菜鸟到专家"系列的第四篇(指令)和第五篇(表达式). 之前的几篇展示了我们应用的核心组件,以及如何设置搭建一个Angular.js应用.在这一部分,我们会厘清一些术语,然后深入探讨很多Angular.js提供的核心功能. 通过这整个系列的教程,我们会开发一个NPR(美国全国公共广播电台)广播的音频播放器,它能显示Morning Edition节目里现在播出的最新故事,并在我们的浏览器里播放它们.完成版的Demo可以看这里(http://www.ng-n

[学习笔记] 七步从AngularJS菜鸟到专家(7):Routing [转]

这是"AngularJS – 七步从菜鸟到专家"系列的第七篇. 在第一篇,我们展示了如何开始搭建一个AngularaJS应用.在第四.五篇我们讨论了Angular内建的directives,上一篇了解了services的强大. 在这一章,我们来看几个前面没有机会细说的关键点,文章的最后会列举一些特别棒的学习资源链接和工具. 通过这整个系列的教程,我们会开发一个NPR(美国全国公共广播电台)广播的音频播放器,它能显示Morning Edition节目里现在播出的最新故事,并在我们的浏览器里播放.完

七步从Angular.JS菜鸟到专家(3):数据绑定和AJAX

这是"AngularJS - 七步从菜鸟到专家"系列的第三篇. 在第一篇,我们展示了如何开始搭建一个AngularaJS应用.第二篇我们讨论了scope和 $scope 的功能. 通过这整个系列的教程,我们会开发一个NPR(美国全国公共广播电台)广播的音频播放器,它能显示Morning Edition节目里现在播出的最新故事,并在我们的浏览器里播放.完成版的Demo可以看这里. 第三部分 数据绑定 通过把一个文本输入框绑定到person.name属性上,就能把我们的应用变得更有趣一点.这一步建立

[学习笔记] 七步从Angular.JS菜鸟到专家(3):数据绑定和AJAX [转]

这是"AngularJS - 七步从菜鸟到专家"系列的第三篇. 在第一篇,我们展示了如何开始搭建一个AngularaJS应用.第二篇我们讨论了scope和 $scope 的功能. 通过这整个系列的教程,我们会开发一个NPR(美国全国公共广播电台)广播的音频播放器,它能显示Morning Edition节目里现在播出的最新故事,并在我们的浏览器里播放.完成版的Demo可以看这里. 第三部分 数据绑定 通过把一个文本输入框绑定到person.name属性上,就能把我们的应用变得更有趣一点.这一步建立

七步从Angular.JS菜鸟到专家(2):Scopes

这是"AngularJS - 七步从菜鸟到专家"系列的第二篇. 在第一篇我们展示了如何开始搭建一个Angular应用.在这一篇里,我们要讨论一个理解AngularJS运作原理所必须的基本概念,以及你如何更好地运用它. 在这个系列教程里,我们会开发一个NPR(美国全国公共广播电台)广播的音频播放器,它能显示Morning Edition节目里现在播出的最新故事,并在我们的浏览器里播放.完成版的Demo可以看这里. 第二部分 Scopes $scope是一个把view(一个DOM元素)连结到cont

七步从Angular.JS菜鸟到专家(1):如何开始

AngularJS 重新定义了前端应用的开发方式.面对HTML和JavaScript之间的界线,它非但不畏缩不前,反而正面出击,提出了有效的解决方案. 很多前端应用的开发框架,比如Backbone.EmberJS等,都要求开发者继承此框架特有的一些JavaScript对象.这种方式有其长 处,但它不必要地污染了开发者自己代码的对象空间,还要求开发者去了解内存里那些抽象对象.尽管如此我们还是接受了这种方式,因为网络最初的设计无法提供 我们今天所需的交互性,于是我们需要框架,来帮我们填补JavaSc