大家好，我是IT修真院深圳分院第04期學員，一枚正直善良的web程序員。
今天給大家分享一下，修真院官網 js任務中會使用到的知識點：
如何使用ui-router？
1.背景介紹
Angular.js是一個用來構建“富客戶端”的神奇JavaScript框架。但是事實卻是許多開發者卻不使用其內置的路由模塊。反而使用AngularUI項目的
UI-Router模塊來代替之。
這是因為UI-Router有兩個重要的特性：
*多樣化視圖
*嵌入式視圖
多樣化視圖
大多數的應用程序都可以分解為一個一個區塊。最簡單的情況，一個應用程序有頭部（header）,主體內容（main content
area），以及一個尾部（footer）。通常一個應用程序會有一個額外的側邊欄（sidebar）在頁面的左邊或者右邊,大多數用例中，這些區塊將同時顯示在頁面上。
Angular.js的內置路由ngRoute只允許一個視圖（ng-view）出現在頁面上。這樣限制的情況下，人們可以使用包含頁面（ng-include）或者
其他的變通方法為應用創建一個布局（layout）或主頁（master page）。
UI-Router支持多樣化視圖，并且每一個視圖都有自己相應的控制，所以每個區塊都是封裝好，可以復用到整個應用程序需要的地方。
嵌入式視圖
常見的例子中，一個應用的嵌入式頁面一般是主頁的詳情頁面，更具體的說，就是列表的詳情頁面。許多應用程序，都有列表頁面，點擊其中一個列表元素，可以進入到列表的詳情頁面。更進一步說，你點擊列表中一個行的連接，進入一個可查看詳情頁面或是一個可編輯的表單。
如果列表頁面和詳情頁面是單獨分開的（或者他們被Angujar.js回調），使用Angular.js的內置路由ngRoute是非常容易完成的。然而，如果你想要保持列表不變，而詳情頁面出現在列表的右邊或者下面，這樣就變得非常具有挑戰性了。
需要澄清的是，這樣的要求可以使用ngRoute來完成。但是你需要讓兩個控制器（一個用于列表，一個用于顯示和隱藏詳情）共享一個視圖。這樣的結果不是理想的，因為我們想要列表和詳情頁面有各自的控制器和視圖，并且職責單一（顯示列表或者顯示列表項目的詳情）。封裝這些用戶接口模塊到它們各自的視圖，這樣我們就有更多的“可組合UI”，允許我們將各個區塊整合到一起，或者根據需求拆分。嵌入式視圖，不僅能夠讓這些視圖同時出現，還能讓一個視圖嵌入到另一個視圖中。
2.知識剖析
第一行，聲明AngularJS模塊,并把ui-router傳入AngularJS主模塊，所有的結合起來我們就得到了Angular模塊。
與集成的ngRoute服務不同的是，UI-Router可以將視圖嵌套，因為它基于的是操作狀態而僅非URL。與傳統做法使用ng-view不同的是，在ngRoute里需要使用ui-view服務。當在ui-router中處理路由和狀態時，開發者的重心是當前的狀態是什么以及在哪一個頁面里。
和ngRoute一樣，為特定狀態指定的模板將會放在ui-view元素中。在這些模板中也可以包含自己的ui-view,這就是在同一個路由下實現嵌套視圖的方法。要定義一個路由，與傳統的方法相同：使用.config方式，但使用的不是$routeProvider而是$stateProvider。
$stateProvider：管理狀態定義、當前狀態和狀態轉換。包含觸發狀態轉換的事件和回調函數，異步解決目標狀態的任何依賴項，更新$location到當前狀態。由于狀態包含關聯的url，通過$urlRouterProvider生成一個路由規則來執行轉換的狀態。
$urlRouterProvider：管理了一套路由規則列表來處理當$location發生變化時如何跳轉。最低級的方式是，規則可以是任意函數，來檢查$location，并在處理完成時候返回true。支持正則表達式規則和通過$urlMatcherFactory編譯的UrlMatcher對象的url占位符規則。
ui-view指示器：渲染狀態中定義的視圖，是狀態中定義的視圖的一個占位符。
模板，模板路徑，模板Provider
上述代碼在設置對象上定義了一個叫start的狀態。設置對象stateConfig和路由設置對象的選項是非常相似的。開發者可以在每個視圖下使用如下方式來設置模板template -
HTML字符串，或者是返回HTML字符串的函數templateUrl - HTML模板的路徑，或者是返回HTML模板路徑的函數templateProvider,返回HTML字符串的函數.
url選項將會為該應用的狀態指定一個URL基于用戶瀏覽該應用所在的狀態。這樣當在瀏覽該應用的時候便能實現深度鏈接的效果。
Views視圖
開發者可以在同一個模板中改變和切換不同的視圖。如果設置了視圖選項，則該狀態的‘template’，‘templateUrl’及‘templateProvider’將被忽略。如果想在路由里包含父級模板，就需要創建一個包含模板的抽象模板。例如:
該函數需要兩個參數：1.當前的路徑，2.需要重定向到的路徑（或者是需要在路徑被訪問是運行的函數）。設置重定向前需要為$urlRouterProvider設置when函數來接受一個字符串。例如，當希望重定向一個空的路由到/inbox：
otherwise()
和ngRoute的otherwise()函數相似，在用戶提交的路徑沒有被定義的時候它將重定向到指定的頁面。這是個創建’默認‘路徑的好方法。
otherwise()只接受一個參數，要么函數要么字符串，字符串必須為合法的url路由地址，函數則會在沒有任何路徑被匹配的時候被運行。
3.常見問題
如何激活狀態？
有三種方式來激活特定的狀態
使用ui-sref綁定的連接
直接導航到與狀態關聯的url
使用$state.go()方法
4.解決方案
5.編碼實戰
6.擴展思考
如何進行嵌套路由？
7.參考文獻
AngularJS ui-router (嵌套路由)
8.更多討論
為什么綁定標簽src屬性不解析ui-route嵌套路由？
angular.js中出于安全考慮，將帶有http://的網絡地址 當做一個不安全的地址，所以需要對這個地址進行處理才能使用
嵌套路由首先得引用ui-route.min.js文件
使用$sce.trustAsResourceUrl('xxx') 方法把這個字符串地址聲明為受信任的地址就可以
