记一次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
原地址 好吧,我承认自己很懒,时间又不够用. 翻译的几个文章都是虎头蛇尾,但我保证这次肯定不太监. 关键的单词不翻译,实在觉得翻译成汉语很别扭,括号里是参考翻译. 有问题和建议尽管提出来,我会改进完善 ...
随机推荐
- webpack学习笔记--区分环境
为什么需要区分环境 在开发网页的时候,一般都会有多套运行环境,例如: 在开发过程中方便开发调试的环境. 发布到线上给用户使用的运行环境. 这两套不同的环境虽然都是由同一套源代码编译而来,但是代码内容却 ...
- .NET Core在安装(VS2015)与部署
.NET Core开发环境搭建 使用VS2015开发.NET Core项目,环境的搭建可以参考官网,大致安装步骤如下: 1.首先你得装个vs2015 并且保证已经升级至 update3及以上,下载链接 ...
- A - Exposition CodeForces - 6E
题目链接:https://vjudge.net/contest/202699#problem/A 题意 给一个n个元素的序列,从中挑出最长的子序列,要求子序列中元素差的最大值不超过k.问有几个最长子序 ...
- alpha冲刺6/10
目录 摘要 团队部分 个人部分 摘要 队名:小白吃 组长博客:hjj 作业博客:感恩节~ 团队部分 后敬甲(组长) 过去两天完成了哪些任务 文字描述 设计了拍照界面和图片上传界面 沟通了前端进度 接下 ...
- ip访问网站和localhost访问网站中top使用
对于相对定位,使用margin-top不用简单使用top. top在localhost中能正常显示,在ip访问时会出现多余空白. margin-top不管是localhost中还是ip中都能正常显示.
- HDU1693 Eat the Trees 插头dp
原文链接http://www.cnblogs.com/zhouzhendong/p/8433484.html 题目传送门 - HDU1693 题意概括 多回路经过所有格子的方案数. 做法 最基础的插头 ...
- liunx系统虚拟机下安装tomcat9以及访问tomcat案例
在liunx系统虚拟机下安装tomcat9 首先下载好压缩包 liunx系统环境的安装包 将其解压到虚拟机自己创建的目录下 解压命令 tar -zxvf 文件名 解压好如图所示 然后修改配置文 ...
- IDEA链接mySql问题 : You have an error in your SQL syntax : 'OPTION SQL_SELECT_LIMIT=1000' (or 'OPTION SQL_SELECT_LIMIT=DEFAULT')
IDEA控制台错误信息: check the manual that corresponds to your MySQL server version for the right Code: 1064 ...
- logging 日志
1. 四步: import logging #初始化 logger = logging.getLogger("log_name") #设置级别 logger.setLevel(lo ...
- python爬虫积累(一)--------selenium+python+PhantomJS的使用(转)
阅读目录 一.Selenium介绍 二.爬虫为什么要用selenium? 三.PhantomJS介绍 四.PhantomJS安装 五.操作实战 六.在此推荐虫师博客的学习资料 selenium + p ...