记一次AngularJs 路由 $stateChangeStart不起作用(细节决定成败)
var app= angular
.module('app', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngSanitize',
'ngTouch',
'ui.router',
'ui.bootstrap',
'datatablesDirectives',
'ngTable',
'ncy-angular-breadcrumb',
'ngFileUpload',
'MessageCenterModule',
'angular-loading-bar',
'toggle-switch'
])
.run(
['$rootScope', '$state', '$stateParams', 'AppSession',
function ($rootScope, $state, $stateParams, AppSession) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
$rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
$state.previous = fromState;
$state.previousParams = fromParams;
if (toState.data.requiredLogin && !AppSession.getLogin() && !toParams.tokenAndName) {
$state.go('login', {}, {
reload: true
});
event.preventDefault();
}
});
}
]
).config(['cfpLoadingBarProvider', function (cfpLoadingBarProvider) {
cfpLoadingBarProvider.includeSpinner = true;
}])
.config(
['$stateProvider', '$urlRouterProvider', '$breadcrumbProvider', '$httpProvider',
function ($stateProvider, $urlRouterProvider, $breadcrumbProvider, $httpProvider) {
$httpProvider.interceptors.push('TokenInterceptor'); $urlRouterProvider.otherwise('/');
$stateProvider
.state('login', {
url: '/',
templateUrl: 'views/login/login.html',
controller: 'loginCtrl',
data: {
requiredLogin: false
}
})
.state('main', {
url: '/main',
abstract: true,
templateUrl: 'main.html',
data: {
requiredLogin: true
},
ncyBreadcrumb: {
label: '主页'
}
})
.state('main.myWork', {
url: '/myWork',
templateUrl: 'views/myWork/myWorkList.html',
controller: 'myWorkController',
ncyBreadcrumb: {
label: '我的工作台',
parent: 'main'
},
data: {
requiredLogin: true
}
}).......
状态改变事件
$scope.$on('$stateChangeStart',
function(event, toState, toParams, fromState, fromParams), {
// 如果需要阻止事件的完成
event
.preventDefault();
});
参数:
event:该事件的基本信息
toState:我们可以得到当前路由的信息,比如路由名称,url,视图的控制器,模板路径等等
toParams:
我们可以得到当前路由的参数
fromState:
我们可以得到上一个路由的信息,比如路由名称,url,视图的控制器,模板路径等等
fromParams:
我们可以得到上一个路由的参数
可以触发的事件包括:
stateChangeStart
当状态改变开始的时候被触发
$stateChangeSuccess
当状态改变成功后被触发
$stateChangeError
当状态改变遇到错误时被触发,错误通常是目标无法载入,需要预载入的数据无法被载入等。
按照上面的写法:用户在没有登录的情况下,跳转到路由 main.myWork 时,应该会再跳转到登录页面。但是发现跳转。
几经周折,发现是自己太过大意。没有引入
'ui.router.state.events'模块,index.html 页面 也没有引入响应的 stateEvents.js。
bower.json 里加上如下内容:
"overrides": {
"angular-ui-router": {
"main": [
"./release/angular-ui-router.js",
"./release/stateEvents.js"
]
}
}
记一次AngularJs 路由 $stateChangeStart不起作用(细节决定成败)的更多相关文章
- AngularJS 路由
AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web应用(single page web application,SPA). 通常 ...
- angularJs路由的使用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- angularjs路由
需要引入angular.js,angular-ui-router.min.js <ul> <li><a href="#home">首页</ ...
- AngularJS常用指令
一.指令 1.ng-app 定义应用程序的根元素 <div ng-app="app"></div> var app = angular.module('ap ...
- AngularJS 深入理解 $scope
$scope 的使用贯穿整个 AngularJS App 应用,它与数据模型相关联,同时也是表达式执行的上下文.有了$scope 就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更 ...
- AngularJS in Action读书笔记1——扫平一揽子专业术语
前(fei)言(hua): 数月前,以一个盲人摸象的姿态看了一些关于AngularJS的视频书籍,留下了我个人的一点或许是指点迷津或许是误人子弟的读后感.自以为已经达到熟悉ng的程度,但是因为刚入公司 ...
- 《AngularJS》--指令的相互调用
转载自http://blog.csdn.net/zhoukun1008/article/details/51296692 人们喜欢AngularJS,因为他很有特色,其中他的指令和双向数据绑定很吸引着 ...
- AngularJS 深入理解 $scope 转载▼
AngularJS 深入理解 $scope 转载▼ (2015-04-07 14:09:50) $scope 的使用贯穿整个 AngularJS App 应用,它与数据模型相关联,同时也是表达 ...
- 结合使用AngularJS和Django
原地址 好吧,我承认自己很懒,时间又不够用. 翻译的几个文章都是虎头蛇尾,但我保证这次肯定不太监. 关键的单词不翻译,实在觉得翻译成汉语很别扭,括号里是参考翻译. 有问题和建议尽管提出来,我会改进完善 ...
随机推荐
- 一脸懵逼学习Hive(数据仓库基础构架)
Hive是什么?其体系结构简介*Hive的安装与管理*HiveQL数据类型,表以及表的操作*HiveQL查询数据***Hive的Java客户端** Hive的自定义函数UDF* 1:什么是Hive(一 ...
- java中String和StringBuffer的区别
前言 String和StringBuffer本质上都是修饰字符串的只是含义不同 StringBuffer叫做字符串缓冲区 首先看下string类的例子 public class Work1 { pub ...
- 创建自己的composer包
需求:在项目中输入 p($arr); 将会格式化输出 一.在GitHub上创建仓库 1.1这个仓库必须包含composer.json文件,内容如下. { "name": " ...
- ibatis 多种传参方式
1,在公司项目yuda遇到的传入in语句,如果直接拼接in语句:in (....),sqlmap中使用#...#输出是不行的. 为需要使用: 第三种:in后面的数据确定,使用string传入 ...
- 008 在大数据中,关于native包的编译步骤
一.问题的由来: 二.解决问题的方法(所有的操作在root下完成): 1.前期需要的环境,下面的已经在伪分布式中配置好,不再重复 配置好jdk 配置好hadoop 2.上传还需要包 apache-ma ...
- OpenJ_Bailian 2814 拨钟问题
总时间限制: 1000ms 内存限制: 65536kB 描述 有9个时钟,排成一个3*3的矩阵. |-------| |-------| |-------|| | | | | | ||---O | ...
- 关于忘记Jenkins管理员密码的解决办法
一.admin密码未更改情况 1.进入\Jenkins\secrets目录,打开initialAdminPassword文件,复制密码: 2.访问Jenkins页面,输入管理员admin,及刚才的密码 ...
- POJ 3662 Telephone Lines【二分答案+最短路】||【双端队列BFS】
<题目链接> 题目大意: 在一个节点标号为1~n的无向图中,求出一条1~n的路径,使得路径上的第K+1条边的边权最小. 解题分析:直接考虑情况比较多,所以我们采用二分答案,先二分枚举第K+ ...
- log4j平稳升级到log4j2
一.前言 公司中的项目虽然已经用了很多的新技术了,但是日志的底层框架还是log4j,个人还是不喜欢用这个的.最近项目再生产环境上由于log4j引起了一场血案,于是决定升级到log4j2. 二.现象 虽 ...
- Linux 查看文件被那个进程写数据
目录 背景 步骤 获取写文件的进程号 文件被那个进程使用,写数据不是用lsof可以找出来吗,但现实情况是lsof没找出来T_T 背景 centos7 在某一段时间监控报警磁盘使用率达99%,由于监控属 ...