angular-ui-router常用功能笔记

大佬教程收集整理的这篇文章主要介绍了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>

大佬总结

以上是大佬教程为你收集整理的angular-ui-router常用功能笔记全部内容，希望文章能够帮你解决angular-ui-router常用功能笔记所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。