先看两篇博客:​​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 });
}
}
]
});

​​

当模板开始解析之前触发 $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();

        })

​​

我们在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"] == "500999"){
// 清空用户本地token存储的信息,如果
$rootScope.user = {token:""};
// 全局事件,方便其他view获取该事件,并给以相应的提示或处理
$rootScope.$emit("userIntercepted","notLogin",response);
}
// 如果是登录超时
if(data["errorCode"] == "500998"){
$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);