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

  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.   // ... 

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

Template模板

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

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

templateUrl

七步从AngularJS菜鸟到专家(7):Routing