AngularJS权威指南

AngularJS权威指南-多重视图和路由

《AngularJS 权威教程》读书笔记，第十二章——多重视图和路由。

简介

从 1.2 版本开始，AngularJS 将 ngRoutes 从核心代码中剥离出来成为独立的模块。所以我们需要单独安装并加入这个模块：

1
2
3
4
<script src="js/vendor/angular.js"></script>
<script src="js/vendr/angular-route.js"></script>
angular.module('myApp', ['ngRoute']);

布局模板

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

路由

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
angular.module('myApp', [])
.config(['$routeProvider', function($routeProvider){
    $routeProvider
        .when('/', {
            controller: 'HomeController',
            templateUrl: 'views/home.html',
            template: ...,
            resolve: ...,
            redirectTo: ...,
            reloadOnSearch: ...
        })
        .when('/inbox/:name', {
            controller: 'InboxController',
            templateUrl: 'views/inbox.html'
        })
        .otherwise({
            redirectTo: '/'
        });
}]);

其中路径中的 name 参数的值可以从 $routeParams 中获得。

$location服务

$location 服务没有刷新整个页面的能力。如果需要刷新整个页面，需要使用 $window.loation 对象。

  1. path(): 设置、获取当前路径，该方法直接和 HTML5 的历史 API 进行交互，所以用户可以通过点击后退按钮退回到上一个页面
  2. replace(): 该方法可以在页面跳转后用户不能点击后退按钮：$location.path('/home').replace();
  3. absUrl(): 获取编码后的完整 URL
  4. hash(): 获取 URL 中的 hash 片段
  5. host(), port(), protocol(), search(), url() 这些见词知意就不废话了

路由模式

不同的路由模式在浏览器的地址栏中会以不同的 URL 格式呈现。$location 服务默认会使用标签模式进行路由。

便签模式

标签（hashbang）是 HTML5 模式（真正的 HTML5 模式路由就是完全正常的路径，没有使用井号）的降级方案，也就是说浏览器不支持 HTML5 模式时会自动启用标签模式。并且，如果没有进行额外的指定，AngularJS 默认使用标签模式（看来还是不支持 HTML5 模式的浏览器较多）。如果要显示指定配置使用标签模式：

1
2
3
4
5
angular.module('myApp', ['ngRoute'])
.config(['$locationProvider', function($locationProvider){
    $locationProvider.html5Mode(false);
    $locationProvider.hashPrefix('!'); // 这一句可选：只是配置标签模式下标签默认的前缀 ! 符号
}]);

路由事件

$route 服务在路由过程中的每个阶段都会触发不同的事件可以为这些不同的路由事件设置监听器并做出响应。

  1. $routeChangeStart
  2. $routeChangeSuccess
  3. $routeChangeError
  4. $routeUpdate