1.背景介紹
angular路由
? ? ? angular路由可以實(shí)現(xiàn)多視圖的單頁Web應(yīng)用萍倡。當(dāng)請求一個(gè)url時(shí)，根據(jù)路由配置匹配這個(gè)url辟汰，然后請求模板片段列敲，并插入到ng-view中去。這種做法使網(wǎng)頁局部刷新帖汞，減少了切換網(wǎng)頁時(shí)帶來的突兀感戴而，也減少了項(xiàng)目的代碼量。
2.知識(shí)剖析
ngRoute實(shí)現(xiàn)原理
我們知道翩蘸，設(shè)置
<a href="#a">錨點(diǎn)a</a>這樣的錨點(diǎn)所意，a鏈接會(huì)在同一頁面中跳轉(zhuǎn)。ngRoute利用了這一特性將錨點(diǎn)出的文件設(shè)置為模板，在錨點(diǎn)被鏈接時(shí)扶踊，監(jiān)聽到url的變化泄鹏，加載相應(yīng)的模板文件。
3.常見問題
a.ngRoute的使用方法秧耗？
b.ngRoute的組成备籽？
4.解決方案
a.ngRoute的使用：
1.引入兩個(gè)文件，angular和angular-route：
2.主頁面中設(shè)置容器ng-view
3.然后在ng-app中注入ngRoute
4.最后配置路由表
一個(gè)簡單的ngRoute結(jié)構(gòu)示例：
b.ngRoute包含以下部分：
1．服務(wù)$routeProvider用來定義一個(gè)路由表分井，即地址欄與視圖模板的映射
2．服務(wù)$routeParams保存了地址欄中的參數(shù)
3．服務(wù)$location用來實(shí)現(xiàn)用于獲取當(dāng)前url以及改變當(dāng)前的url,并且存入歷史記錄
4．服務(wù)$route完成路由匹配车猬，并且提供路由相關(guān)的屬性訪問及事件，如訪問當(dāng)前路由對(duì)應(yīng)的controller
5．指令ngView用來在主視圖中指定加載子視圖的區(qū)域
$routeProvider提供了定義路由表的服務(wù)杂抽，它有兩個(gè)核心方法诈唬，when(path,route)和otherwise(params)。
5.編碼實(shí)戰(zhàn)
6.擴(kuò)展思考
a.ngRoute的缺點(diǎn)缩麸？
1.頁面中只能有一個(gè)ng-view視圖
2.不支持嵌套铸磅，子模板中不能設(shè)置ng-view
b.其它實(shí)現(xiàn)angular路由的方式？
一般我們都用ui-router杭朱，作為angular的第三方插件阅仔，彌補(bǔ)了ngRoute上述的兩個(gè)缺陷，其結(jié)構(gòu)和ngRoute相識(shí)弧械，但也有很多細(xì)節(jié)上的不同：
1.$when—>$state路由狀態(tài)配置的時(shí)候
2.$routeParams —> $stateParams帶參數(shù)的時(shí)候的配置
3.$routeProvider —> $stateProvider依賴注入的模塊
4.'ng-view' —> 'ui-view'頁面中綁定的指令
5.href="#/a" —> ui-sref="a"
ui-router根據(jù)狀態(tài)(state)配置模板八酒，邏輯更清晰。
Demo如下：
7.參考文獻(xiàn)
參考一：angularJS學(xué)習(xí)小結(jié)——ngRoute（路由機(jī)制）
參考二：菜鳥教程-AngularJS路由
