angular的路由和监听路由的变化和用户超时的监听
先看两篇博客:http://camnpr.com/javascript/1652.html
这一篇博客是重点中的重点: http://www.tuicool.com/articles/zeiy6ff
我们使用ui.router 这个的话:分为以下几个步骤:
1.包含模块:
angular.module('uiRouter', ['ui.router']);
2.方便获得当前状态的方法,绑到根作用域
app.run(['$rootScope', '$state', '$stateParams',
function($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
}
]);
3.路由重定向 $urlRouterProvider
app.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider
// 错误的路由重定向
.when('/c?id', '/contacts/:id')
.when('/user/:id', '/contacts/:id')
.otherwise('/');
}
]);
4. 状态配置 注意.state可以链式使用。 这个也在config里边。
$stateProvider.
state('about', {
url: '/about',
template: '<h1>Welcome to UI-Router Demo</h1>', // optional below
templateProvider: ['$timeout',
function($timeout) {
return $timeout(function() {
return '<p class="lead">UI-Router Resource</p>' +
'<p>The second line</p>'
}, 100);
}
], templateUrl: 'about.html', templateUrl: function() {
return 'about.html';
}, controller: 'UIRouterCtrl', // below is a state controller picked from UI-Router official sample
controller: ['$scope', '$state', 'contacts', 'utils',
function ($scope, $state, contacts, utils) {
$scope.contacts = contacts; $scope.goToRandom = function () {
var randId = utils.newRandomKey($scope.contacts, 'id', $state.params.contactId); $state.go('contacts.details', { contactId: randId });
}
}
]
});
5.监听路由的变化 https://my.oschina.net/jack088/blog/479466
当模板开始解析之前触发 $rootScope.$on('$stateChangeStart' 这个事件
当模板解析完成后触发 $rootScope.$on('$stateChangeSuccess'
$stateChangeError- 当模板解析过程中发生错误时触发 $rootScope.$on('$stateChangeError
$viewContentLoading- 当视图开始加载,DOM渲染完成之前触发,该事件将在$scope
链上广播此事件。
$viewContentLoaded- 当视图加载完成,DOM渲染完成之后触发,视图所在的$scope
发出该事件
app.run(['$rootScope', '$location' ,'$cookieStore', '$state', 'CacheManager', function($rootScope, $location, $cookieStore, $state,CacheManager){
//监听路由事件 $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){ if(toState.name=="tabs.post"&&fromState.name=="tabs.orderList"){ //$location.path();//获取路由地址 $location.path('/tabs/home');//设置路由地址 } }) }]);
使用event.preventDefault()可以阻止模板解析的发生
$rootScope.$on('$stateChangeStart',
function(event, toState, toParams, fromState, fromParams){
event.preventDefault();
})
6.用户超时 转载:http://m.blog.csdn.net/article/details?id=51454314
我们在model里面增加一个用户拦截器,在rensponseError中判断错误码,抛出事件让Contoller或view来处理
app.factory('UserInterceptor', ["$q","$rootScope",function ($q,$rootScope) {
return {
request:function(config){
config.headers["TOKEN"] = $rootScope.user.token;
return config;
},
responseError: function (response) {
var data = response.data;
// 判断错误码,如果是未登录
if(data["errorCode"] == ""){
// 清空用户本地token存储的信息,如果
$rootScope.user = {token:""};
// 全局事件,方便其他view获取该事件,并给以相应的提示或处理
$rootScope.$emit("userIntercepted","notLogin",response);
}
// 如果是登录超时
if(data["errorCode"] == ""){
$rootScope.$emit("userIntercepted","sessionOut",response);
}
return $q.reject(response);
}
};
}]);
别忘了要注册拦截器到angularjs的config中哦
app.config(function ($httpProvider) {
$httpProvider.interceptors.push('UserInterceptor');
});
最后在controller中处理错误事件
$rootScope.$on('userIntercepted',function(errorType){
// 跳转到登录界面,这里我记录了一个from,这样可以在登录后自动跳转到未登录之前的那个界面
$state.go("login",{from:$state.current.name,w:errorType});
});
最后还可以在loginController中做更多的细节处理
// 如果用户已经登录了,则立即跳转到一个默认主页上去,无需再登录
if($rootScope.user.token){
$state.go($rootScope.defaultPage);
return;
}
另外在登录成功回调后还可以跳转到上一次界面,也就是上面记录的from
var from = $stateParams["from"];
$state.go(from && from != "login" ? from : $rootScope.defaultPage);
angular的路由和监听路由的变化和用户超时的监听的更多相关文章
- Angular 监听路由变化
var app = angular.module('Mywind',['ui.router']) //Angular 监听路由变化 function run($ionicPlatform, $loca ...
- angular 全局 监听路由变化
app.run(['$rootScope', '$location', function($rootScope, $location) { /* 监听路由的状态变化 */ $rootScope.$on ...
- Angular 监听路由变化事件
摘要: $stateChangeStart- 当模板开始解析之前触发 $rootScope.$on('$stateChangeStart', function(event, toState, toPa ...
- AngularJS监听路由变化
使用AngularJS时,当路由发生改变时,我们需要做某些处理,此时可以监听路由事件,常用的是$routeStartChange, $routeChangeSuccess.完整例子如下: <!D ...
- 【转载】AngularJS监听路由变化
一.Angular 路由状态发生改变时可以通过' $stateChangeStart '.' $stateChangeSuccess '.' $stateChangeError '监听,通过注入'$l ...
- vue 在.vue文件里监听路由
监听路由 watch $route vue项目中的App.vue 文件 <template> <div id="app"> <!--includ ...
- react如何监听路由url变化
"componentWillReceiveProps" "shouldComponentUpdate" "componentWillUpdate&qu ...
- vue中监听路由参数变化
今天遇到一个这样的业务场景:在同一个路由下,只改变路由后面的参数值, 比如在这个页面 /aaa?id=1 ,在这个页面中点击一个按钮后 跳转到 /aaa?id=2 , 但从“/aaa?id=1”到“ ...
- vue中监听路由参数的变化
在vue项目中,假使我们在同一个路由下,只是改变路由后面的参数值,期望达到数据的更新. mounted: () =>{ this.id = this.$route.query.id; this. ...
随机推荐
- C /C ++中结构体的定义
c语言中结构体的定义: struct 结构体名{ 成员列表: ..... }结构体变量: 7.1.1 结构体类型变量的定义结构体类型变量的定义与其它类型的变量的定义是一样的,但由于结构体类型需要针对问 ...
- Common Subsequence 最大公共子序列问题
Problem Description A subsequence of a given sequence is the given sequence with some elements (poss ...
- 170801、VM性能调优
最近因项目存在内存泄漏,故进行大规模的JVM性能调优 , 现把经验做一记录. 一.JVM内存模型及垃圾收集算法 1.根据Java虚拟机规范,JVM将内存划分为: New(年轻代) Tenured(年老 ...
- 玩转Javascript this用法
在web项目中Javascript是一门必须要掌握的动态语言,基于Javascript的框架大多离不开不了最基础的Javascript的用法和原理.本文主要是总结一下Javascript中那万恶的th ...
- 奇怪的Visual Studio 2013停止响应问题
昨天开始遭遇这个问题,今天再次遭遇. 疑似问题发生在写代码的窗口中复制/粘贴时(有待进一步确认触发条件),突然停止响应,出现下面的对话框: 对话框中的文字为: Waiting for a requir ...
- 朴素贝叶斯算法的python实现 -- 机器学习实战
import numpy as np import re #词表到向量的转换函数 def loadDataSet(): postingList = [['my', 'dog', 'has', 'fle ...
- backend community-driven web framework
kataras/iris: The fastest backend community-driven web framework on (THIS) Earth. HTTP/2, MVC and mo ...
- No module named pip.req
https://stackoverflow.com/questions/25192794/no-module-named-pip-req#
- Crossed ladders---poj2507(二分+简单几何)
题目链接:http://poj.org/problem?id=2507 题意就是给你x y c求出?的距离: h1 = sqrt(x*x-d*d); h2 = sqrt(y*y-d*d); (h1 ...
- 利用Flash XMLSocket实现”服务器推”技术
利用Flash XML Socket实现”服务器推”技术的基础是:1.Flash提供了XMLSocket类,服务器利用Socket向Flash发送数据:2.JavaScript和Flash的紧密结合, ...