深究AngularJS之ui-router詳解
1.配置使用ui-router
1.1導(dǎo)入js文件
需要注意的是：必須導(dǎo)入angular.min.js這個(gè)文件，且angular.min.js必須導(dǎo)入在angular-ui-router.min.js前面。
<script type="text/javascript" src="JS/angular.min.js"></script> <script type="text/javascript" src="JS/angular-ui-router.min.js"></script>
1.2注入angular模塊
var app = angular.module('myApp', ['ui.router']);
注入的名字“ui.router”，可在angular-ui-router.min.js里找到，如下圖：
1.3定義視圖
ui-view替代的是ngroute路由的ng-view。
<div ui-view></div>
1.4配置路由狀態(tài)
app.config(["$stateProvider", function ($stateProvider){
$stateProvider
.state("home", { //導(dǎo)航用的名字，如<a ui-sref="login">login</a>里的login
url: '/', //訪問路徑
template:'<div>模板內(nèi)容......</div>'
})
}]);
2.簡單示例
<html>
<head>
<title>ui-router</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!-- 導(dǎo)入JS -->
<script type="text/javascript" src="JS/angular.min.js"></script>
<script type="text/javascript" src="JS/angular-ui-router.min.js"></script>
</head>
<body >
<div ng-app="myApp">
<div ui-view></div> <!-- 視圖 -->
</div>
</body>
<script type="text/javascript">
//定義模板，并注入ui-router
var app = angular.module('myApp', ['ui.router']);
//對服務(wù)進(jìn)行參數(shù)初始化，這里配stateProvider服務(wù)的視圖控制
app.config(["$stateProvider", function ($stateProvider) {
$stateProvider
.state("home", {
url: '/',
template:'<div>模板內(nèi)容......</div>'
})
}]);
</script>
</html>
3.嵌套路由的實(shí)現(xiàn)
通過url參數(shù)的設(shè)置實(shí)現(xiàn)路由的嵌套（父路由與子路由通過”.“連接就形成了子路由）。嵌套路由可實(shí)現(xiàn)多層次的ui-view。
<body >
<div ng-app="myApp" >
<a ui-sref="parent">點(diǎn)我顯示父view內(nèi)容</a>
<a ui-sref="parent.child">點(diǎn)我顯示父view與子view內(nèi)容</a>
<div ui-view></div> <!-- 父View -->
</div>
</body>
<script type="text/javascript">
var app = angular.module('myApp', ['ui.router']);
app.config(["$stateProvider", function ($stateProvider) {
$stateProvider
.state("parent", {//父路由
url: '/parent',
template:'<div>parent'
+'<div ui-view><div>'// 子View
+'</div>'
})
.state("parent.child", {//子路由
url: '/child',
template:'<div>child</div>'
})
}]);
</script>
上面的是相對路徑方式：
‘parent'將匹配…./index.html#/parent； ‘parent.child'將匹配…./index.html#/parent/child。
若改成絕對路徑方式，則需要在子url里加上^:
.state("parent.child", {
url: '^/child',
template:'<div>child</div>'
})
此時(shí)，'parent'將匹配…./index.html#/parent； ‘parent.child'將匹配…./index.html#/child。
4. 通過views實(shí)現(xiàn)多視圖
多個(gè)示圖時(shí)，使用views屬性。該屬性里包含了哪些ui-view，則對應(yīng)的template或templateUrl里的內(nèi)容就會填充該ui-view。
同一個(gè)狀態(tài)下有多個(gè)視圖示例：
<body >
<div ng-app="myApp" >
<a ui-sref="index">點(diǎn)我顯示index內(nèi)容</a>
<div ui-view="header"></div>
<div ui-view="nav"></div>
<div ui-view="body"></div>
</div>
</body>
<script type="text/javascript">
var app = angular.module('myApp', ['ui.router']);
app.config(["$stateProvider", function ($stateProvider) {
$stateProvider
.state("index", {
url: '/index',
views:{
'header':{template:"<div>頭部內(nèi)容</div>"},
'nav':{template:"<div>菜單內(nèi)容</div>"},
'body':{template:"<div>展示內(nèi)容</div>"}
}
})
}]);
</script>
5.ui-view的定位
@的作用 是用來絕對定位view，即說明該ui-view屬于哪個(gè)模板。如：'header@index'表示名為header的view屬于index模板。絕對和相對路徑的效果一樣，請看如下代碼：
<body >
<div ng-app="myApp" >
<a ui-sref="index">show index</a>
<a ui-sref="index.content1">content111111</a>
<a ui-sref="index.content2">content222222</a>
<div ui-view="index"><div>
</div>
</body>
<script type="text/javascript">
var app = angular.module('myApp', ['ui.router']);
app.config(["$stateProvider", function ($stateProvider) {
$stateProvider
.state("index", {
url: '/index',
views:{
'index':{template:"<div><div ui-view='header'></div> <div ui-view='nav'></div> <div ui-view='body'></div> </div>"},
//這里必須要絕對定位
'header@index':{template:"<div>頭部內(nèi)容header</div>"},
'nav@index':{template:"<div>菜單內(nèi)容nav</div>"},
'body@index':{template:"<div>展示內(nèi)容contents</div>"}
}
})
//絕對定位
.state("index.content1", {
url: '/content1',
views:{
'body@index':{template:"<div>content11111111111111111</div>"}
//'body@index'表時(shí)名為body的view使用index模板
}
})
//相對定位：該狀態(tài)的里的名為body的ui-view為相對路徑下的（即沒有說明具體是哪個(gè)模板下的）
.state("index.content2", {
url: '/content2',
views:{
'body':{template:"<div>content2222222222222222222</div>"}//
}
})
}]);
</script>
由上面代碼可知，相對定位不能找到的ui-view需要用@來絕對定位。
6.URL路由傳參（通過$stateParams服務(wù)獲取參數(shù)）
有url: '/index/:id',和url: '/index/{id}',兩種形式傳參
<body >
<div ng-app="myApp" >
<a ui-sref="index({id:30})">show index</a>
<a ui-sref="test({username:'peter'})">show test</a>
<div ui-view></div>
</div>
</body>
<script type="text/javascript">
var app = angular.module('myApp', ['ui.router']);
app.config(["$stateProvider", function ($stateProvider) {
$stateProvider
.state("home", {
url: '/',
template:"<div>homePage</div>"
})
.state("index", {
url: '/index/:id',
template:"<div>indexcontent</div>",
controller:function($stateParams){
alert($stateParams.id)
}
})
.state("test", {
url: '/test/:username',
template:"<div>testContent</div>",
controller:function($stateParams){
alert($stateParams.username)
}
})
}]);
</script>
7.Resolve（預(yù)載入）
參考資料：
使用預(yù)載入功能，開發(fā)者可以預(yù)先載入一系列依賴或者數(shù)據(jù)，然后注入到控制器中。在ngRoute中resolve選項(xiàng)可以允許開發(fā)者在路由到達(dá)前載入數(shù)據(jù)保證（promises）。在使用這個(gè)選項(xiàng)時(shí)比使用angular-route有更大的自由度。
預(yù)載入選項(xiàng)需要一個(gè)對象，這個(gè)對象的key即要注入到控制器的依賴，這個(gè)對象的value為需要被載入的factory服務(wù)。
如果傳入的時(shí)字符串，angular-route會試圖匹配已經(jīng)注冊的服務(wù)。如果傳入的是函數(shù)，該函數(shù)將會被注入，并且該函數(shù)返回的值便是控制器的依賴之一。如果該函數(shù)返回一個(gè)數(shù)據(jù)保證（promise），這個(gè)數(shù)據(jù)保證將在控制器被實(shí)例化前被預(yù)先載入并且數(shù)據(jù)會被注入到控制器中。
<body >
<div ng-app="myApp" >
<a ui-sref="index">show index</a>
<div ui-view></div>
</div>
</body>
<script type="text/javascript">
var app = angular.module('myApp', ['ui.router']);
app.config(["$stateProvider", function ($stateProvider) {
$stateProvider
.state("home", {
url: '/',
template:"<div>homePage</div>"
})
.state("index", {
url: '/index/{id}',
template:"<div>indexcontent</div>",
resolve: {
//這個(gè)函數(shù)的值會被直接返回，因?yàn)樗皇菙?shù)據(jù)保證
user: function() {
return {
name: "peter",
email: "audiogroup@qq.com"
}
},
//這個(gè)函數(shù)為數(shù)據(jù)保證, 因此它將在控制器被實(shí)例化之前載入。
detail: function($http) {
return $http({
method: 'JSONP',
url: '/current_details'
});
},
//前一個(gè)數(shù)據(jù)保證也可作為依賴注入到其他數(shù)據(jù)保證中?。ㄟ@個(gè)非常實(shí)用）
myId: function($http, detail) {
$http({
method: 'GET',
url: 'http://facebook.com/api/current_user',
params: {
email: currentDetails.data.emails[0]
}
})
}
},
controller:function(user,detail,myId$scope){
alert(user.name)
alert(user.email)
console.log(detail)
}
})
}]);
</script>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
AngularJS 打開新的標(biāo)簽頁實(shí)現(xiàn)代碼
本文通過實(shí)例代碼給大家介紹了angularJS 打開新的標(biāo)簽頁方法，代碼簡單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-09-09
這篇文章主要介紹了詳解Angular模板引用變量及其作用域，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
AngularJS中的$parse服務(wù)與$eval服務(wù)用法實(shí)例
這篇文章主要介紹了AngularJS中的$parse服務(wù)與$eval服務(wù)用法,結(jié)合實(shí)例形式分析了AngularJS中$parse服務(wù)與$eval服務(wù)的功能、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2023-05-05
本篇文章主要介紹了詳解使用angular的HttpClient搭配rxjs ，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
本文給大家分享在使用angular上傳圖片的功能，在開發(fā)過程中遇到很多問題，最終都解決了，今天小編給大家介紹下Angular下H5上傳圖片的方法（可多張上傳),非常不錯(cuò)，需要的朋友參考下2017-01-01
angular和BootStrap3實(shí)現(xiàn)購物車功能
這篇文章主要為大家詳細(xì)介紹了angular和BootStrap3實(shí)現(xiàn)購物車功能的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
AngularJS誕生于2009年，由Misko Hevery 等人創(chuàng)建，后為Google所收購。這篇文章主要帶著大家理解Angular數(shù)據(jù)雙向綁定，感興趣的小伙伴們可以參考一下2016-01-01
Angularjs使用ng-repeat中$even和$odd屬性的注意事項(xiàng)
無可否認(rèn)angularjs的崛起成為前端很大的福利，最近接到項(xiàng)目，框架便選中了angularjs。angularjs最吸引人的地方就是數(shù)據(jù)的雙向綁定和指令了，這篇文章主要介紹了Angularjs中使用ng-repeat的$even和$odd屬性的注意事項(xiàng),需要的朋友可以參考下2016-12-12
這篇文章主要為大家介紹了Angular應(yīng)用懶加載模塊配置管理詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
angularJs中跳轉(zhuǎn)到指定的錨點(diǎn)實(shí)例($anchorScroll)
今天小編就為大家分享一篇angularJs中跳轉(zhuǎn)到指定的錨點(diǎn)實(shí)例($anchorScroll)，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08