ui-router是angular的一個插件针史，因為angular前面幾個版本自帶的原生ng-router不能很好的滿足開發(fā)需求帆赢，所以在實現(xiàn)angular單頁面嵌套的時候，都是使用ui-router河咽。本文是的內(nèi)容關(guān)于angular ui-router實現(xiàn)過程拱绑，內(nèi)含demo以及代碼地址，需要的朋友可以過來參考下九妈，喜歡的可以點波贊反砌，或者關(guān)注一下本人，ui-router的實現(xiàn)過程并不復(fù)雜萌朱，希望通過本文大家能夠?qū)W會ui-router的使用方法宴树。
1.angular文件，2.ui-router插件,3.路由js頁面
注意：angular文件必須在ui-router前面晶疼，因為ui-router是依賴angular的插件酒贬。
這幾個文件是最基本的頁面，如果是一個完整的angular單頁面項目的話翠霍，index,html是這幅樣子：
在單頁面中锭吨，不管你從哪個視圖查看網(wǎng)頁代碼，都是這樣子寒匙，第一次看的都醉了零如！
3.app.js
app.js聲明了AngularJS模塊和路由配置。當(dāng)頁面加載的時候我們會在index.html中顯示PageTab.html的內(nèi)容锄弱。具體代碼如下考蕾，每一個關(guān)鍵的地方都有相應(yīng)的注釋注釋注釋：
var myApp = angular.module("myApp", ["ui.router"]);
//這里叫做App模塊，這將告訴HTML頁面這是一個AngularJS作用的頁面棵癣，并把ui-router注入AngularJS主模塊辕翰，它的內(nèi)容由AngularJS引擎來解釋。
myApp.config(function ($stateProvider, $urlRouterProvider) {
//這一行聲明了把 $stateProvider 和 $urlRouteProvider 路由引擎作為函數(shù)參數(shù)傳入狈谊，這樣我們就可以為這個應(yīng)用程序配置路由了.
$urlRouterProvider.when("", "/PageTab");
//如果沒有路由引擎能匹配當(dāng)前的導(dǎo)航狀態(tài)喜命，默認(rèn)將路徑路由至 PageTab.html, 那它就像switch case語句中的default選項.就是一個默認(rèn)的視圖選項
$stateProvider
//這一行定義了會在main.html頁面第一個顯示出來的狀態(tài)（就是進(jìn)入頁面先加載的html），作為頁面被加載好以后第一個被使用的路由.
.state("PageTab", {//導(dǎo)航用的名字
url: "/PageTab",//#+標(biāo)識符河劝，這里就是url地址欄上面的標(biāo)識符壁榕，通過標(biāo)識符，進(jìn)入不同的html頁面
templateUrl: "PageTab.html"http://這里是html的路徑赎瞎，這是跟標(biāo)識符相對應(yīng)的html頁面
})
.state("PageTab.Page1", {//引號里面代表Page1是PageTab的子頁面牌里，用.隔開
url:"/Page1",
templateUrl: "Page-1.html"
})
.state("PageTab.Page2", {//需要跳轉(zhuǎn)頁面的時候，就是用這雙引號里面的地址
url:"/Page2",
templateUrl: "Page-2.html"
})
.state("PageTab.Page3", {
url:"/Page3",
templateUrl: "Page3.html"
});
});
現(xiàn)在已經(jīng)成功把a(bǔ)ppjs實現(xiàn)出來，然后需要在html里面定義視圖牡辽，以及視圖跳轉(zhuǎn)鏈接
4.html定義視圖
現(xiàn)在要把我們寫好的html視圖頁面在頁面中展示出來喳篇，我們來看看index.html里面的代碼：
在ui-view=""的雙引號里面，ui-view展示的頁面是根據(jù)app.js設(shè)置的url對應(yīng)的html來展示的态辛。
嵌套頁面跳轉(zhuǎn)：
導(dǎo)航里面的名字必須是“父頁面的名字.子頁面的名字”
比如：
.state("PageTab", {//這里是名字
url: "/PageTab",
templateUrl: "PageTab.html"
})
.state("PageTab.Page1", {//意思是PageTab視圖下面的Page1視圖
url:"/Page1",
templateUrl: "Page-1.html"
})
在html里面麸澜，用ui-sref進(jìn)行跳轉(zhuǎn)
demo代碼栗子：
下面這幾個按鈕是在主頁面下面再嵌套一層的頁面
作者：OBKoro1
鏈接：http://www.reibang.com/p/cd5de7f478ac
來源：簡書
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)奏黑，非商業(yè)轉(zhuǎn)載請注明出處炊邦。
