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"] == "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);