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不起作用(细节决定成败)的更多相关文章

  1. AngularJS 路由

    AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web应用(single page web application,SPA). 通常 ...

  2. angularJs路由的使用

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. angularjs路由

    需要引入angular.js,angular-ui-router.min.js <ul> <li><a href="#home">首页</ ...

  4. AngularJS常用指令

    一.指令 1.ng-app 定义应用程序的根元素 <div ng-app="app"></div> var app = angular.module('ap ...

  5. AngularJS 深入理解 $scope

    $scope 的使用贯穿整个 AngularJS App 应用,它与数据模型相关联,同时也是表达式执行的上下文.有了$scope 就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更 ...

  6. AngularJS in Action读书笔记1——扫平一揽子专业术语

    前(fei)言(hua): 数月前,以一个盲人摸象的姿态看了一些关于AngularJS的视频书籍,留下了我个人的一点或许是指点迷津或许是误人子弟的读后感.自以为已经达到熟悉ng的程度,但是因为刚入公司 ...

  7. 《AngularJS》--指令的相互调用

    转载自http://blog.csdn.net/zhoukun1008/article/details/51296692 人们喜欢AngularJS,因为他很有特色,其中他的指令和双向数据绑定很吸引着 ...

  8. AngularJS 深入理解 $scope 转载▼

    AngularJS 深入理解 $scope 转载▼ (2015-04-07 14:09:50)     $scope 的使用贯穿整个 AngularJS App 应用,它与数据模型相关联,同时也是表达 ...

  9. 结合使用AngularJS和Django

    原地址 好吧,我承认自己很懒,时间又不够用. 翻译的几个文章都是虎头蛇尾,但我保证这次肯定不太监. 关键的单词不翻译,实在觉得翻译成汉语很别扭,括号里是参考翻译. 有问题和建议尽管提出来,我会改进完善 ...

随机推荐

  1. [转] jQuery的deferred对象详解

    jQuery的开发速度很快,几乎每半年一个大版本,每两个月一个小版本. 每个版本都会引入一些新功能.今天我想介绍的,就是从jQuery 1.5.0版本开始引入的一个新功能----deferred对象. ...

  2. [转] 理解Object.defineProperty的作用

    对象是由多个名/值对组成的无序的集合.对象中每个属性对应任意类型的值.定义对象可以使用构造函数或字面量的形式: var obj = new Object; //obj = {} obj.name = ...

  3. [转]maven全局配置文件settings.xml详解

    概要 settings.xml有什么用? 如果在Eclipse中使用过Maven插件,想必会有这个经验:配置settings.xml文件的路径. Paste_Image.png settings.xm ...

  4. spark批量写写数据到Hbase中(bulkload方式)

    1:为什么大批量数据集写入Hbase中,需要使用bulkload BulkLoad不会写WAL,也不会产生flush以及split. 如果我们大量调用PUT接口插入数据,可能会导致大量的GC操作.除了 ...

  5. squid,nginx,lighttpd反向代理的区别

    反向代理从传输上分可以分为2种: 1:同步模式(apache-mod_proxy和squid) 2:异步模式(lighttpd 和 nginx) 在nginx的文档说明中,提到了异步传输模式并提到它可 ...

  6. OSPF协议之详细图解

    OSPF是一种基于SPF算法的链路状态路由协议. 上图是在一个OSPF区域里面添入一台新的路由器的时候,OSPF协议的工作过程,如果你能非常详细的叙述出这张图的话,基本上OSPF协议的工作过程你就掌握 ...

  7. 配置maven从自己的私服下载jar包nexus、maven私服仓库(二)

    配置maven项目从私服下载jar包 pom文件配置从maven私服下载jar包 settings文件配置从maven私服下载jar包 (方便自己关键字搜索,所以多写了几行o(* ̄︶ ̄*)o) 今天自 ...

  8. 004 使用SpringMVC开发restful API二--编写用户详情

    一:编写用户详情服务 1.任务 @PathVariable隐射url片段到java方法的参数 在url声明中使用正则表达式 @JsonView控制json输出内容 二:@PathVariable 1. ...

  9. HDU 5113

    HDU 5113类似四色定理的什么东西,大体就是dfs了,不过有两个坑点,这个题的逼格瞬间就上去了1.剪枝很神奇,任何一种颜色都不能超过剩下总格子数的一半,想想确实显然但是比赛的时候没有想到:2.测评 ...

  10. [ 中危 ] dp意见反馈处存储型XSS

    XSS平台架设攻击代码,有很多,如我是在http://xss.fbisb.com上架设的. 在 xxx.dianping.com系统意见反馈处插入xss代码提交,而后等待后台管理员点击,可打到其COO ...