大家好，我是IT修真院武漢分院第10期學(xué)員余佳貝，一枚正直善良的web程序員。
今天給大家分享一下，修真院官網(wǎng)js任務(wù)6，深度思考中的知識(shí)點(diǎn)——如何使用ui-router？
一.背景介紹
我們都知道angular js經(jīng)常用于開(kāi)發(fā)客戶端的單頁(yè)面應(yīng)用 所以要在一個(gè)頁(yè)面呈現(xiàn)不同的視圖,路由起到了至關(guān)重要的作用 angular.js 為我們封裝好了一個(gè)路由工具 ngRoute ,它是一種靠url改變?nèi)デ袚Q視圖. angularUI 也為我們封裝了一個(gè)獨(dú)立的路由模塊 ui-router ,它是一種靠狀態(tài) state 來(lái)切換視圖. 在學(xué)習(xí)ui-router之前可以先了解一下 angulajs中路由和原生路由ngroute相關(guān)的概念
二.知識(shí)剖析
2.1什么是路由
一般情況下，我們?cè)L問(wèn)網(wǎng)頁(yè)的時(shí)候，是通過(guò)url地址。比如我們通常訪問(wèn)一個(gè)網(wǎng)頁(yè):https://www.baidu.com/index/first.html?
但是在angular中是這樣的?
https://www.baidu.com/index/index.html#/first https://www.baidu.com/index/index.html#/second
當(dāng)我們點(diǎn)擊以上任一一個(gè)鏈接時(shí)，向服務(wù)器請(qǐng)求的地址都是https://www.baidu.com/index/index.html ，而＃號(hào)之后的內(nèi)容在向服務(wù)器端請(qǐng)求時(shí)會(huì)被瀏覽器忽略掉， 所以我們?cè)诳蛻舳藢?shí)現(xiàn)＃號(hào)后面的功能實(shí)現(xiàn)即可。簡(jiǎn)單來(lái)說(shuō)，路由通過(guò)＃＋標(biāo)記幫助我們區(qū)分不同邏輯頁(yè)面，并將其綁定到對(duì)應(yīng)的控制器上。
2.2通過(guò)angularjs中的路由模塊，實(shí)現(xiàn)ng-route的步驟?
（1）載入包含ng-route的JS文件 (2）包含了 ngRoute 模塊作為主應(yīng)用模塊的依賴模塊 （3）使用指令ng-view （4）我們?cè)趆tml中定義鏈接，可以實(shí)現(xiàn)一個(gè)單頁(yè)應(yīng)用
var app=angular.module('app',['ngRoute']);
app.config(['$routeProvider',function($routeProvider) {
$routeProvider.
when('/login',{
templateUrl:'login.html'}).
when('/list',{
templateUrl:'list.html'}).
AngularJS 路由也可以通過(guò)不同的模板來(lái)實(shí)現(xiàn)。$routeProvider.when 函數(shù)的第一個(gè)參數(shù)是 URL 或者 URL 正則規(guī)則，第二個(gè)參數(shù)為路由配置對(duì)象。
路由配置對(duì)象語(yǔ)法規(guī)則如下：
$routeProvider.when(url, {template:string,//用于指定視圖模板，也可以是一個(gè)方法 該方法必須返回html模板內(nèi)容
templateUrl:string,//視圖模板路徑
controller:string,function或 array,//控制器名稱或控制器構(gòu)造方法
controllerAs:string,//通過(guò)控制器標(biāo)識(shí)符名稱引用控制器
resolve: object類型,//用于指定注入控制器中的內(nèi)容});
ui-router是一個(gè)可以用來(lái)替換AngularJS原生路由的插件，它最大的特點(diǎn)就是支持嵌套路由
那么，什么是嵌套路由呢？
原生路由剛才也給大家說(shuō)了 angular的視圖是通過(guò)ng-view這個(gè)指令進(jìn)行加載的 然后通過(guò)控制器來(lái)加載相應(yīng)的視圖模板 如果說(shuō)我們有一個(gè)網(wǎng)頁(yè)，左邊是菜單欄，右邊是各個(gè)菜單所對(duì)應(yīng)的視圖。 那么，如果按照這樣的定義，點(diǎn)擊每個(gè)菜單項(xiàng)，豈不得刷新整個(gè)網(wǎng)頁(yè)？ 而我們想要的只是右邊的視圖刷新。所以，這就要用到嵌套路由了。
三.常見(jiàn)問(wèn)題
如何實(shí)現(xiàn)嵌套路由？
四.解決方案
ui-route子路由可以繼承父路由,也就是說(shuō) state 設(shè)置可以嵌套,通過(guò)名稱中的.(點(diǎn))來(lái)區(qū)分層次.
五.編碼實(shí)戰(zhàn)
六.拓展思考
在 Angularjs 中 ui-sref 和 $state.go 如何傳遞參數(shù)？
1.ui-sref、$state.go 的區(qū)別
ui-sref一般使用在a鏈接中
$state.go一般使用在控制器中
這兩者的本質(zhì)上是一樣的 ui-sref源碼里面最后調(diào)用的還是$state.go的方法
2.如何傳遞參數(shù)
首先，要在目標(biāo)頁(yè)面定義接受的參數(shù)：
$stateProvider.state("page1",{
url:"/page2",
templateUrl:"page2.html",
controller:"p2",
params:{name:null}//在目標(biāo)頁(yè)面定義接收的參數(shù)
});
在目標(biāo)頁(yè)面的controller里注入$stateParams，然后$stateParams.參數(shù)名獲取
app.controller("p2",function($scope,$state,$stateParams){
console.log($stateParams.name);//接收參數(shù)?
});
$state.go("page1.page2",{name:'rose'});//傳參
<a ui-sref="page1.page3({name:'jack'})</a>
七.參考文獻(xiàn)
八.更多討論
1.如何激活狀態(tài)？
有三種方式來(lái)激活特定的狀態(tài)
使用ui-sref綁定的連接
直接導(dǎo)航到與狀態(tài)關(guān)聯(lián)的url
使用$state.go()方法
2.多個(gè)頁(yè)面可能使用相同的html模板,我們是要同樣的代碼寫N遍嗎？
（1）在html中給ui-view添加名字
（2）在路由配置中添加配置信息
3.我們經(jīng)常會(huì)需要用到路由去傳參,例如編輯一條信息,獲取單個(gè)信息,應(yīng)該如何去做呢?
angular-ui-router提供了一個(gè)$stateParams的service,可直接獲取.在controller中的使用示例? ?有人肯定會(huì)疑問(wèn),$stateParams從何而來(lái),在上面我們給angular.module中已經(jīng)將其初始化,掛在到$rootScope.
