ngRoute路由改变监听事件(1)＋ui.router状态路由

1.1、路由改变监听事件(1)

1、$routeChangeStart：路由开始切换

2、$routeChangeSuccess：路由切换成功

3、$routeChangeError：路由切换失败（比如resolve中有错误），都会导致路由切换失败

4、$locationChangeStart：当$location.path或$location.url发生变化时触发

5、$locationChangeSuccess：当$location.path或$location.url发生成功后触发

例子：

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');
        }
    }]);

1.2、切换路由时，控制器会被销毁，控制器会痛过$broadcast传播一个名字为$destory的消息，在自己的作用域中可以监听到此消息，在控制器中我们可以做一些清理工作，比如关闭一些定时器等

例子：

angular.module('myApp',['ngRoute'])
    .config(['$routeProvider',function ($routeProvider) {
        $routeProvider
            .when('/home',{
                templateUrl: 'home.html',
                controller: 'HomeController'
            })
            .when('/other',{
                templateUrl: 'other.html',
                controller: 'OtherController'
            })
            .otherwise('/home');
    }])
    .run(['$rootScope',function ($rootScope) {
       
    }])
    .controller('HomeController',['$scope','$location',function ($scope,$location) {
        $scope.toOtherView = function () {
            $location.path('/other');
        }
    }])
    .controller('ChildController',['$scope','$interval',function ($scope,$interval) {
       
        $scope.num = 0;
        var interval = $interval(function () {
            $scope.num++;
            console.log(num);
        },1000);


        /**
         * 切换路由时,控制器会被销毁
         * 控制器会通过$broadcast传播一个名字为$destroy的消息
         * 在自己的作用域中可以监听到这则消息,在控制器中我们就可以做一些清理工作,比如关闭定时器等
         */
        $scope.$on('$destroy',function () {
            console.log('父控制器死了');
            $interval.cancel(interval);
        });
    }])
    .controller('OtherController',['$scope','$location',function ($scope,$location) {
        $scope.toHomeView = function () {
            $location.path('/home');
        }
    }]);

2.1、ui.router状态路由

要下载angular-ui-router.js后引入方可使用

痛过$stateProvider与$urlRouterProvider两个服务使用

$stateProvider服务中有state属性选择状态变化

$urlRouterProvider服务为其他情况下的壮态（意外跳转）

例子：

angular.module('myApp',['ui.router'])
    .config(['$stateProvider','$urlRouterProvider',function ($stateProvider,$urlRouterProvider) {
        $stateProvider
        /**
         * 第一个参数是状态,不是路由,一般情况下名字和路由名字一样
         * 
         * ui-router是ng-route的一个升级版,基于状态机来组织接口,而不是简单的URL,基于ngRoute的,
         * 能否完成一些场景的功能(有很多优秀的特性,比如ui-view嵌套,ngRoute无法实现ui-view嵌套),尤其在手机上
         * 
         */
            .state('home',{
                //路由,这里的用法基本与ngRoute一样
                url: '/home',
                templateUrl: 'home.html',
                controller: '',
                resolve: {
                   
                }
            })
            .state('other',{
                url: '/other',
                templateUrl: 'other.html'
            })
        //意外跳转
        /**
         * ngRoute默认跳转路由'/',如果when方法中有'/'路由,不写意外跳转也会跳转
         */
        $urlRouterProvider.otherwise('/home');
    }])

2.2、意外跳转的方式

1、直接跟路由路径

2、直接跟一状态

3、返回一函数

4、返回两个参数

5、返回两个参数，后一个为函数

6、.rule函数中返回一个函数

例子：

angular.module('myApp',['ui.router'])
    //uiRouter 理念: 管理状态, 路由辅助
    .config(['$stateProvider','$urlRouterProvider',function ($stateProvider,$urlRouterProvider) {
        $stateProvider
            .state('home',{
                url: '/home',
                templateUrl: 'home.html'
            });

        //意外跳转的方法
        // $urlRouterProvider.otherwise('/home');
        // $urlRouterProvider.otherwise('home');

        // $urlRouterProvider.otherwise(function ($injector,$location) {
        //     $location.path('/home');
        // });

        /**
         * 第一个参数: 给空字符串,想要匹配的入口路径
         * 第二个参数: 重新指向的路由
         */
        // $urlRouterProvider.otherwise('','home');

        /**
         * 如果第二个参数是函数,需要返回路由路径
         */
        // $urlRouterProvider.otherwise('',function () {
        //     return 'home';
        // });

        $urlRouterProvider.rule(function ($injector,$location) {
            return '/home';
        });
    }]);

2.3、状态路由的resolve属性与factory配置服务获取数据处理

resolve属性的特点：列表中（对象中的key值）可以注入到控制器中使用；如果key值是字符串，那么注入的服务名必须是该字符串；如果key值是函数，那么注入的服务名必须是函数的参数

例子：

angular.module('myApp',['ui.router'])
    .config(['$stateProvider','$urlRouterProvider',function ($stateProvider,$urlRouterProvider) {
        $stateProvider
            .state('home',{
                url: '/home',
                templateUrl: 'home.html',
                controller: 'HomeController',
                resolve: {
                    myFoo: 'foo',

                    //在这里,我们可以用到上面的属性,这里和ngRoute里面不一样,上面的key就是服务的名字
                    getName: function (myFoo) {
                        return myFoo.name;
                    },
                   
                    /**
                     * 如果返回的对象是一个promise,那么该对象会在控制器实例化之前解析完数据
                     * @param $http
                     * @returns {*}
                     */
                    setHttp: function ($http) {
                        return $http({
                            url: 'data/news.json',
                            method: 'get'
                        });
                    },
                    getData: function (setHttp) {
                        return setHttp.data;
                    }
                }
            })
            .state('other',{
                url: '/other',
                templateUrl: 'other.html'
            })
        $urlRouterProvider.otherwise('/home');
    }])
    .factory('foo',function () {
        return {
            name: 'zs',
            age: 12
        }
    })
    .controller('HomeController',['$scope','myFoo','getName','setHttp','getData',function ($scope,myFoo,getName,setHttp,getData) {
        // console.log(myFoo);
        // console.log(getName);
        console.log(setHttp.data);
        console.log(getData);
    }]);

2.4、state中的模版属性解析

如果写了views属性：template与templateUrl就会失效

例子：

angular.module('myApp',['ui.router'])
    .config(['$stateProvider','$urlRouterProvider',function ($stateProvider,$urlRouterProvider) {
        $stateProvider
            .state('index',{
                url: '/index',
                abstract: true,
                templateUrl: 'index.html',
                //如果写了views属性,template和templateUrl会失效
                views: {
                    home: {
                        templateUrl: 'home.html'
                    },
                    other: {
                        templateUrl: 'other.html'
                    }
                }
            })
        $urlRouterProvider.otherwise('/index');
    }])

2.5、state中的abstract属性

设置改模版为抽象模版

如果值为true，表示抽象模版永远不会被激活，但是可以设置为被激活的字节点，可以使包装器包含

例子：

angular.module('myApp',['ui.router'])
    .config(['$stateProvider','$urlRouterProvider',function ($stateProvider,$urlRouterProvider) {
        $stateProvider
            .state('tab',{
                url: '/tab',
                //abstract为true,表示抽象模版永远不能被激活,但是可以设置为被激活的子节点,可以使包装器包含
                abstract: true,
                templateUrl: 'tab.html'
            })
            .state('tab.news',{
                url: '/news',
                templateUrl: 'news.html'
            })
            .state('tab.live',{
                url: '/live',
                templateUrl: 'live.html'
            })
            .state('tab.talk',{
                url: '/talk',
                templateUrl: 'talk.html'
            })
            .state('tab.mine',{
                url: '/mine',
                templateUrl: 'mine.html'
            });
        $urlRouterProvider.otherwise('/tab/news');
           
    }])

2.6、state状态路由中传递参数的方法

区分传递参数与接受参数的对应格式

例子：

angular.module('myApp',['ui.router'])
    .config(['$stateProvider','$urlRouterProvider',function ($stateProvider,$urlRouterProvider) {
        $stateProvider
            .state('home',{
                url: '/home',
                templateUrl: 'home.html',
                controller: 'HomeController'
            })
            .state('other',{

                // url: '/other',
                // url: '/other/:name',
                // url: '/other/{name}',

                //跟正则针对$location服务
                // url: '/other/{name: [0-9]}',

                //查询参数,这样写暴露在地址栏中不安全
                // url: '/other?name',

                /**
                 * 一般传参数,这样传,参数写在params(参照post请求)
                 */
                url: '/other',
                params: {
                    name: '',
                    id: ''
                },

                templateUrl: 'other.html',
                controller: 'OtherController',

                //进入页面时会走该方法
                onEnter: function () {
                    console.log('enter');
                },
                //离开时走该方法
                onExit: function () {
                    console.log('exit');
                }

            });
        $urlRouterProvider.otherwise('home');
    }])
    .controller('HomeController',['$scope','$location','$state',function ($scope,$location,$state) {
        $scope.toOtherView = function () {
            //跟的是路由
            // $location.path('/other/zs');
            //跟的是状态
            // $state.go('other',{name: 23});

            // $location.path('/other/123');

            //查询参数
            // $location.url('/other?name=123');

            $state.go('other',{name: 23});
        }
    }])
    .controller('OtherController',['$scope','$location','$state','$stateParams',function ($scope,$location,$state,$stateParams) {
        $scope.goBack = function () {
            $state.go('home');
        }
        console.log($stateParams.name)
    }])