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模板的控制器函式。如果沒有對應的模板定義，控制器物件就不會被建立

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下，全頁面分為幾個細小的頁面分別顯示不同的值。