快捷導(dǎo)航

探討AngularJs中ui.route的簡(jiǎn)單應(yīng)用

更新時(shí)間：2016年11月16日 16:42:15 作者：會(huì)捕鼠的魚

這篇文章主要介紹了AngularJs中ui.route的簡(jiǎn)單應(yīng)用,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

html頁面代碼

<body ng-app="myApp">
　　<div ui-view></div>
　　<div ui-view="login"></div>
　　<div ui-view="enroll"></div>
</body>

需要引用的ui.router.js文件

<script src="angular-ui-router.js"></script>

app.js

將UI-Router作為web應(yīng)用的依賴，注入到主程序：

url：url選項(xiàng)將會(huì)為該應(yīng)用的狀態(tài)指定一個(gè)URL基于用戶瀏覽該應(yīng)用所在的狀態(tài)(地址顯示鏈接)。這樣當(dāng)在瀏覽該應(yīng)用的時(shí)候便能實(shí)現(xiàn)深度鏈接的效果。

var myApp = angular.module('myApp', ['ui.router']);
myApp.config(['$stateProvider', '$urlRouterProvider', routeConfig]);
function routeConfig($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('');
$stateProvider.state('competition', {
url: '/competition',
templateUrl: '/competition.html',
controller: 'competitionController'
}).state('competition.detail', {
url: '/competition-detail',
templateUrl: '/competition-detail.html',
controller: 'competitionDetailController'
}).state.('competition.enrollForm',{
url: '/competition.enrollForm',
templateUrl: 'competition-enrollFrom.html',
controller: 'enrollFromController'
}).state.('competition.comments',{
url: '/competition-comments',
templateUrl: 'competition-comments.html',
controller: 'commentsController'
}).state('competition.login',{
url: '/competition-login',
views: {
'login@': {
templateUrl: 'competition-login.html',
controller: 'loginController'
}
}
}).state('competition.enroll',{<br> 　　url: '/competition-enroll',<br> views: {<br> 　　　　'enroll@': {<br><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"> 　　　　　templateUrl: 'competition-enroll.html',<br></em></em></em></em></em><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel">　　　　　　controller: 'enrollController'<br></em></em></em></em></em></em><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"> }<br></em></em></em></em></em></em></em><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"> }<br></em></em></em></em></em></em></em></em><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"> })<br></em></em></em></em></em></em></em></em></em><em id="__mceDel">}</em>

需要注意的是：ui.router使用的是$stateProvider,ngRoute使用的是$routeProvider。

$state.go

$state.go(to, [,toParams],[,options])

形參to是string類型，必須，使用"^"或"."表示相對(duì)路徑；

形參toParams可空，類型是對(duì)象；

形參options可空，類型是對(duì)象，字段包括：location為bool類型默認(rèn)true,inherit為bool類型默認(rèn)true, relative為對(duì)象默認(rèn)

$state.$current,notify為bool類型默認(rèn)為true, reload為bool類型默認(rèn)為false

$state.go('photos.detail')

$state.go('^')到上一級(jí),比如從photo.detail到photo

$state.go('^.list')到相鄰state,比如從photo.detail到photo.list

$state.go('^.detail.comment')到孫子級(jí)state，比如從photo.detail到photo.detial.comment

以上所述是小編給大家介紹的AngularJs中ui.route的簡(jiǎn)單應(yīng)用，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！