angular-ui-router常用功能笔记

针对 angularjs-ui-router（v0.3.1）

创建ng应用

引入ui-router依赖，以数组形式引入，每个依赖逗号隔开

var app = angular.module('app',[
'ui.router'
]);

1.路由配置：

配置如下，login状态对应#/login路由，缺省#；同理#/login对应login状态，可设置引入模版页面和模版页面引入的控制器

app.config(['$logProvider','$stateProvider','$urlRouterProvider',function($logProvider,$stateProvider,$urlRouterProvider){
	
	//路由配置			
	$stateProvider
		//首页
		.state('index',{
			url: '/',data:{
				pageTitle:'首页'
			},controller: "indexController",templateUrl: 'tpl/login.html'
		})
		//登录
		.state('login',{
			url: '/login',data:{
				pageTitle:'登录'
			},controller: "loginController",templateUrl: 'tpl/login.html'
		})
		

	
}]);

2.路径过滤和路径拦截：

app.config(['$logProvider',$urlRouterProvider){
	
	//错误路由跳转 
	$urlRouterProvider
		.when('/c?id','/contacts/:id')
		.when('/accounts','/accounts/my_account')
		.when('/companyAccounts','/companyAccounts/my_account')
		.otherwise('/');

	
}]);

3.初始化设置：

把$state服务挂在在根作用域下某个自定义属性，供页面使用

app.run(
	['$rootScope','loginService','$state','$urlRouter','$window',function($rootScope,loginService,$state,$urlRouter,$window) {
			
			
			$rootScope.state=$state;
			
		}
	]
);

$state服务：常用方法属性介绍

$state.reload() 刷新当前状态，会重新载入引用的页面模版

$state.go("statename") 跳转到指定状态（路由跳转）

$state.includes("statename") 当前路由对应状态与statename相同放回true

模版页面使用：

<a name="state.includes('login')">登录</a>

路径出在#/login对应状态为login，name=true“”

4.根作用域事件：

注释提示就是执行的时间，回调会返回各个对象：

事件对象，当前状态，当前状态参数，上一个状态，上一个状态参数

app.run(
	['$rootScope',$window) {
			
			$rootScope.state=$state;
			//路由变化事件处理     开始
			$rootScope.$on('$stateChangeStart',function(event,toState,toParams,fromState,fromParams){
				
			});
			//路由变化事件处理     成功
			$rootScope.$on('$stateChangeSuccess',fromParams){

					

			});
			//路由变化事件处理     失败
			$rootScope.$on('$stateNotFound',unfoundState,fromParams){

			});
			//路由变化事件处理     错误
			$rootScope.$on('$stateChangeError',fromParams,error){

			});
		}
	]
);

返回上一个状态功能实现：

可封装在一个方法内，供使用

//路由变化事件处理     成功
			$rootScope.$on('$stateChangeSuccess',fromParams){

					$rootScope.prevIoUsstate_name = fromState.name;  
                	$rootScope.prevIoUsstate_params = fromParams;  
						
						
									$state.go($rootScope.prevIoUsstate_name,$rootScope.prevIoUsstate_params);  
								


			});

5.提供者对象服务

$urlRouterProvider：

提供路径处理

$stateProvider：

提供状态处理

6.指令 ui-sref

解析为 href="#/login" 看app.config配置

<a ui-sref="login" >登录</a>

6.指令 ui-sref-active

当路径路由分析出的状态和ui-sref设置相同，添加active类名

<a ui-sref="login" ui-sref-active="active">登录</a>