Angular的ui.router路由配置 1、基本使用: angular.module('dnsPage', ['ui.router','sfService']) .config(function ($stateProvider, $urlRouterProvider,vishnuProvider) { $stateProvider .state("dns.insideDNS", {//嵌套路由,路由里
1、基本使用:
angular.module('dnsPage', ['ui.router','sfService'])
.config(function ($stateProvider, $urlRouterProvider,vishnuProvider) {
$stateProvider
.state("dns.insideDNS", {//嵌套路由,路由里面有ui-view
url: "/insideDNS?url&ctrl",//参数传递,一个参数可以'/:url'
templateUrl:function ($stateParams) {
return vishnuProvider.rootPath+$stateParams.url+".html";
},
controllerProvider: function($stateParams) {
return $stateParams.ctrl;
}
});
.state("dns.withoutDNS",{
url:"/withoutDNS?url&ctrl",
views:{
'':{//ui-view:一个页面多个路由
templateUrl:function($stateParams) {
console.log($stateParams);
return vishnuProvider.rootPath+"/html/withoutDNS.html";
},
},
'content':{//ui-view="content"
templateUrl:function($stateParams) {
console.log($stateParams);
return vishnuProvider.rootPath+"/html/withoutDNS.html";
},
},
}
});
//$urlRouterProvider.otherwise('/dns/insideDNS?url=%2Fhtml%2FinsideDNS&ctrl=insideDnsController');
$urlRouterProvider.otherwise(function($injector, $location) {
//console.log($location,$injector,123);上下相同相同
$location.url('/dns/insideDNS?url=%2Fhtml%2FinsideDNS&ctrl=insideDnsController');
});
})
//界面使用
内网解析
互联网解析
//JS控制路由跳转,注入$state
$state.go('dns.insideDNS',{url:'/html/insideDNS',ctrl:'insideDnsController'});
2、常用参数:
$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
3、事件监听(1.0以前,可在run中配置):
$rootScope.$on('$stateChangeStart',
function(event, toState, toParams, fromState, fromParams){
if(toState.data.required && !$rootScope.user){
event.preventDefault();
$state.go('content.login');
return;
}
});
$rootScope.$on('$stateNotFound',
function(event, unfoundState, fromState, fromParams){
event.preventDefault();
$state.go('content.notfound');
});
$rootScope.$on('$stateChangeSuccess',
function(event, toState, toParams, fromState, fromParams){
$rootScope.accessLog.push({
user: $rootScope.user,
from: fromState.name,
to: toState.name,
date: new Date()
});
4、最新1.0以后版本的路由事件监听:
.run(function ($transitions,$state) {
var previousState;
var previousStateParameters;
$transitions.onSuccess({}, function (transition) {
if(transition.to().name==='dns'){
$state.go('dns.insideDNS',{url:'/html/insideDNS',ctrl:'insideDnsController'});
}
previousState = transition.from().name;
previousStateParameters = transition.params('from');
});
$transitions.back = function () {
console.log(12345);
$state.go(previousState, previousStateParameters, { reload: true });
}
})
5、路由状态的另外判断方法
VM搭建
VM补搭
