1. 程式人生 > >ngRoute路由改變監聽事件(1)+ui.router狀態路由

ngRoute路由改變監聽事件(1)+ui.router狀態路由

angular.module('myApp',['ngRoute'])
    .config(['$routeProvider',function ($routeProvider) {
        $routeProvider
.when('/home',{
                templateUrl'home.html',
                controller'HomeController',

                /**
                 * 該屬性的特點:列表(物件中的key值)可以注入到控制器中使用,
                 * 如果key值為字串,那麼服務名必須是字串,
                 * 如果是函式,那麼服務名必須是函式引數
                 */
                // resolve: {
                //     //這裡的b值必須是服務的名字
                //     a: 'b'
                // }
})
            .when('/other',{
                templateUrl'other.html',
                controller'OtherController'
})
            .otherwise
('/home');
    }])
    .run(['$rootScope',function ($rootScope) {

        //路由開始切換
        /**
         * args[0]: 事件
         * args[1]: 要切換的路由
         * args[2]: 第一次進入該方法,沒有當前路由,為undefined
         */
$rootScope.$on('$routeChangeStart',function (event,next,current) {
            console.log([event,next,current
]);
        });

        //路由切換成功
        /**
         * args[0]: 事件
         * args[1]: 當前的路由
         * args[2]: 上一個路由,第一次進入該方法,沒有上一個路由,為undefined
         */
$rootScope.$on('$routeChangeSuccess',function (event,current,previous) {
            console.log([event,current,previous]);
        });

        //路由切換失敗(比如resolve中有錯誤等待),都會導致路由切換失敗
$rootScope.$on('$routeChangeError',function (event,msg) {
            console.log([event,msg]);
        });

        //當$location.path發生變化或者$location.url發生變化時觸發
$rootScope.$on('$locationChangeStart',function (event,msg) {
            console.log([event,msg]);
        });

        //當且僅當path或url變化成功後觸發
$rootScope.$on('$locationChangeSuccess',function (event,msg) {
            console.log([event,msg]);
        });

    }])
    .controller('HomeController',['$scope','$location',function ($scope,$location) {
        $scope.toOtherView = function () {
            $location.path('/other');
        }
    }])
    .controller('OtherController',['$scope','$location',function ($scope,$location) {
        $scope.toHomeView = function () {
            $location.path('/home');
        }
    }]);