路由的事件

来自ling
跳转至: 导航搜索

事件这个词在前端出现的频率真是高,根本拦不住,哪哪都是.$route服务在路由过程中的每个阶段都会触发不同的事件,可以为这些不同的路由事件设置监听器并做出响应.

一共有4个事件用来监听路由的状态变化: $routeStartChange, $routeChangeSuccess, $routeChangeError, $routeUpdate.

其中最常用的是前两个,这里稍微解释一下.

(1) $routeStartChange

看名字就能猜出来它表示的是路由开始变化的事件,在浏览器地址栏发生变化之前AngularJS会先广播一下这个事件.路由会开始加载所有需要的依赖,模板和resolve部分的内容也会注入.

angular.module('myApp', [])
  .run(['$rootScope', '$location', function($rootScope, $location){
    $rootScope.$on('$routeChangeStart', function(evt, next, current){
    console.log('route begin change');
  }); 
}]);

解释一下事件的参数,evt是事件对象,可以从中读取到一些route的信息.next是将要导航到的路由,current是当前的URL.

可以看见在这个时期我们可以做很多有用的事,因为此时仅仅是路由开始变化,对应的内容都还没来得及发生改变.这里我们可进行permission的校验,loading画面的加载,对应路由信息的读取等等.

(2) $routeChangeSuccess

在路由的所有依赖都被注入加载后,AngularJS会对外广播路由跳转成功的事件.

angular.module('myApp', [])
  .run(['$rootScope', '$location', function($rootScope, $location) {
    $rootScope.$on('$routeChangeSuccess', function(evt, current, previous) {
      console.log('route have already changed');
    }); 
}])