快捷導(dǎo)航

AngularJS ui-router (嵌套路由)實(shí)例

更新時(shí)間：2017年03月10日 16:24:46 作者：A_山水子農(nóng)

本篇文章主要介紹了AngularJS ui-router (嵌套路由)實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。

我們都知道，如果使用原生路由的話，Angular的視圖是通過(guò)ng-view這個(gè)指令進(jìn)行加載的。比如這樣：<div ng-view></div>。一般，我們都會(huì)把這個(gè)指令放在index.html這個(gè)文件里面，然后，通過(guò)控制器來(lái)加載相應(yīng)的模板視圖。比如這樣：

var bookStoreApp = angular.module('bookStoreApp', [ 
  'ngRoute', 'ngAnimate', 'bookStoreCtrls', 
]); 
bookStoreApp.config(function($routeProvider) { 
  $routeProvider.when('/hello', { 
    templateUrl: 'tpls/hello.html', 
    controller: 'HelloCtrl' 
  }).when('/list', { 
    templateUrl: 'tpls/bookList.html', 
    controller: 'BookListCtrl' 
  }).otherwise({ 
    redirectTo: '/hello' 
  }) 
});

這是屬于AngularJS的原生路由定義。從表面上看似乎挺方便，沒(méi)有什么太大的問(wèn)題。但是細(xì)想一下，如果說(shuō)我們有一個(gè)網(wǎng)頁(yè)，左邊是菜單欄，右邊是各個(gè)菜單所對(duì)應(yīng)的視圖。那么，如果按照這樣的定義，點(diǎn)擊每個(gè)菜單項(xiàng)，豈不得刷新整個(gè)網(wǎng)頁(yè)？而我們想要的只是右邊的視圖刷新。所以，這就要用到嵌套路由了。

所謂嵌套路由，就是視圖里面還可以再嵌套視圖，路由里還可以再嵌套路由。并且，通過(guò)ui-router，可以實(shí)現(xiàn)不同視圖之間的參數(shù)傳遞。

ui-router定義路由的時(shí)候，與ngRouter不一樣，它是使用.來(lái)進(jìn)行定義的，并且在html標(biāo)簽里，不使用ng-view，而是使用ui-view，比如<div ui-view></div>。ui-router提供了$stateProvider，$urlRouterProvider來(lái)進(jìn)行路由定義。

下面的實(shí)例演示如何實(shí)現(xiàn)路由嵌套：

home.html

創(chuàng)建如下的html頁(yè)面：

<div class="jumbotron text-center"> 
  <h1>Home</h1> 
  <p>This page demonstrates 
    <span class="text-danger">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>

home-list.html

創(chuàng)建如下的html頁(yè)面：

<ul> 
  <li ng-repeat="topic in topics">{{ topic }}</li> 
</ul>

about.html

創(chuàng)建如下的html頁(yè)面：

<div class="jumbotron text-center"> 
  <h1>The About Page</h1> 
  <p>This page demonstrates 
    <span class="text-danger">multiple</span>and 
    <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>

table-data.html

創(chuàng)建如下的html頁(yè)面：

<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>

注意，到目前為止，我們還沒(méi)有插入任何AngularJS路由或者其它任何框架。目前我們只是創(chuàng)建了一些頁(yè)面片段，我們需要一個(gè)占位或者說(shuō)父頁(yè)面來(lái)裝下這些頁(yè)面片段。讓我們把這個(gè)頁(yè)面叫做 index.html.

index.html

用如下內(nèi)容創(chuàng)建這個(gè)html頁(yè)面

<!doctype html> 
<html ng-app="routerApp"> 
<head> 
  <meta charset="utf-8"> 
  <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css" rel="external nofollow" > 
  <script src="js/angular.min.js"></script> 
  <script src="js/angular-animate.js"></script> 
  <script src="js/angular-ui-router.js"></script> 
  <script src="app.js"></script> 
</head> 
<body> 
  <nav class="navbar navbar-inverse" role="navigation"> 
    <div class="navbar-header"> 
      <a class="navbar-brand" ui-sref="#">AngularUI Router</a> 
    </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>

在主頁(yè)中我們引入了angular.min.js、angular-ui-router.js、angular-animate.js和app.js。在class為Container的div中我們創(chuàng)建了一個(gè)<div ui-view=""></div>，該 div 內(nèi)的 HTML 內(nèi)容會(huì)根據(jù)路由的變化而變化。在<a ui-sref="home"></a>中ui-sref 指令鏈接到特定狀態(tài)。

在app.JS文件的內(nèi)容，我們聲明了AngularJS模塊和路由配置。當(dāng)頁(yè)面加載的時(shí)候我們會(huì)在index.html中顯示home.html的內(nèi)容。代碼如下：

var routerApp = angular.module('routerApp', ['ui.router']); 
routerApp.config(function($stateProvider, $urlRouterProvider) { 
  /*路由重定向 $urlRouterProvider:如果沒(méi)有路由引擎能匹配當(dāng)前的導(dǎo)航狀態(tài)，那它就會(huì)默認(rèn)將路徑路由至 home.html, 
   *這個(gè)頁(yè)面就是狀態(tài)名稱被聲明的地方. */ 
  $urlRouterProvider.otherwise('/home'); 
  $stateProvider 
    .state('home', { 
      url: '/home', 
      templateUrl: 'tpls2/home.html' 
    }) 
   /* nested list with custom controller*/ 
  .state('home.list', { 
    url: '/list', 
    templateUrl: 'tpls2/home-list.html', 
    controller: function($scope) { 
      $scope.topics = ['Butterscotch', 'Black Current', 'Mango']; 
    } 
  }) 
  // nested list with just some random string data 
  .state('home.paragraph', { 
    url: '/paragraph', 
    template: 'I could sure use a scoop of ice-cream. ' 
  }) 
  .state('about', { 
    url: '/about', 
    /* view 用在該狀態(tài)下有多個(gè) ui-view 的情況，可以對(duì)不同的 ui-view 使用特定的 template, controller, resolve data 
     絕對(duì) view 使用 '@' 符號(hào)來(lái)區(qū)別，比如 'columnOne@about' 表明名為 'columnOne' 的 ui-view 使用了 'about' 狀態(tài)的 
     模板(template)，相對(duì) view 則無(wú)*/ 
    views: { 
      // 無(wú)名 view 
      '': { 
        templateUrl: 'tpls2/about.html' 
      }, 
      // for "ui-view='columnOne'" 
      'columnOne@about': { 
        template: '這里是第一列的內(nèi)容' 
      }, 
      // for "ui-view='columnTwo'" 
      'columnTwo@about': { 
        templateUrl: 'tpls2/table-data.html', 
        controller: 'Controller' 
      } 
    } 
  }); 
}); 
routerApp.controller('Controller', function($scope) { 
  $scope.message = 'test'; 
  $scope.topics = [{ 
    name: 'Butterscotch', 
    price: 50 
  }, { 
    name: 'Black Current', 
    price: 100 
  }, { 
    name: 'Mango', 
    price: 20 
  }]; 
});