angularjs路由监听，uirouter感知路由变化，解决uirouter路由监听不生效的问题

 壹 ❀ 引

angularjs除了惊为天人的双向数据绑定外，路由也是出彩的一笔，通过路由配置，我们能在不发起页面跳转的情况下，对当前页内容进行整体更新，angularjs提供了ngRoute模块用于路由配置，除此之外，angularUI也提供了uirouter模块用于解决路由问题，本文将从ngRoute与uirouter两个模块出发，分别介绍两者的路由监听方法。

 贰 ❀ ngRoute路由监听

ngRoute提供了路由事件用于监听路由过程中的每个阶段，可以为这些不同的路由事件设置监听器并在路由发生变化时做出响应。先上一个完整的例子，需要引入angularjs与angular-route.js：

 

 

 

1.$routeChangeStart

AngularJS在路由变化之前会执行$routeChangeStart事件。在这一步中，路由服务会开始加载路由变化所需要的所有依赖，并且模板和resolve中的promise也会被resolve。

angular.module('myApp', [])
    .run(['$rootScope', '$location', function ($rootScope, $location) {
        $rootScope.$on('$routeChangeStart', function (evt, current, previous) {
            // do something
            // evt 原始的AngularJS evt对象
            // current 用户当前所处的路由
            // current 上一个路由（如果当前是第一个路由，则为undefined）。
        });
    }]);

2. $routeChangeSuccess

AngularJS会在路由的依赖被加载后执行$routeChangeSuccess事件。

angular.module('myApp', [])
    .run(['$rootScope', '$location', function ($rootScope, $location) {
        $rootScope.$on('$routeChangeSuccess', function (evt, current, previous) {
            // do something
            // evt 原始的AngularJS evt对象
            // current 用户当前所处的路由
            // previous 上一个路由（如果当前是第一个路由，则为undefined）。
        });
    }]);

3. $routeChangeError

AngularJS会在任何一个promise被拒绝或者失败时执行$routeChangeError事件。

angular.module('myApp', [])
    .run(function ($rootScope, $location) {
        $rootScope.$on('$routeChangeError', function (current, previous, rejection) {
            // do something
            // current 当前路由的信息
            // previous 上一个路由的信息
            // rejection 被拒绝的promise的错误信息
        });
    });

4. $routeUpdate

AngularJS在reloadOnSearch属性被设置为false的情况下， 重新使用某个控制器的实例时，会执行$routeUpdate事件。

 叁 ❀ uirouter路由监听

uirouter是由angualrUI提供的三方路由模块，因此也需要额外下载，并在主模块中注入路由模块，需要引入angualrjs，angular-ui-router.js与stateEvents.js，先看一个完整的例子：

 

 

若$stateChangeStart之类的路由事件没触发，还是前面说的，得引入stateEvents.js文件，此文件在下载angular-ui-router.js时会同时包含。