大家好晴氨，我是IT修真院深圳分院第02期學員孫劍立蚊荣，一枚正直善良的web程序員侥猩。
今天給大家分享一下，修真院官網(wǎng)JS任務5中如何使用UI-rounter隘冲？
1.背景介紹
路由(route)闹瞧，幾乎所有的MVC(VM)框架都應該具有的特性，因為它是前端構建單頁面應用(SPA)必不可少的組成部分展辞。 那么夹抗，對于angular而言，它自然也有內(nèi)置的路由模塊：叫做ngRoute纵竖。 不過漠烧，大家很少用它，因為它的功能太有限靡砌，往往不能滿足開發(fā)需求Ｒ雅А！ 于是通殃，一個基于ngRoute開發(fā)的第三方路由模塊度液，叫做ui.router，受到了大家的“追捧”画舌。
2.知識剖析
ngRoute與ui.router的優(yōu)劣
首先堕担，無論是使用哪種路由，作為框架額外的附加功能曲聂，它們都將以模塊依賴的形式被引入霹购，簡而言之就是：在引入路由源文件之后，你的代碼應該這樣寫(以ui.router為例)：
angular.module("myApp", ["ui.router"]);
// myApp為自定義模塊朋腋，依賴第三方路由模塊ui.router
其實ui.router和ngRoute大體的設計思路齐疙，對應的模塊劃分都是一致的(畢竟是同一個團隊開發(fā))膜楷，不同的地方在于功能點的實現(xiàn)和增強。
那么問題來了：ngRoute弱在哪些方面贞奋，ui.router怎么彌補了這些方面? 這里赌厅，列舉兩個最重要的方面：多視圖、嵌套視圖
多視圖
大多數(shù)的應用程序都可以分解為一個一個區(qū)塊轿塔。最簡單的情況特愿，一個應用程序有頭部（header）,主體內(nèi)容（main content area），以及一個尾部（footer）勾缭。 通常一個應用程序會有一個額外的側邊欄（sidebar ）在頁面的左邊或者右邊洽议。
大多數(shù)用例中，這些區(qū)塊將同時顯示在頁面上漫拭。Angular.js 的內(nèi)置路由ngRoute只允許一個視圖（ng-view）出現(xiàn)在頁面上亚兄。這樣限制的情況下，人們可以使用包含頁面（ng-include）或者 其他的變通方法為應用創(chuàng)建一個布局（layout）或主頁（master page）采驻。UI-Router支持多樣化視圖审胚，并且每一個視圖都有自己相應的控制，所以每個區(qū)塊都是封裝好礼旅，可以復用到整個應用程序需要的地方
嵌入式試圖
常見的例子中膳叨，一個應用的嵌入式頁面一般是主頁的詳情頁面，更具體的說痘系，就是列表的詳情頁面菲嘴。許多應用程序，都有列表頁面汰翠，點擊其中一個列表元素龄坪，可以進入到列表的詳情頁面。更進一步說复唤，你點擊列表中一個行的連接健田，進入一個 可查看 詳情頁面或是一個 可編輯 的表單。
如果列表頁面和詳情頁面是單獨分開的（或者他們被Angujar.js回調(diào)）佛纫，使用Angular.js的內(nèi)置路由ngRoute 是非常容易完成的妓局。然而，如果你想要保持列表不變呈宇，而詳情頁面出現(xiàn)在列表的右邊或者下面好爬，這樣就變得非常具有挑戰(zhàn)性了。
需要澄清的是甥啄，這樣的要求可以使用ngRoute來完成存炮。但是你需要讓兩個控制器（一個用于列表，一個用于顯示和隱藏詳情）共享一個視圖。這樣的結果不是理想的僵蛛，因為我們想要列表和詳情頁面有各自的控制器和視圖尚蝌，并且職責單一（顯示列表或者顯示列表項目的詳情）迎变。封裝這些用戶接口模塊到它們各自的視圖充尉，這樣我們就有更多的“可組合UI”，允許我們將各個區(qū)塊整合到一起衣形，或者根據(jù)需求拆分驼侠。嵌入式視圖，不僅能夠讓這些視圖同時出現(xiàn)谆吴，還能讓一個視圖嵌入到另一個視圖中倒源。
3.常見問題
如何使用ui.router
4.解決方案
UI-ROUTER的使用a.引入兩個文件，angular和angular-ui-router：b.主頁面中設置容器ui-viewc.然后在ng-app中注入ui-routerd.最后配置路由表
一個簡單的ui.router結構示例
UI-Router 引進了狀態(tài)機設計模式句狼，抽象高于傳統(tǒng)的路由笋熬。路由成了狀態(tài)，URL就成了狀態(tài)的一個簡單屬性腻菇。
5.編碼實戰(zhàn)
6.更多討論
7.參考文獻
UI-Router:為什么開發(fā)者都不喜歡Angular.js內(nèi)置的路由
深入理解ANGULARUI路由_UI-ROUTER
8.視頻資料
今天的分享就到這里啦胳螟，歡迎大家點贊、轉發(fā)筹吐、留言糖耸、拍磚~
請點擊鏈接【修真院】
來源：簡書
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權丘薛，非商業(yè)轉載請注明出處嘉竟。
