本系列探寻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
{{classroom.message}}
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'); } })
未完待续~~