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', '$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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_34242819/article/details/91569900

智能推荐

盲图像超分辨率重建 ( CVPR,2022) (Pytorch)(附代码)_盲超分辨率重建-程序员宅基地

文章浏览阅读1.1w次,点赞33次,收藏141次。基于噪声和核函数的精细退化盲图像超分辨率重建,这篇测评文章用心写了一个下午,个人觉得作为一个初学者入门教程,再合适不过了,敬请查阅_盲超分辨率重建

Executors创建的4种线程池的使用-程序员宅基地

文章浏览阅读74次。为什么80%的码农都做不了架构师?>>> ..._private executor 建立的线程池

android 使用shell模拟触屏_Android随笔之——用shell脚本模拟用户按键、触摸操作...-程序员宅基地

文章浏览阅读720次。之前写过两篇关于Android中模拟用户操作的博客(其实用一篇是转载的),现在就来讲讲用shell脚本来模拟用户按键操作。本次的目标是用shell脚本打开微信并在其搜索框中搜索相关内容。本文的模拟功能主要是用adb的input命令来实现,如果你adb的环境变量配置正确的话,在cmd中输入adb shell input就可以看见input的用法了。usage: input ...input te..._androd shell操作ui

Java之集合常见的笔试题_空题hashmap<integer,string> hh=new hashmap<integer, -程序员宅基地

文章浏览阅读961次,点赞2次,收藏4次。一、请说明Map接口和Collection接口的区别简答如下: 1)都是集合类的接口,但是Collection是存储一组数据的,比如Set,List,Queue这些接口都是继承Collection的。而Map是按键值对存储的,有key和value,关注点在key的使用 2)Collection中存储了一组对象,而Map存储关键字/值对。 在Map对象中,每一个关键字最多有一个关联的值。 ..._空题hashmap hh=new hashmap();hh.put(202

NFS实现系统启动时延迟挂载-程序员宅基地

文章浏览阅读1.2k次。nfs客户端1. vi /etc/fstab 加入一下选项_netdev10.10.10.1:/vol1/fs1 /data nfs defaults,_netdev 0 02. service netfs start; chkconfig netfs onthat's it.Now your mount boot process should look somethin..._fstab 延迟挂载

一文读懂微服务编排利器—Zeebe-程序员宅基地

文章浏览阅读1.8k次,点赞3次,收藏18次。导语 | 微服务架构的一大核心是把大的复杂的业务系统拆分成高内聚的微服务,每个服务负责相对独立的逻辑。服务拆分的好处无需赘述,但是要实现业务价值,不是看单个服务的能力,而是要协调所有服务保..._zeebe 失败任务重复创建job新实例

随便推点

Oracle11g数据库详细安装步骤_oracle database 11g软件没有典型安装-程序员宅基地

文章浏览阅读1.9k次,点赞4次,收藏28次。一,Oracle数据库安装包下载1.从Oracle官网下载所需的数据库安装包【下载需要注册登录Oracle账户】http://www.oracle.com/technetwork/database/enterprise-edition/downloads/index.html2.此处有下载好的Oracle Database 11g Release 2 百度云网盘 提取码:ze2z;【此..._oracle database 11g软件没有典型安装

docker、docker-compose环境变量以及传参_docker-compose env参数传递-程序员宅基地

文章浏览阅读5.6k次。docker中传参可用ARG接收参数#构建镜像docker build -f /manage/src/main/docker/Dockerfile -t manage:1.0 --build-arg server_name= --build-arg server_version=1.0 /manage/targetdockerFile# 该镜像需要依赖的基础镜像FROM java:8#传参ARG server_nameARG server_version#环境变量ENV jar_docker-compose env参数传递

Linq 基本语法_linq语法介绍-程序员宅基地

文章浏览阅读1.2k次。以下都是转载内容1.简单的linq语法 //1 var ss = from r in db.Am_recProScheme select r; //2 var ss1 = db.Am_recProScheme; //3 _linq语法介绍

springcloudgateway+oauth2实现权限控制_springcloudoauth2权限控制-程序员宅基地

文章浏览阅读1.2w次,点赞7次,收藏34次。文章目录鉴权服务基础配置鉴权配置网关服务基础配置网关过滤器配置权限校验过滤器配置接口调试前端适配鉴权服务OAuth 2.0 的四种方式OAuth2实现分析基础配置新建house-oauth模块,依赖oauth2。 <dependencies> <dependency> <groupId>com.babyjuan</groupId> <artifactId>house-common</art_springcloudoauth2权限控制

广州大学c语言期末考试题,广州大学C语言程序的设计期末考试卷含答案(2)-程序员宅基地

文章浏览阅读243次。广州大学C语言程序的设计期末考试卷含答案(2) (9页) 本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦!14.9 积分. . . . .院、系领导审批并签名 A 卷参考答案广州大学 2009-2010 学年第 1 学期考试卷课程 程序设计 1 考试形式(闭卷,考试)学院 数学与信息 系 专业 信安,计 班级 学号 姓名_ 题次一二三四五六七八九十总分评卷人..._广州大学c语言题库

画出lightGBM的特征重要性并排序_lightgbm特征重要性排序-程序员宅基地

文章浏览阅读4.2k次。df = pd.DataFrame()df['feature name'] = data_df.drop(["label"], axis=1).columns #data_df为特征数据集df['importance'] = clf.feature_importance()df.sort_values(by='importance',inplace=True, ascending=False)df2 = df.head(50)df2.plot.barh(x = 'feature name',._lightgbm特征重要性排序