七步从AngularJS菜鸟到专家：Routing

Posted 2020-09-28 llguanli

这是＂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