【知識點】爲何推薦用ui-router替代ngRoute

初學angularjs，第一個實例是官網的phoneCat，裏面路由用的是ngRoute，後來看到別的用ui-router，以爲好奇，ui-route是什麼呢？百度一些，獲得以下解釋：

ui-router 的工做原理很是相似於 Angular 的路由控制器，但它只關注狀態。

ui-router是一個web客戶端的路由解決方案，它最大的做用是將web界面的設計分塊了

UI-Router被認爲是AngularUI爲開發者提供的最實用的一個模塊，它是一個讓開發者可以根據URL狀態或者說是'機器狀態'來組織和控制界面UI的渲染，而不是僅僅只改變路由（傳統AngularJS應用實用的方式）

看了以上解釋後，懂了嗎？我是沒動，但好像很牛掰的樣子，繼續研究，終於看到說不一樣的地方了：

AngularUI Router是AngularUI 團隊開發的一個AngularJS路由模塊，相比AngularJS的標準路由ngRoute，它更靈活，基於state而不是URL在一個頁面中加載多個View並保持View的層次，Nested States & Views以及Multiple & Named Views。UI-Router被認爲是AngularUI爲開發者提供的最實用的一個模塊。

與集成的ngRoute服務不一樣的是，UI-Router能夠將視圖嵌套，由於它基於的是操做狀態而僅非URL。與傳統作法使用ng-view不一樣的是，在ngRoute裏須要使用ui-view服務。當在ui-router中處理路由和狀態時，開發者的重心是當前的狀態是什麼以及在哪個頁面裏。

上面說集成的ngRoute服務不一樣，實際上在我當前用的版本中已經把ngRoute模塊獨立出來了；

一、UI-Router支持嵌套視圖，ngRoute不支持

使用ngRoute時，在主頁面添加<ng-view></ng-view>標籤，會把視圖渲染好自動加載到此標籤，而若是想在視圖裏面再加一個<ng-view></ng-view>，用別的子視圖渲染好來填充視圖裏面種的<ng-view>標籤，這是不支持的（這話說得很繞，就是不支持視圖裏面嵌套視圖）；而UI-Router支持這個特性，ui-router使用ui-view標籤，能夠層層嵌套視圖。

二、UI-Router支持多視圖，ngRoute不支持

ngRoute的頁面只能添加一個<ng-view></ng-view>標籤，及時添加多個，都是填充一樣的內容；
UI-Router能夠經過爲ui-view命名的方式支持多個視圖，如:

<ng-view="profile"></ng-view>
<ng-view="main"></ng-view>

這裏有對的詳細分析：ui.router源碼解析

最後，仍是要根據本身的需求來：是否須要用到這些特性？ngRoute是否可以知足你的要求？若是ngRoute夠用了，仍是使用ngRoute吧，雖然UI-Router不會增長使用難度，可是UI-Router壓縮後還有30kb，而ngRoute壓縮後只有5kb！