AngularJS中提供ngRoute路由模块实现路由切换，在1.2+后的版本独立出来angular-router.js，但是在遇到路由深层次嵌套的情况下，该模块就力不从心，这时就需要angular-ui-router登场。

1. 目录结构

目录结构

  • app文件夹为项目资源主文件夹
  • plugin为引入的框架和库文件夹
  • templates为各模板的文件夹
  • index.html项目启动主页
  • app.js为项目启动js文件

2. 主页index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html ng-app="routerApp">
  <head>
    <meta charset="UTF-8">
    <title>ui router</title>
    <link rel="stylesheet" href="plugin/bootstrap.min.css" />
    <script type="text/javascript" src="plugin/angular.min.js" ></script>
    <script type="text/javascript" src="plugin/angular-ui-router.min.js" ></script>
    <script type="text/javascript" src="js/app.js" ></script>
  </head>
  <body>
    <nav class="navbar navbar-inverse" role="navigation">
      <div class="navbar-brand" ui-sref="#">AngularUI Router</div>
      <ul class="nav navbar-nav">
        <li>
          <a ui-sref="home">Home</a>
        </li>
        <li>
          <a ui-sref="about">About</a>
        </li>
      </ul>
    </nav>
    <div class="container">
      <div ui-view="">
        
      </div>
    </div>
  </body>
</html>

这里定义了一个angularjs应用ng-app="routerApp"，定义了两个路由ui-sref="home"、ui-sref="about"，<div ui-view=""></div>为路由显示容器。

3. 第一种方式路由home页home.html

1
2
3
4
5
6
7
8
9
10
11
<div class="jumbotron text-center">
  <h1>Home</h1>
  <p>This Page Demonstartes
    <span class="text-denger">nested</span>views.
  </p>
  <a ui-sref=".list" class="btn btn-primary">List</a>
  <a ui-sref=".paragraph" class="btn btn-danger">Paragraph</a>
</div>
<div ui-view>
  
</div>

这里定义了两个二级路由ui-sref=".list"、ui-sref=".paragraph"，<div ui-view></div>为路由显示容器。

4. 二级路由.list页home-list.html

1
2
3
4
5
<ul>
  <li ng-repeat="topic in topics">
    {{topic}}
  </li>
</ul>

5. 第二种方式路由视图about页about.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="jumbotron text-center">
  <h1>The About Page</h1>
  <p>This Page demonstrates
    <span class="text-danger">multiple</span>
    <span class="text-danger">named</span>views.
  </p>
</div>
<div class="row">
  <div class="col-md-6">
    <div ui-view="columnOne"></div>
  </div>
  <div class="col-md-6">
    <div ui-view="columnTwo"></div>
  </div>
</div>

这里定义了两个视图块ui-view="columnOne"、ui-view="columnTwo"，来显示不同的模板。

6. 二级路由视图columnTwo@about页table-data.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<h2>Ice-Creams</h2>
<table class="table table-hover table-striped table-bordered">
  <thead>
    <tr>
      <td>Name</td>
      <td>Cost</td>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="topic in topics">
      <td>{{topic.name}}</td>
      <td>${{topic.price}}</td>
    </tr>
  </tbody>
</table>

7. 设置app.js，定义angualrjs模块，路由状态管理，控制器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
var routerApp = angular.module('routerApp', ['ui.router']);

routerApp.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider){
  $urlRouterProvider.otherwise('/home');
  $stateProvider.state('home',{
    url: '/home',
    templateUrl: 'templates/home.html'
  }).state('home.list',{
    url: '/list',
    templateUrl: 'templates/home-list.html',
    controller: function($scope){
      $scope.topics = ['Butterscotch', 'Black Current', 'Mango'];
    }
  }).state('home.paragraph', {
    url: '/paragraph',
    template: '666，paragraph页面'
  }).state('about',{
    //多个ui-view的情况
    url: '/about',
    views: {
      //，没有指定view
      '': {
        templateUrl: 'templates/about.html'
      },
      // ui-view='colnumOne'
      'columnOne@about': {
        template: '这里是第一列的内容'
      },
      // ui-view='columnTwo'
      'columnTwo@about': {
        templateUrl: 'templates/table-data.html',
        controller: 'table-Controller'
      }
    }
  })
}]);

routerApp.controller('table-Controller', function($scope){
  $scope.message = 'test';
  $scope.topics = [{
    name: 'Butterscotch',
    price: 50
  },
  {
    name: 'Black Current',
    price: 100
  },
  {
    name: 'Mango',
    price: 20
  }];
});

在angularjs主模块注入ui.router依赖，在模块配置中配置$stateProvider、$urlRouterProvider用于状态管理和url管理的服务，当没有路由匹配时执行$urlRouterProvider.otherwise('/home');，在state()方法第一个参数用.表示二级路由；当涉及多个ui-view时使用childName@parentName子视图名+@+父级路由名方式定义视图。再配合angular-animate可以实现丰富的切换效果和复杂的路由效果。