angularjs路由監聽，uirouter感知路由變化，解決uirouter路由監聽不生效的問題

時間 2019-11-10

標籤 angularjs 路由監聽 uirouter 感知變化解決生效問題欄目 AngularJS 简体版

原文原文鏈接

壹 ❀ 引html

angularjs除了驚爲天人的雙向數據綁定外，路由也是出彩的一筆，經過路由配置，咱們能在不發起頁面跳轉的狀況下，對當前頁內容進行總體更新，angularjs提供了ngRoute模塊用於路由配置，除此以外，angularUI也提供了uirouter模塊用於解決路由問題，本文將從ngRoute與uirouter兩個模塊出發，分別介紹二者的路由監聽方法。node

貳 ❀ ngRoute路由監聽angularjs

ngRoute提供了路由事件用於監聽路由過程當中的每一個階段，能夠爲這些不一樣的路由事件設置監聽器並在路由發生變化時作出響應。先上一個完整的例子，須要引入angularjs與angular-route.js：promise

<!DOCTYPE html>
<html lang="en" ng-app="myApp">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body ng-controller="myCtrl as vm">
    <ul>
        <li><a href="index.html#!/index">index</a></li>
        <li><a href="index.html#!/login">login</a></li>
        <li><a href="index.html#!/dashboard">dashboard</a></li>
    </ul>
    <div ng-view></div>
</body>
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-route/angular-route.js"></script>
<script src="js/app.js"></script>

</html>

View Code

angular.module('myApp', ['ngRoute'])
    .controller('myCtrl', function ($scope) {
        let vm = this
    })
    .config(['$routeProvider', function ($routeProvider) {
        // 在這裏定義路由
        $routeProvider
            .when('/index', {
                template: '<div><h2>Route1</h2></div>',
            })
            .when('/login', {
                template: '<div><h2>Route2</h2></div>',
            })
            .when('/dashboard', {
                template: '<div><h2>Route3</h2></div>',
            })
            .otherwise({
                redirectTo: '/index'
            });
    }])
    .run(['$rootScope', '$location', function ($rootScope, $location) {
        $rootScope.$on('$routeChangeSuccess', function (evt, current, previous) {
            console.log(evt, current, previous);
            console.log(1);
        });
    }]);

View Code

1.$routeChangeStartapp

AngularJS在路由變化以前會執行$routeChangeStart事件。在這一步中，路由服務會開始加載路由變化所須要的全部依賴，而且模板和resolve中的promise也會被resolve。ide

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. $routeChangeSuccessui

AngularJS會在路由的依賴被加載後執行$routeChangeSuccess事件。this

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. $routeChangeErrorurl

AngularJS會在任何一個promise被拒絕或者失敗時執行$routeChangeError事件。

angular.module('myApp', [])
    .run(function ($rootScope, $location) {
        $rootScope.$on('$routeChangeError', function (current, previous, rejection) {
            // do something
            // current 當前路由的信息
            // previous 上一個路由的信息
            // rejection 被拒絕的promise的錯誤信息
        });
    });

4. $routeUpdatespa

AngularJS在reloadOnSearch屬性被設置爲false的狀況下，從新使用某個控制器的實例時，會執行$routeUpdate事件。

叄 ❀ uirouter路由監聽

uirouter是由angualrUI提供的三方路由模塊，所以也須要額外下載，並在主模塊中注入路由模塊，須要引入angualrjs，angular-ui-router.js與stateEvents.js，先看一個完整的例子：

<!DOCTYPE html>
<html lang="en" ng-app="myApp">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body ng-controller="myCtrl as vm">

    <ul>
        <li><a ui-sref="index">index</a></li>
        <li><a ui-sref="login">login</a></li>
        <li><a ui-sref="dashboard">dashboard</a></li>
    </ul>
    <div ui-view></div>
</body>
</body>
<script src="modules/angular.js"></script>
<script src="modules/@uirouter/angularjs/release/angular-ui-router.js"></script>
<script src="modules/@uirouter/angularjs/release/stateEvents.js"></script>
<script src="demo.js"></script>

</html>

View Code

angular.module('myApp', ['ui.router', 'ui.router.state.events'])
    .controller('myCtrl', function ($scope) {
        let vm = this
    })
    .config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
        //設置路由初始頁面
        $urlRouterProvider.otherwise('orderList');
        //路由配置
        $stateProvider
            .state('index', {
                url: '/index',
                template: '<div><h2>Route1</h2></div>',
            })
            .state('login', {
                url: '/login',
                template: '<div><h2>Route2</h2></div>',
            })
            .state('dashboard', {
                url: '/dashboard',
                template: '<div><h2>Route3</h2></div>',
            })
    }])
    .run(['$rootScope', function ($rootScope) {
        // 監聽路由開始時觸發
        $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
            //do something
            console.log(1);
            // event 該事件的基本信息
            // toState 當前路由的基本信息，好比路由名稱，url,視圖的控制器，模板路徑等
            // toParams 當前路由的參數
            // fromState 上一個路由的基本信息，好比路由名稱，url,視圖的控制器，模板路徑等
            // fromParams 上一個路由的參數
        });
        // 路由成功時觸發
        $rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
            //do something
            // event 該事件的基本信息
            // toState 當前路由的基本信息，好比路由名稱，url,視圖的控制器，模板路徑等
            // toParams 當前路由的參數
            // fromState 上一個路由的基本信息，好比路由名稱，url,視圖的控制器，模板路徑等
            // fromParams 上一個路由的參數
        });
        // 路由錯誤時觸發
        $rootScope.$on('$stateChangeError', function (event, toState, toParams, fromState, fromParams, error) {
            //do something
            // event 該事件的基本信息
            // toState 當前路由的基本信息，好比路由名稱，url,視圖的控制器，模板路徑等
            // toParams 當前路由的參數
            // fromState 上一個路由的基本信息，好比路由名稱，url,視圖的控制器，模板路徑等
            // fromParams 上一個路由的參數
            // error 錯誤信息
        });
    }]);