AngularJS基於ui-route實現深層路由的方法【路由嵌套】_AngularJS

本文執行個體講述了AngularJS基於ui-route實現深層路由的方法。分享給大家供大家參考，具體如下：

1.前面我們通過了簡單的ng-route實現了簡單層次的路由，對於深層次的路由，我們可以通過ui-route來實現。

（1）ng-route的局限性：一個頁面無法嵌套多個視圖，也就是說一個頁面只能有包含一個頁面一個控制器的切換。
（2）ui-route的改進：在具有富用戶端的單頁應用中，要在一個頁面中呈現不同的視圖，我們可以通過ui-route實現路由的嵌套。

2 . ui-route的使用方法

（1）首先載入angular-ui-route.js

 <script src="js/angular-ui-router.js"></script>

（2）設定HTML頁面，這裡不同於ng-route中的ng-view

<ul>  <li><a ui-sref="index">首頁</a></li>  <li><a ui-sref="fruit">水果</a></li>  <li><a ui-sref="vegetable">蔬菜</a></li> </ul>

（3）在JS中配置路由

（因為chorme不支援本地檔案訪問，而FF支援，這裡不想搭建本機伺服器的，可以用Firefox瀏覽器調試）

配置路由的代碼如下：

angular.module('myapp',['ui.router']).config(function($stateProvider,$urlRouterProvider){  $urlRouterProvider.otherwise('/index');  $stateProvider.state('fruit',{    url:'/fruit',    templateUrl:'fruit.html'  })  .state('vegetable',{    url:'/vegetable',    templateUrl:'vegetable.html'  })  .state('index',{    url:'/index',    template:'<h2>這是首頁</h2>'  });});

因為在這裡我們將index.html和fruit.html以及vegetable.html放置在
了同一個目錄下，template下的路徑建議使用絕對路徑的形式。

效果如下，當初始預設介面為：

點擊水果，切換到水果頁面：

點擊蔬菜，切換到蔬菜頁面：

這裡介紹了ui-route頁面的基礎用法，這個用法與ng-route實現的功能大體上是一致的，下面我們來看各個配置屬性的基本含義：

I）template/templateUrl

template：字串方式的模板內容，或者是一個返回html的函數
templateUrl：模板路徑或者是返回模板路徑的函數
templateProvider：返回HTML內容的函數

例如：在我們的例子中所寫的

 .state('vegetable',{    url:'/vegetable',    templateUrl:'vegetable.html'  })  .state('index',{    url:'/index',    template:'<h2>這是首頁</h2>'  });

II）.controller

控制器，返回對應url模板的控制器名稱，或者是對應url模板的控制器函數。如果沒有對應的模板定義，控制器對象就不會被建立

III）.resolve

使用resolve功能，我們可以準備一組用來注入到控制器的依賴對象。在ngRoute中，resolve可以在實際渲染之前解決掉promise，resolve選項提供一個對象，對象中的key就是準備注入到controller中的依賴名稱，值則是這個建立對象的工廠。

3.通過ui-route實現深層次的路由嵌套

我們在水果頁面加上了新的html：

 <ul>  <li><a ui-sref="fruit.orange">橘子</a></li>  <li><a ui-sref="fruit.apple">蘋果</a></li>  <li><a ui-sref="fruit.banana">香蕉</a></li> </ul> <div ui-view></div>

我們發現現在一級導覽列底下，多了一個二級導覽列（多了一個ui-view）

重新設定JS路由，在第一級路由fruit的基礎上進一步進行嵌套，JS代碼
如下：

$stateProvider.state('fruit',{    url:'/fruit',    templateUrl:'fruit.html'}).state('vegetable',{    url:'/vegetable',    templateUrl:'vegetable.html'}).state('index',{    url:'/index',    template:'<h2>這是首頁</h2>'}).state('fruit.orange',{    url:'/orange',    templateUrl:'orange.html',}).state('fruit.apple',{    url:'/apple',    templateUrl:'apple.html'}).state('fruit.banana',{    url:'/banana',    templateUrl:'banana.html'});

最後我們來看效果：現在點擊水果一級切換頁面之後顯示為：

在點擊橘子，蘋果或者香蕉進行選擇，其效果為，即二級切換頁面的效果為：

4.此外ui-route還可以實現多視圖路由，這個功能同一個state下，全頁面分為幾個細小的頁面分別顯示不同的值。

更多關於AngularJS相關內容感興趣的讀者可查看本站專題：《AngularJS入門與進階教程》及《AngularJS MVC架構總結》

希望本文所述對大家AngularJS程式設計有所協助。