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补搭