Page 119 - AngularJS权威教程

12.3 路由 99

12.2 布局模板 1

要创建一个布局模板，需要修改HTML以告诉AngularJS把模板渲染到何处。通过将ng-view
指令和路由组合到一起，我们可以精确地指定当前路由所对应的模板在DOM中的渲染位置。 2

例如，布局模板看起来可能是下面这样的：
3
<header>
<h1>Header</h1>
</header> 4
<div class="content">
<div ng-view></div>
</div>
<footer> 5
<h5>Footer</h5>
</footer>
6
这个例子中，我们将所有需要渲染的内容都放到了<div class="content">中，而<header>
和<footer>中的内容在路由改变时不会有任何变化。
7
ng-view是由ngRoute模块提供的一个特殊指令，它的独特作用是在HTML中给$route对应的
视图内容占位。
8
它会创建自己的作用域并将模板嵌套在内部。

9
mg-view是一个优先级为1000的终极指令。AngularJS不会运行同一个元素上的
低优先级指令（例如<div ng-view></div>元素上其他指令都是没有意义的）。
10
ngView指令遵循以下规则。
 每次触发$routeChangeSuccess事件，视图都会更新。 11
 如果某个模板同当前的路由相关联：
 创建一个新的作用域； 12
 移除上一个视图，同时上一个作用域也会被清除；
 将新的作用域同当前模板关联在一起； 13
 如果路由中有相关的定义，那么就把对应的控制器同当前作用域关联起来；
 触发$viewContentLoaded事件；
 如果提供了onload属性，调用该属性所指定的函数。 14

12.3 路由 15

我们可以使用AngularJS提供的when和otherwise两个方法来定义应用的路由。
16
用config函数在特定的模块或应用中定义路由。

angular.module('myApp', []). 17
config(['$routeProvider', function($routeProvider) {
// 在这里定义路由
}]); 18