探讨AngularJs中ui.route的简单应用

作者: 子修丸
来源: 51数据库
2021-08-22

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应用的依赖，注入到主程序：

url：url选项将会为该应用的状态指定一个url基于用户浏览该应用所在的状态(地址显示链接)。这样当在浏览该应用的时候便能实现深度链接的效果。

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类型，必须，使用"^"或"."表示相对路径；

形参toparams可空，类型是对象；

形参options可空，类型是对象，字段包括：location为bool类型默认true,inherit为bool类型默认true, relative为对象默认

$state.$current,notify为bool类型默认为true, reload为bool类型默认为false

$state.go('photos.detail')

$state.go('^')到上一级,比如从photo.detail到photo

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

$state.go('^.detail.comment')到孙子级state，比如从photo.detail到photo.detial.comment

以上所述是小编给大家介绍的angularjs中ui.route的简单应用，希望对大家有所帮助