探讨AngularJs中ui.route的简单应用
html页面代码
<bodyng-app="myApp"> <divui-view></div> <divui-view="login"></div> <divui-view="enroll"></div> </body>
需要引用的ui.router.js文件
<scriptsrc="angular-ui-router.js"></script>
app.js
将UI-Router作为web应用的依赖，注入到主程序：
url：url选项将会为该应用的状态指定一个URL基于用户浏览该应用所在的状态(地址显示链接)。这样当在浏览该应用的时候便能实现深度链接的效果。
varmyApp=angular.module('myApp',['ui.router']);
myApp.config(['$stateProvider','$urlRouterProvider',routeConfig]);
functionrouteConfig($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><emid="__mceDel"><emid="__mceDel"><emid="__mceDel"><emid="__mceDel"><emid="__mceDel">templateUrl:'competition-enroll.html',<br></em></em></em></em></em><emid="__mceDel"><emid="__mceDel"><emid="__mceDel"><emid="__mceDel"><emid="__mceDel"><emid="__mceDel">controller:'enrollController'<br></em></em></em></em></em></em><emid="__mceDel"><emid="__mceDel"><emid="__mceDel"><emid="__mceDel"><emid="__mceDel"><emid="__mceDel"><emid="__mceDel">}<br></em></em></em></em></em></em></em><emid="__mceDel"><emid="__mceDel"><emid="__mceDel"><emid="__mceDel"><emid="__mceDel"><emid="__mceDel"><emid="__mceDel"><emid="__mceDel">}<br></em></em></em></em></em></em></em></em><emid="__mceDel"><emid="__mceDel"><emid="__mceDel"><emid="__mceDel"><emid="__mceDel"><emid="__mceDel"><emid="__mceDel"><emid="__mceDel"><emid="__mceDel">})<br></em></em></em></em></em></em></em></em></em><emid="__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的简单应用，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！