记一次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
原地址 好吧,我承认自己很懒,时间又不够用. 翻译的几个文章都是虎头蛇尾,但我保证这次肯定不太监. 关键的单词不翻译,实在觉得翻译成汉语很别扭,括号里是参考翻译. 有问题和建议尽管提出来,我会改进完善 ...
随机推荐
- MVC区域area
1.当项目业务比较庞大,可以通过区域来分拆. 2.添加区域时,默认会生成一下文件. 3.Application_Start()必需含有AreaRegistration.RegisterAllAreas ...
- 查询Linux系统中glibc的版本
编写一个简单的程序 #include <stdio.h> int main() { printf("Hello world\n"); ; } 编译 gcc test.c ...
- pkusc2018数学题
题解: 还是很水的 复制个题面过来 好吧我不会复制 https://www.cnblogs.com/skylee03/p/9127130.html 题目链接 第一题是个傻逼题 初中数学题随便凑凑 ( ...
- [转]java位运算(1)
http://blog.csdn.net/xiaochunyong/article/details/7748713 Java提供的位运算符有:左移( << ).右移( >> ) ...
- python各个包的用途
python中的多个包的用途 1.Numpy Numpy提供了两种基本的对象:ndarray和ufunc.ndarray是存储单一数据类型的多维数组,而ufunc是能够对数组进行处理的函数. N维数组 ...
- Python面向对象2-类和构造方法
#!/usr/bin/env python # -*- coding:utf-8 -*- # 作者:Presley # 邮箱:1209989516@qq.com # 时间:2018-08-05 # O ...
- 2018牛客网暑假ACM多校训练赛(第三场)G Coloring Tree 计数,bfs
原文链接https://www.cnblogs.com/zhouzhendong/p/NowCoder-2018-Summer-Round3-G.html 题目传送门 - 2018牛客多校赛第三场 G ...
- BZOJ4319 cerc2008 Suffix reconstruction 字符串 SA
原文链接http://www.cnblogs.com/zhouzhendong/p/9016336.html 题目传送门 - BZOJ4319 题意 给出一个$1,2,\cdots,n$的排列,第$i ...
- 20165235 学习基础和C语言基础调查
20165235 学习基础和C语言基础调查 首先第一个问题:你有什么技能比大多人(超过90%以上)更好?感觉很难回答这种问题,其实我对很多东西挺感兴趣的,如果非要拿出一种比较突出的技能的话我感觉就是象 ...
- 9、Qt Project之简单的数据库接口
简单的数据库接口 Step1:首先完成整个UI界面的额设计: <?xml version="1.0" encoding="UTF-8"?> < ...