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

更新時間：2016年12月14日 09:39:22 作者：小小小小小亮

這篇文章主要介紹了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支持，這里不想搭建本地服務器的，可以用火狐瀏覽器調試）

配置路由的代碼如下：

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模板的控制器函數。如果沒有對應的模板定義，控制器對象就不會被創(chuàng)建

III）.resolve

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

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>

我們發(fā)現現在一級導航欄底下，多了一個二級導航欄（多了一個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'
});

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