记一次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
原地址 好吧,我承认自己很懒,时间又不够用. 翻译的几个文章都是虎头蛇尾,但我保证这次肯定不太监. 关键的单词不翻译,实在觉得翻译成汉语很别扭,括号里是参考翻译. 有问题和建议尽管提出来,我会改进完善 ...
随机推荐
- python之多线程 queue 实践 筛选有效url
0.目录 1.背景 某号码卡申请页面通过省份+城市切换归属地,每次返回10个号码. 通过 Fiddler 抓包确认 url 关键参数规律: provinceCode 两位数字 cityCode 三位数 ...
- ReactNative调试技术-真机调试
在我开始用ReactNative开始开发APP时,为了能够获取程序运行中的信息,就需要搭建调试环境. 手机调试方式有两类,一类是模拟器方式,另一类是真机模式. 我测试了一下相应的模拟器: 如果用谷歌管 ...
- python全栈开发day60-django_app ORM 完整登录案例
day60 内容回顾: 1. HTTP协议: 1.请求(浏览器发给服务端的消息——request) 请求方法 URL 协议版本\r\n k1:v1\r\n k2:v2\r\n \r\n 请求体 —— ...
- CAS和ABA问题
一.引言 ...
- bash: cannot create temp file for here-document: Read-only file system
文件系统被强制只读问题,第一眼看到百度了一下,说可能磁盘坏了.卧槽我都吓懵了系统盘坏了,闹着玩呢,然后接着查资料,排查 mount 查看所有挂载,发现根目录的挂载权限是ro只读. /dev/sda2 ...
- Codeforces 316E3 线段树 + 斐波那切数列 (看题解)
最关键的一点就是 f[ 0 ] * a[ 0 ] + f[ 1 ] * a[ 1 ] + ... + f[ n - 1] * a[ n - 1] f[ 1 ] * a[ 0 ] + f[ 2 ] * ...
- 使用element-ui的常见问题
给组件绑定的事件为什么无法触发? 在 Vue 2.0 中,为自定义组件绑定原生事件必须使用 .native 修饰符: <my-component @click.native="han ...
- if-else(职责链)
var a=1,b=2,c=3,d=4; const rules = [ { match: function (a, b, c,d) { return a;}, action: function (a ...
- P2279 [HNOI2003]消防局的设立 贪心or树形dp
题目描述 2020年,人类在火星上建立了一个庞大的基地群,总共有n个基地.起初为了节约材料,人类只修建了n-1条道路来连接这些基地,并且每两个基地都能够通过道路到达,所以所有的基地形成了一个巨大的树状 ...
- JavaWeb 之Ubuntu intelliJ 新建maven项目及配置tomcat
一. 破解安装 intelliJ 下载网址:https://www.jetbrains.com/idea/ 破解激活:https://www.cnblogs.com/tanrong/p/7309343 ...