AngularJS路由系列(5)-- UI-Router的路由约束、Resolve属性、路由附加数据、路由进入退出事件

本系列探寻AngularJS的路由机制，在WebStorm下开发。主要包括：

● UI-Router约束路由参数
● UI-Router的Resolve属性
● UI-Router给路由附加数据
● UI-Router的onEnter和onExit事件

AngularJS路由系列包括：

1、AngularJS路由系列(1)--基本路由配置
2、AngularJS路由系列(2)--刷新、查看路由,路由事件和URL格式，获取路由参数，路由的Resolve
3、AngularJS路由系列(3)-- UI-Router初体验
4、AngularJS路由系列(4)-- UI-Router的$state服务、路由事件、获取路由参数
5、AngularJS路由系列(5)-- UI-Router的路由约束、Resolve属性、路由附加数据、路由进入退出事件
6、AngularJS路由系列(6)-- UI-Router的嵌套State

项目文件结构

node_modules/
public/
.....app/
..........bower_components/
...............toastr/
....................toastr.min.css
....................toastr.min.js
...............jquery/
....................dist/
.........................jquery.min.js
...............angular/
....................angular.min.js
...............angular-ui-router/
....................release/
.........................angular-ui-router.min.js
...............angular-route/
.........................angular-route.min.js
..........controllers/
...............HomeController.js
...............AllSchoolsController.js
...............AllClassroomsController.js
...............AllActivityiesController.js
...............ClassroomController.js
...............ClassroomSummaryController.js
...............ClassroomMessageController.js
..........css/
...............bootstrap.cerulean.min.css
..........filters/
...............activityMonthFilter.js
..........services/
...............dataServices.js
...............notifier.js
..........templates/
...............home.html
...............allSchools.html
...............allClassrooms.html
...............allActivities.html
...............classroom.html
...............classroomDetail.html
...............classroom_parent.html
..........app.js
.....index.html
.....favicon.ico
server/
.....data/
.....routes/
.....views/
.....helpers.js
package.json
server.js

UI-Router约束路由参数

■ app.js, 约束参数

(function(){

    var app = angular.module('app',['ui.router']);

    app.config(['$logProvider', '$stateProvider', function($logProvider, $stateProvider){

        $logProvider.debugEnabled(true);

        $stateProvider

            .state('home',{

                url: '/',

                templateUrl: '/app/templates/home.html',

                controller: 'HomeController', //也可以写成HomeController as home

                controllerAs: 'home'

            })

            .state('schools',{

                url: '/schools',

                controller: 'AllSchoolController',

                controllerAs: 'schools',

                templateUrl: '/app/templates/allSchools.thml'

            })

            .state('classrooms',{

                url:'/classrooms',

                controller: 'AllClassroomsController',

                controllerAs: 'classrooms',

                templateUrl: '/app/tempates/allClassrooms.html'

            })

            .state('activities', {

                url: '/activities',

                controller: 'AllActivitiesController',

                controllerAs: 'activities',

                templateUrl: '/app/templates/allActivities.html'

            })

            .state('classroom_summary', {

                url: '/classrooms/:id',

                templateUrl: '/app/templates/classroom.html',

                controller: 'ClassroomController',

                controllerAs: 'classroom'

            })

            .state('classroom_detail',{

                url: '/classrooms/{id: [0-9]}/detail/{month}',

                templateUrl: '/app/templates/classroomDetail.html',

                controller: 'ClassroomController',

                controllerAs: 'classroom'

            })

    }]);

    app.run(['$rootScope', '$log', function($rootScope, $log){

        $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){

            $log.debug('successfully changed states') ;

            $log.debug('event', event);

            $log.debug('toState', toState);

            $log.debug('toParams', toParams);

            $log.debug('fromState', fromState);

            $log.debug('fromParams', fromParams);

        });

        $rootScope.$on('$stateNotFound', function(event, unfoundState, fromState, fromParams){

            $log.error('The request state was not found: ' + unfoundState);

        });

        $rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error){

            $log.error('An error occurred while changing states: ' + error);

            $log.debug('event', event);

            $log.debug('toState', toState);

            $log.debug('toParams', toParams);

            $log.debug('fromState', fromState);

            $log.debug('fromParams', fromParams);

        });

    }]);

}());

url: '/classrooms/{id: [0-9]}/detail/{month}'这个就对id这个路由参数进行了约束。

■ app.js, 路由参数不符合约束的解决办法

UI-Router为我们提供了$urlRouteProvider服务。

(function(){

    var app = angular.module('app',['ui.router']);

    app.config(['$logProvider', '$stateProvider', '$urlRouteProvider', function($logProvider, $stateProvider, $urlRouteProvider){

        $logProvider.debugEnabled(true);

        //解决路由异常的办法在这里

        $urlRouteProvider.otherwise('/');

        $stateProvider

            .state('home',{

                url: '/',

                templateUrl: '/app/templates/home.html',

                controller: 'HomeController', //也可以写成HomeController as home

                controllerAs: 'home'

            })

            .state('schools',{

                url: '/schools',

                controller: 'AllSchoolController',

                controllerAs: 'schools',

                templateUrl: '/app/templates/allSchools.thml'

            })

            .state('classrooms',{

                url:'/classrooms',

                controller: 'AllClassroomsController',

                controllerAs: 'classrooms',

                templateUrl: '/app/tempates/allClassrooms.html'

            })

            .state('activities', {

                url: '/activities',

                controller: 'AllActivitiesController',

                controllerAs: 'activities',

                templateUrl: '/app/templates/allActivities.html'

            })

            .state('classroom_summary', {

                url: '/classrooms/:id',

                templateUrl: '/app/templates/classroom.html',

                controller: 'ClassroomController',

                controllerAs: 'classroom'

            })

            .state('classroom_detail',{

                url: '/classrooms/{id: [0-9]}/detail/{month}',

                templateUrl: '/app/templates/classroomDetail.html',

                controller: 'ClassroomController',

                controllerAs: 'classroom'

            })

    }]);

    app.run(['$rootScope', '$log', function($rootScope, $log){

        $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){

            $log.debug('successfully changed states') ;

            $log.debug('event', event);

            $log.debug('toState', toState);

            $log.debug('toParams', toParams);

            $log.debug('fromState', fromState);

            $log.debug('fromParams', fromParams);

        });

        $rootScope.$on('$stateNotFound', function(event, unfoundState, fromState, fromParams){

            $log.error('The request state was not found: ' + unfoundState);

        });

        $rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error){

            $log.error('An error occurred while changing states: ' + error);

            $log.debug('event', event);

            $log.debug('toState', toState);

            $log.debug('toParams', toParams);

            $log.debug('fromState', fromState);

            $log.debug('fromParams', fromParams);

        });

    }]);

}());

■ UI-Router的params属性设置路由参数

(function(){

    var app = angular.module('app',['ui.router']);

    app.config(['$logProvider', '$stateProvider', '$urlRouteProvider', function($logProvider, $stateProvider, $urlRouteProvider){

        $logProvider.debugEnabled(true);

        //解决路由异常的办法在这里

        $urlRouteProvider.otherwise('/');

        $stateProvider

            .state('home',{

                url: '/',

                templateUrl: '/app/templates/home.html',

                controller: 'HomeController', //也可以写成HomeController as home

                controllerAs: 'home'

            })

            .state('schools',{

                url: '/schools',

                controller: 'AllSchoolController',

                controllerAs: 'schools',

                templateUrl: '/app/templates/allSchools.thml'

            })

            .state('classrooms',{

                url:'/classrooms',

                controller: 'AllClassroomsController',

                controllerAs: 'classrooms',

                templateUrl: '/app/tempates/allClassrooms.html'

            })

            .state('activities', {

                url: '/activities',

                controller: 'AllActivitiesController',

                controllerAs: 'activities',

                templateUrl: '/app/templates/allActivities.html'

            })

            .state('classroom_summary', {

                url: '/classrooms/:id',

                templateUrl: '/app/templates/classroom.html',

                controller: 'ClassroomController',

                controllerAs: 'classroom'

            })

            .state('classroom_detail',{

                url: '/classrooms/{id: [0-9]}/detail/{month}',

                templateUrl: '/app/templates/classroomDetail.html',

                controller: 'ClassroomController',

                controllerAs: 'classroom',

                params: {

                    classroomMessage: { value: 'Learning is fun!'}

                }

            })

    }]);

    app.run(['$rootScope', '$log', function($rootScope, $log){

        $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){

            $log.debug('successfully changed states') ;

            $log.debug('event', event);

            $log.debug('toState', toState);

            $log.debug('toParams', toParams);

            $log.debug('fromState', fromState);

            $log.debug('fromParams', fromParams);

        });

        $rootScope.$on('$stateNotFound', function(event, unfoundState, fromState, fromParams){

            $log.error('The request state was not found: ' + unfoundState);

        });

        $rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error){

            $log.error('An error occurred while changing states: ' + error);

            $log.debug('event', event);

            $log.debug('toState', toState);

            $log.debug('toParams', toParams);

            $log.debug('fromState', fromState);

            $log.debug('fromParams', fromParams);

        });

    }]);

}());

■ ClassroomController.js，接受更多的路由参数

(function(){

    angular.module('app')

        .controller('ClassroomController',['dataService', 'notifier', '$stateParams', ClassroomController]);

    function ClassroomController(dataService, notifier, $stateParams){

        var vm = this;

        vm.month = $stateParams.month;

        //接受param设置的参数

        vm.message = $stateParams.classroomMessage;

        dataService.getClassroom($stateParams.id)

            .then(function(classroom){

                vm.currentClassroom = classroom;

                if($stateParams.month){

                    if(classroom.activities.length > 0){

                        vm.timePeriod = dataService.getMonthName($stateParams.month);

                    } else {

                        vm.timePeriod = 'No activities this month';

                    }

                }

                else{

                    vm.timePeriod = 'All activities';

                }

            })

            .catch(showError);

        function showError(message){

            notifier.error(message);

        }

    }

}());

■ classroomDetal.html

UI-Router的Resolve属性

■ resolve 属性

.state('activities',{

    url: '/activities',

    controller: 'AllAcivitiesController',

    controllerAs: 'activities',

    templateUrl: '/app/templates/allActivities.html',

    resolve: {

        activities: function(dataService){

            return dataService.getAllActiviites();

        }

    }

})

● 可以被注入到controller中去
● 返回一个object对象，对象的属性自定义，属性值是一个返回promise的函数
● promises必须被resolve,在变化发生之前

■ app.js, 添加resolve属性

.state('activities',{

    url: '/activities',

    controller: 'AlLActivitiesController',

    controllerAs: 'activities',

    templateUrl: '/app/templates/allActivities.html',

    resolve: {

        activities: function(dataService){

            return dataService.getAllActivites();

        }

    }

})

■ AllActivitiesController.js，从resolve中获取数据

(function(){

    angular.module('app')

        .controller('AllActivitiesController',['dataService','notifier','$state','activites', AllActivitiesController]);

    function AllActivitiesController(dataService, notifier, $state, activities){

        var vm = this;

        vm.selectedMonth = 1;

        vm.allActivities = activities;

        vm.search = function(){

            $state.go('classroom_detail',{id:vm.selectedClassroom.id, month: vm.selectedMonth});

        }

        dataService.getAllClassrooms()

            .then(function(classroom){

                vm.allClassrooms = classrooms;

                vm.selectedClassroom = classrooms[0];

            })

            .catch(showError);

        function showError(message){

            notifier.error(message);

        }

    }

}());

当点击Activites的时候，数据已经在controller，不需要重新获取，大大减少了页面加载时间。

UI-Router给路由附加数据

■ 给states附加数据

.state('activities',{

    url: '/activities',

    controller: 'AllActivitesController',

    templateUlr: '/app/templates/allActivities.html',

    data: {

        name: 'MyActivity',

        desc: 'Fun!'

    }

})

● data中定义的属性是任意的
● 能被子state继承

■ app.js, 添加附加数据

.state('activities',{

    url: '/activities',

    controller: 'AlLActivitiesController',

    controllerAs: 'activities',

    templateUrl: '/app/templates/allActivities.html',

    resolve: {

        activities: function(dataService){

            return dataService.getAllActivites();

        }

    },

    data: {

        name: 'My Activity',

        desc: 'Func!'

    },

    foo: {

        myFoo: 'bar'

    }

})

■ AllActivitiesController.js，从resolve中获取数据

(function(){

    angular.module('app')

        .controller('AllActivitiesController',['dataService','notifier','$state','activites','$log', AllActivitiesController]);

    function AllActivitiesController(dataService, notifier, $state, activities, $log){

        var vm = this;

        vm.selectedMonth = 1;

        vm.allActivities = activities;

        $log.debug($state.current.data);

        $log.debug($state.current.foo);

        vm.search = function(){

            $state.go('classroom_detail',{id:vm.selectedClassroom.id, month: vm.selectedMonth});

        }

        dataService.getAllClassrooms()

            .then(function(classroom){

                vm.allClassrooms = classrooms;

                vm.selectedClassroom = classrooms[0];

            })

            .catch(showError);

        function showError(message){

            notifier.error(message);

        }

    }

}());

UI-Router的onEnter和onExit事件

.state('classroom',{

    url:'/clsssrooms',

    controller:'AllClssroomsController',

    controllerAs: 'classrooms',

    templateUrl: '/app/tempaltes/allClassrooms.html',

    onEnter: function($log){

        $log.debug('Entering the classrooms state');

    },

    onExit: function($log){

        $log.debug('Existing the classrooms state');

    }

})

未完待续~~