angularjs路由改变的事件监听

最新推荐文章于 2021-09-28 08:19:19 发布

guopeng_123456

最新推荐文章于 2021-09-28 08:19:19 发布

阅读量860

点赞数

文章标签： angularjs

本文链接：https://blog.csdn.net/groping123456/article/details/52914684

版权

 * Created by qingyun on 16/10/24.
 */
angular.module('myApp',['ngRoute'])
.config(['$routeProvider',function ($routeProvider) {
     $routeProvider.when('/home',{
         templateUrl : "home.html",

         controller : "homeController"

         //该属性特点 : 列表 (对象中的key 值 )可以注入到控制器 中使用,
         // 如果key对应的值为字符串,那么字符串的值必须是服务的名字,
         // 如果是函数呢,函数的参数也必须是服务的名字

         // resolve :{
         //     //这里面必须是服务的名字 不然会报错
         //     a :"b"
         //
         // }
     });
    $routeProvider.when('/other',{
        templateUrl : "other.html",
        controller : "otherController"
        
    });
    
    $routeProvider.otherwise('/home');
}])
    .run(['$rootScope',function ($rootScope) {
        //路由开始切换
        $rootScope.$on('$routeChangeStart',function (eve,next,current) {

            console.log('11111');
            //　第一个参数 : 事件
            //第二个参数 : 要切换到的路由;
            //第一次进入到该方法没有当前路由,第三个参数为undefined
            console.log(eve,next,current);
        });

        $rootScope.$on('$routeChangeSuccess',function (eve,current,previous) {
            //路由切换成功
           //　第一个参数 : 事件
            // 第二个参数 当前路由
            //  第三个参数 上一个切换过来的路由  第一次没有
            console.log('2222222');
            console.log(eve,previous,current)
        });
        $rootScope.$on('$routeChangeError',function (eve,msg) {

            //路由切换失败(比如resolve中有错误等等 都会导致路由切换失败)
            console.log('3333333');
            console.log(eve,msg)
        });
        //当location.path 发生变化或者$location.url发生变化时触发
        $rootScope.$on('$locationChangeStart',function (eve,msg) {
            console.log('4444444444')
        });
        //当且仅当path或url 变化成功以后 会走
        $rootScope.$on('$locationChangeSuccess',function (eve,msg) {
            console.log('5555555')
        })
    }])

.controller('homeController',['$scope','$location',function ($scope,$location) {
    $scope.goToOtherView =function () {
        $location.path('/other');
    };
}])
.controller('otherController',['$scope','$location',function ($scope,$location) {
    $scope.goBack = function () {
        window.history.go(-1);
    };
}]);