angular-ui-router常用功能笔记

为什么80%的码农都做不了架构师？>>>   

针对 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', '$stateProvider','$urlRouterProvider', function($logProvider, $stateProvider,$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', 'loginService',  '$state',  '$urlRouter','$window',
		function($rootScope, loginService, $state, $urlRouter, $window) {
			
			$rootScope.state=$state;
			//路由变化事件处理     开始
			$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){
				
			});
			//路由变化事件处理     成功
			$rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){

					

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

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

			});
		}
	]
);

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

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

//路由变化事件处理     成功
			$rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, 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>

 

转载于:https://my.oschina.net/tbd/blog/849352