AngularJS ui-router (嵌套路由)

 

AngularJS ui-router (嵌套路由)

标签： AngularJS ui-router嵌套路由ui-router 嵌套路由ui-routerAngularJS 嵌套路由
2016-08-19 12:23 464人阅读 评论(0) 收藏 举报
 分类：

版权声明：本文为博主原创文章，未经博主允许不得转载。

  我们都知道，如果使用原生路由的话，Angular的视图是通过ng-view这个指令进行加载的。比如这样：<div ng-view></div>。一般，我们都会把这个指令放在index.html这个文件里面，然后，通过控制器来加载相应的模板视图。比如这样：

 

[javascript] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. var bookStoreApp = angular.module('bookStoreApp', [  
  2.     'ngRoute', 'ngAnimate', 'bookStoreCtrls',  
  3. ]);  
  4. bookStoreApp.config(function($routeProvider) {  
  5.     $routeProvider.when('/hello', {  
  6.         templateUrl: 'tpls/hello.html',  
  7.         controller: 'HelloCtrl'  
  8.     }).when('/list', {  
  9.         templateUrl: 'tpls/bookList.html',  
  10.         controller: 'BookListCtrl'  
  11.     }).otherwise({  
  12.         redirectTo: '/hello'  
  13.     })  
  14. });  

 

  这是属于AngularJS的原生路由定义。从表面上看似乎挺方便，没有什么太大的问题。但是细想一下，如果说我们有一个网页，左边是菜单栏，右边是各个菜单所对应的视图。那么，如果按照这样的定义，点击每个菜单项，岂不得刷新整个网页？而我们想要的只是右边的视图刷新。所以，这就要用到嵌套路由了。

  所谓嵌套路由，就是视图里面还可以再嵌套视图，路由里还可以再嵌套路由。并且，通过ui-router，可以实现不同视图之间的参数传递。

  ui-router定义路由的时候，与ngRouter不一样，它是使用.来进行定义的，并且在html标签里，不使用ng-view，而是使用ui-view，比如<div ui-view></div>。ui-router提供了$stateProvider，$urlRouterProvider来进行路由定义。

下面的实例演示如何实现路由嵌套：

home.html

创建如下的html页面：

[html] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. <div class="jumbotron text-center">  
  2.     <h1>Home</h1>  
  3.     <p>This page demonstrates  
  4.         <span class="text-danger">nested</span>views.  
  5.     </p>  
  6.     <a ui-sref=".list" class="btn btn-primary">List</a>  
  7.     <a ui-sref=".paragraph" class="btn btn-danger">Paragraph</a>  
  8. </div>  
  9. <div ui-view></div>  

 

home-list.html

创建如下的html页面：

 

[html] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. <ul>  
  2.     <li ng-repeat="topic in topics">{{ topic }}</li>  
  3. </ul>  

 

about.html

创建如下的html页面：

 

[html] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. <div class="jumbotron text-center">  
  2.     <h1>The About Page</h1>  
  3.     <p>This page demonstrates  
  4.         <span class="text-danger">multiple</span>and  
  5.         <span class="text-danger">named</span>views.</p>  
  6. </div>  
  7. <div class="row">  
  8.     <div class="col-md-6">  
  9.         <div ui-view="columnOne"></div>  
  10.     </div>  
  11.     <div class="col-md-6">  
  12.         <div ui-view="columnTwo"></div>  
  13.     </div>  
  14. </div>  

 

table-data.html

创建如下的html页面：

 

[html] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. <h2>Ice-Creams</h2>  
  2. <table class="table table-hover table-striped table-bordered">  
  3.     <thead>  
  4.         <tr>  
  5.             <td>Name</td>  
  6.             <td>Cost</td>  
  7.         </tr>  
  8.     </thead>  
  9.     <tbody>  
  10.         <tr ng-repeat="topic in topics">  
  11.             <td>{{ topic.name }}</td>  
  12.             <td>${{ topic.price }}</td>  
  13.         </tr>  
  14.     </tbody>  
  15. </table>  

 

  注意，到目前为止，我们还没有插入任何AngularJS路由或者其它任何框架。目前我们只是创建了一些页面片段，我们需要一个占位或者说父页面来装下这些页面片段。让我们把这个页面叫做 index.html.

index.html

用如下内容创建这个html页面

 

[html] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. <!doctype html>  
  2. <html ng-app="routerApp">  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css">  
  6.     <script src="js/angular.min.js"></script>  
  7.     <script src="js/angular-animate.js"></script>  
  8.     <script src="js/angular-ui-router.js"></script>  
  9.     <script src="app.js"></script>  
  10. </head>  
  11. <body>  
  12.     <nav class="navbar navbar-inverse" role="navigation">  
  13.         <div class="navbar-header">  
  14.             <a class="navbar-brand" ui-sref="#">AngularUI Router</a>  
  15.         </div>  
  16.         <ul class="nav navbar-nav">  
  17.             <li>  
  18.                 <a ui-sref="home">Home</a>  
  19.             </li>  
  20.             <li>  
  21.                 <a ui-sref="about">About</a>  
  22.             </li>  
  23.         </ul>  
  24.     </nav>  
  25.     <div class="container">  
  26.         <div ui-view=""></div>  
  27.     </div>  
  28. </body>  
  29. </html>  

 

  在主页中我们引入了angular.min.js、angular-ui-router.js、angular-animate.js和app.js。在class为Container的div中我们创建了一个<div ui-view=""></div>， 该 div 内的 HTML 内容会根据路由的变化而变化。在<a ui-sref="home"></a>中ui-sref 指令链接到特定状态。

  在app.JS文件的内容，我们声明了AngularJS模块和路由配置。当页面加载的时候我们会在index.html中显示home.html的内容。代码如下：

 

[javascript] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. var routerApp = angular.module('routerApp', ['ui.router']);  
  2. routerApp.config(function($stateProvider, $urlRouterProvider) {  
  3.     /*路由重定向 $urlRouterProvider:如果没有路由引擎能匹配当前的导航状态，那它就会默认将路径路由至 home.html,  
  4.      *这个页面就是状态名称被声明的地方. */  
  5.     $urlRouterProvider.otherwise('/home');  
  6.     $stateProvider  
  7.         .state('home', {  
  8.             url: '/home',  
  9.             templateUrl: 'tpls2/home.html'  
  10.         })  
  11.      /*  nested list with custom controller*/  
  12.     .state('home.list', {  
  13.         url: '/list',  
  14.         templateUrl: 'tpls2/home-list.html',  
  15.         controller: function($scope) {  
  16.             $scope.topics = ['Butterscotch', 'Black Current', 'Mango'];  
  17.         }  
  18.     })  
  19.     // nested list with just some random string data  
  20.     .state('home.paragraph', {  
  21.         url: '/paragraph',  
  22.         template: 'I could sure use a scoop of ice-cream. '  
  23.     })  
  24.     .state('about', {  
  25.         url: '/about',  
  26.         /* view 用在该状态下有多个 ui-view 的情况，可以对不同的 ui-view 使用特定的 template, controller, resolve data 
  27.          绝对 view 使用 '@' 符号来区别，比如 'columnOne@about' 表明名为 'columnOne' 的 ui-view 使用了 'about' 状态的 
  28.          模板(template)，相对 view 则无*/  
  29.         views: {  
  30.             // 无名 view  
  31.             '': {  
  32.                 templateUrl: 'tpls2/about.html'  
  33.             },  
  34.             // for "ui-view='columnOne'"  
  35.             'columnOne@about': {  
  36.                 template: '这里是第一列的内容'  
  37.             },  
  38.             // for "ui-view='columnTwo'"  
  39.             'columnTwo@about': {  
  40.                 templateUrl: 'tpls2/table-data.html',  
  41.                 controller: 'Controller'  
  42.             }  
  43.         }  
  44.     });  
  45. });  
  46. routerApp.controller('Controller', function($scope) {  
  47.     $scope.message = 'test';  
  48.     $scope.topics = [{  
  49.         name: 'Butterscotch',  
  50.         price: 50  
  51.     }, {  
  52.         name: 'Black Current',  
  53.         price: 100  
  54.     }, {  
  55.         name: 'Mango',  
  56.         price: 20  
  57.     }];  
  58. });  


 

 

 

 

 

 
 
posted @ 2016-11-14 18:02  五艺  阅读(272)  评论(0)    收藏  举报