本文實(shí)例講述了AngularJS基于ui-route實(shí)現(xiàn)深層路由的方法。分享給大家供大家參考，具體如下：

1.前面我們通過(guò)了簡(jiǎn)單的ng-route實(shí)現(xiàn)了簡(jiǎn)單層次的路由，對(duì)于深層次的路由，我們可以通過(guò)ui-route來(lái)實(shí)現(xiàn)。

（1）ng-route的局限性：一個(gè)頁(yè)面無(wú)法嵌套多個(gè)視圖，也就是說(shuō)一個(gè)頁(yè)面只能有包含一個(gè)頁(yè)面一個(gè)控制器的切換。
（2）ui-route的改進(jìn)：在具有富客戶端的單頁(yè)應(yīng)用中，要在一個(gè)頁(yè)面中呈現(xiàn)不同的視圖，我們可以通過(guò)ui-route實(shí)現(xiàn)路由的嵌套。

2 . ui-route的使用方法

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

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

（2）設(shè)置HTML頁(yè)面，這里不同于ng-route中的ng-view

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

（3）在JS中配置路由

（因?yàn)閏horme不支持本地文件訪問，而FF支持，這里不想搭建本地服務(wù)器的，可以用火狐瀏覽器調(diào)試）

配置路由的代碼如下：

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>這是首頁(yè)</h2>'
  });
});

因?yàn)樵谶@里我們將index.html和fruit.html以及vegetable.html放置在
了同一個(gè)目錄下，template下的路徑建議使用絕對(duì)路徑的形式。

效果如下，當(dāng)初始默認(rèn)界面為：

點(diǎn)擊水果，切換到水果頁(yè)面：

點(diǎn)擊蔬菜，切換到蔬菜頁(yè)面：

這里介紹了ui-route頁(yè)面的基礎(chǔ)用法，這個(gè)用法與ng-route實(shí)現(xiàn)的功能大體上是一致的，下面我們來(lái)看各個(gè)配置屬性的基本含義：

I）template/templateUrl

template：字符串方式的模板內(nèi)容，或者是一個(gè)返回html的函數(shù)
templateUrl：模板路徑或者是返回模板路徑的函數(shù)
templateProvider：返回HTML內(nèi)容的函數(shù)

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

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

II）.controller

控制器，返回對(duì)應(yīng)url模板的控制器名稱，或者是對(duì)應(yīng)url模板的控制器函數(shù)。如果沒有對(duì)應(yīng)的模板定義，控制器對(duì)象就不會(huì)被創(chuàng)建

III）.resolve

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

3.通過(guò)ui-route實(shí)現(xiàn)深層次的路由嵌套

我們?cè)谒?yè)面加上了新的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ā)現(xiàn)現(xiàn)在一級(jí)導(dǎo)航欄底下，多了一個(gè)二級(jí)導(dǎo)航欄（多了一個(gè)ui-view）

重新配置JS路由，在第一級(jí)路由fruit的基礎(chǔ)上進(jìn)一步進(jìn)行嵌套，JS代碼
如下：

$stateProvider.state('fruit',{
    url:'/fruit',
    templateUrl:'fruit.html'
})
.state('vegetable',{
    url:'/vegetable',
    templateUrl:'vegetable.html'
})
.state('index',{
    url:'/index',
    template:'<h2>這是首頁(yè)</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'
});

最后我們來(lái)看效果：現(xiàn)在點(diǎn)擊水果一級(jí)切換頁(yè)面之后顯示為：

在點(diǎn)擊橘子，蘋果或者香蕉進(jìn)行選擇，其效果為，即二級(jí)切換頁(yè)面的效果為：

4.此外ui-route還可以實(shí)現(xiàn)多視圖路由，這個(gè)功能同一個(gè)state下，全頁(yè)面分為幾個(gè)細(xì)小的頁(yè)面分別顯示不同的值。

更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》

希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。

最新評(píng)論