UI-Router
ng-route 與 ui-route 的區別·:
（1）ng-route的局限性：一個頁面無法嵌套多個視圖，也就是說一個頁面只能有包含一個頁面一個控制器的切換。
（2）ui-route的改進：在具有富客戶端的單頁應用中，要在一個頁面中呈現不同的視圖，我們可以通過ui-route實現路由的嵌套。
什么是UI-Router？
UI-Router被認為是AngularUI為開發者提供的最實用的一個模塊，它是一個讓開發者能夠根據URL狀態或者說是'機器狀態'來組織和控制界面UI的渲染，而不是僅僅只改變路由（傳統AngularJS應用實用的方式）。該模塊為開發者提供了很多最視圖（view）額外的控制。開發者可以創建嵌套分層的視圖、在同一個頁面使用多個視圖、讓多個視圖控制某個視圖等更多的功能。即使是非常復雜的web應用，UI-Router也可以極佳地駕馭。
ui-router的使用方法：
1、首先在視圖中鏈接這個庫：
2、設置HTML頁面，這里不同于ng-route中的ng-view
3、在JS中配置路由
因為在這里我們將index.html和fruit.html以及vegetable.html放置在了同一個目錄下，template下的路徑建議使用絕對路徑的形式。
效果如下，當初始默認界面為：
點擊水果，切換到水果頁面：
點擊蔬菜，切換到蔬菜頁面：
這里介紹了ui-route頁面的基礎用法，這個用法與ng-route實現的功能大體上是一致的，下面我們來看各個配置屬性的基本含義：
I）template/templateUrl
template：字符串方式的模板內容，或者是一個返回html的函數
templateUrl：模板路徑或者是返回模板路徑的函數
templateProvider：返回HTML內容的函數
例如：在我們的例子中所寫的
II）.controller
控制器，返回對應url模板的控制器名稱，或者是對應url模板的控制器函數。如果沒有對應的模板定義，控制器對象就不會被創建
III）.resolve
使用resolve功能，我們可以準備一組用來注入到控制器的依賴對象。在ngRoute中，resolve可以在實際渲染之前解決掉promise，resolve選項提供一個對象，對象中的key就是準備注入到controller中的依賴名稱，值則是這個創建對象的工廠。
3.通過ui-route實現深層次的路由嵌套
我們在水果頁面加上了新的html：
我們發現現在一級導航欄底下，多了一個二級導航欄（多了一個ui-view）
重新配置JS路由，在第一級路由fruit的基礎上進一步進行嵌套，JS代碼
如下：
即二級切換頁面的效果為：
4.此外ui-route還可以實現多視圖路由，這個功能同一個state下，全頁面分為幾個細小的頁面分別顯示不同的值。
一級路由默認項設置用 ?otherwise
$urlRouterProvider.otherwise('home');//默認狀態下將路由重定向至home
二級路由默認項用? $state.go()
$urlRouterProvider.otherwise(‘default');//默認狀態下將路由重定向至default
