本系列探寻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, 约束参数

  1. (function(){
  2.     var app = angular.module('app',['ui.router']);
  3.  
  4.     app.config(['$logProvider', '$stateProvider', function($logProvider, $stateProvider){
  5.         $logProvider.debugEnabled(true);
  6.  
  7.         $stateProvider
  8.             .state('home',{
  9.                 url: '/',
  10.                 templateUrl: '/app/templates/home.html',
  11.                 controller: 'HomeController', //也可以写成HomeController as home
  12.                 controllerAs: 'home'
  13.             })
  14.             .state('schools',{
  15.                 url: '/schools',
  16.                 controller: 'AllSchoolController',
  17.                 controllerAs: 'schools',
  18.                 templateUrl: '/app/templates/allSchools.thml'
  19.             })
  20.             .state('classrooms',{
  21.                 url:'/classrooms',
  22.                 controller: 'AllClassroomsController',
  23.                 controllerAs: 'classrooms',
  24.                 templateUrl: '/app/tempates/allClassrooms.html'
  25.             })
  26.             .state('activities', {
  27.                 url: '/activities',
  28.                 controller: 'AllActivitiesController',
  29.                 controllerAs: 'activities',
  30.                 templateUrl: '/app/templates/allActivities.html'
  31.             })
  32.             .state('classroom_summary', {
  33.                 url: '/classrooms/:id',
  34.                 templateUrl: '/app/templates/classroom.html',
  35.                 controller: 'ClassroomController',
  36.                 controllerAs: 'classroom'
  37.             })
  38.             .state('classroom_detail',{
  39.                 url: '/classrooms/{id: [0-9]}/detail/{month}',
  40.                 templateUrl: '/app/templates/classroomDetail.html',
  41.                 controller: 'ClassroomController',
  42.                 controllerAs: 'classroom'
  43.             })
  44.     }]);
  45.  
  46.     app.run(['$rootScope', '$log', function($rootScope, $log){
  47.         $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){
  48.             $log.debug('successfully changed states') ;
  49.  
  50.             $log.debug('event', event);
  51.             $log.debug('toState', toState);
  52.             $log.debug('toParams', toParams);
  53.             $log.debug('fromState', fromState);
  54.             $log.debug('fromParams', fromParams);
  55.         });
  56.  
  57.         $rootScope.$on('$stateNotFound', function(event, unfoundState, fromState, fromParams){
  58.             $log.error('The request state was not found: ' + unfoundState);
  59.         });
  60.  
  61.         $rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error){
  62.             $log.error('An error occurred while changing states: ' + error);
  63.  
  64.             $log.debug('event', event);
  65.             $log.debug('toState', toState);
  66.             $log.debug('toParams', toParams);
  67.             $log.debug('fromState', fromState);
  68.             $log.debug('fromParams', fromParams);
  69.         });
  70.     }]);
  71. }());

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

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

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

  1. (function(){
  2.     var app = angular.module('app',['ui.router']);
  3.  
  4.     app.config(['$logProvider', '$stateProvider', '$urlRouteProvider', function($logProvider, $stateProvider, $urlRouteProvider){
  5.         $logProvider.debugEnabled(true);
  6.  
  7.         //解决路由异常的办法在这里
  8.         $urlRouteProvider.otherwise('/');
  9.  
  10.         $stateProvider
  11.             .state('home',{
  12.                 url: '/',
  13.                 templateUrl: '/app/templates/home.html',
  14.                 controller: 'HomeController', //也可以写成HomeController as home
  15.                 controllerAs: 'home'
  16.             })
  17.             .state('schools',{
  18.                 url: '/schools',
  19.                 controller: 'AllSchoolController',
  20.                 controllerAs: 'schools',
  21.                 templateUrl: '/app/templates/allSchools.thml'
  22.             })
  23.             .state('classrooms',{
  24.                 url:'/classrooms',
  25.                 controller: 'AllClassroomsController',
  26.                 controllerAs: 'classrooms',
  27.                 templateUrl: '/app/tempates/allClassrooms.html'
  28.             })
  29.             .state('activities', {
  30.                 url: '/activities',
  31.                 controller: 'AllActivitiesController',
  32.                 controllerAs: 'activities',
  33.                 templateUrl: '/app/templates/allActivities.html'
  34.             })
  35.             .state('classroom_summary', {
  36.                 url: '/classrooms/:id',
  37.                 templateUrl: '/app/templates/classroom.html',
  38.                 controller: 'ClassroomController',
  39.                 controllerAs: 'classroom'
  40.             })
  41.             .state('classroom_detail',{
  42.                 url: '/classrooms/{id: [0-9]}/detail/{month}',
  43.                 templateUrl: '/app/templates/classroomDetail.html',
  44.                 controller: 'ClassroomController',
  45.                 controllerAs: 'classroom'
  46.             })
  47.     }]);
  48.  
  49.     app.run(['$rootScope', '$log', function($rootScope, $log){
  50.         $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){
  51.             $log.debug('successfully changed states') ;
  52.  
  53.             $log.debug('event', event);
  54.             $log.debug('toState', toState);
  55.             $log.debug('toParams', toParams);
  56.             $log.debug('fromState', fromState);
  57.             $log.debug('fromParams', fromParams);
  58.         });
  59.  
  60.         $rootScope.$on('$stateNotFound', function(event, unfoundState, fromState, fromParams){
  61.             $log.error('The request state was not found: ' + unfoundState);
  62.         });
  63.  
  64.         $rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error){
  65.             $log.error('An error occurred while changing states: ' + error);
  66.  
  67.             $log.debug('event', event);
  68.             $log.debug('toState', toState);
  69.             $log.debug('toParams', toParams);
  70.             $log.debug('fromState', fromState);
  71.             $log.debug('fromParams', fromParams);
  72.         });
  73.     }]);
  74. }());

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

  1. (function(){
  2.     var app = angular.module('app',['ui.router']);
  3.  
  4.     app.config(['$logProvider', '$stateProvider', '$urlRouteProvider', function($logProvider, $stateProvider, $urlRouteProvider){
  5.         $logProvider.debugEnabled(true);
  6.  
  7.         //解决路由异常的办法在这里
  8.         $urlRouteProvider.otherwise('/');
  9.  
  10.         $stateProvider
  11.             .state('home',{
  12.                 url: '/',
  13.                 templateUrl: '/app/templates/home.html',
  14.                 controller: 'HomeController', //也可以写成HomeController as home
  15.                 controllerAs: 'home'
  16.             })
  17.             .state('schools',{
  18.                 url: '/schools',
  19.                 controller: 'AllSchoolController',
  20.                 controllerAs: 'schools',
  21.                 templateUrl: '/app/templates/allSchools.thml'
  22.             })
  23.             .state('classrooms',{
  24.                 url:'/classrooms',
  25.                 controller: 'AllClassroomsController',
  26.                 controllerAs: 'classrooms',
  27.                 templateUrl: '/app/tempates/allClassrooms.html'
  28.             })
  29.             .state('activities', {
  30.                 url: '/activities',
  31.                 controller: 'AllActivitiesController',
  32.                 controllerAs: 'activities',
  33.                 templateUrl: '/app/templates/allActivities.html'
  34.             })
  35.             .state('classroom_summary', {
  36.                 url: '/classrooms/:id',
  37.                 templateUrl: '/app/templates/classroom.html',
  38.                 controller: 'ClassroomController',
  39.                 controllerAs: 'classroom'
  40.             })
  41.             .state('classroom_detail',{
  42.                 url: '/classrooms/{id: [0-9]}/detail/{month}',
  43.                 templateUrl: '/app/templates/classroomDetail.html',
  44.                 controller: 'ClassroomController',
  45.                 controllerAs: 'classroom',
  46.                 params: {
  47.                     classroomMessage: { value: 'Learning is fun!'}
  48.                 }
  49.             })
  50.     }]);
  51.  
  52.     app.run(['$rootScope', '$log', function($rootScope, $log){
  53.         $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){
  54.             $log.debug('successfully changed states') ;
  55.  
  56.             $log.debug('event', event);
  57.             $log.debug('toState', toState);
  58.             $log.debug('toParams', toParams);
  59.             $log.debug('fromState', fromState);
  60.             $log.debug('fromParams', fromParams);
  61.         });
  62.  
  63.         $rootScope.$on('$stateNotFound', function(event, unfoundState, fromState, fromParams){
  64.             $log.error('The request state was not found: ' + unfoundState);
  65.         });
  66.  
  67.         $rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error){
  68.             $log.error('An error occurred while changing states: ' + error);
  69.  
  70.             $log.debug('event', event);
  71.             $log.debug('toState', toState);
  72.             $log.debug('toParams', toParams);
  73.             $log.debug('fromState', fromState);
  74.             $log.debug('fromParams', fromParams);
  75.         });
  76.     }]);
  77. }());

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

  1. (function(){
  2.     angular.module('app')
  3.         .controller('ClassroomController',['dataService', 'notifier', '$stateParams', ClassroomController]);
  4.  
  5.     function ClassroomController(dataService, notifier, $stateParams){
  6.         var vm = this;
  7.  
  8.         vm.month = $stateParams.month;
  9.  
  10.         //接受param设置的参数
  11.         vm.message = $stateParams.classroomMessage;
  12.  
  13.         dataService.getClassroom($stateParams.id)
  14.             .then(function(classroom){
  15.                 vm.currentClassroom = classroom;
  16.  
  17.                 if($stateParams.month){
  18.                     if(classroom.activities.length > 0){
  19.                         vm.timePeriod = dataService.getMonthName($stateParams.month);
  20.                     } else {
  21.                         vm.timePeriod = 'No activities this month';
  22.                     }
  23.                 }
  24.                 else{
  25.                     vm.timePeriod = 'All activities';
  26.                 }
  27.             })
  28.             .catch(showError);
  29.  
  30.         function showError(message){
  31.             notifier.error(message);
  32.         }
  33.  
  34.     }
  35. }());

■ classroomDetal.html

{{classroom.message}}

UI-Router的Resolve属性

■ resolve 属性

  1. .state('activities',{
  2.     url: '/activities',
  3.     controller: 'AllAcivitiesController',
  4.     controllerAs: 'activities',
  5.     templateUrl: '/app/templates/allActivities.html',
  6.     resolve: {
  7.         activities: function(dataService){
  8.             return dataService.getAllActiviites();
  9.         }
  10.     }
  11. })

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

■ app.js, 添加resolve属性

  1. .state('activities',{
  2.     url: '/activities',
  3.     controller: 'AlLActivitiesController',
  4.     controllerAs: 'activities',
  5.     templateUrl: '/app/templates/allActivities.html',
  6.     resolve: {
  7.         activities: function(dataService){
  8.             return dataService.getAllActivites();
  9.         }
  10.     }
  11. })

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

  1. (function(){
  2.     angular.module('app')
  3.         .controller('AllActivitiesController',['dataService','notifier','$state','activites', AllActivitiesController]);
  4.  
  5.     function AllActivitiesController(dataService, notifier, $state, activities){
  6.         var vm = this;
  7.  
  8.         vm.selectedMonth = 1;
  9.         vm.allActivities = activities;
  10.  
  11.         vm.search = function(){
  12.             $state.go('classroom_detail',{id:vm.selectedClassroom.id, month: vm.selectedMonth});
  13.         }
  14.  
  15.         dataService.getAllClassrooms()
  16.             .then(function(classroom){
  17.                 vm.allClassrooms = classrooms;
  18.                 vm.selectedClassroom = classrooms[0];
  19.             })
  20.             .catch(showError);
  21.  
  22.         function showError(message){
  23.             notifier.error(message);
  24.         }
  25.     }
  26. }());

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

UI-Router给路由附加数据

■ 给states附加数据

  1. .state('activities',{
  2.     url: '/activities',
  3.     controller: 'AllActivitesController',
  4.     templateUlr: '/app/templates/allActivities.html',
  5.     data: {
  6.         name: 'MyActivity',
  7.         desc: 'Fun!'
  8.     }
  9. })

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

■ app.js, 添加附加数据

  1. .state('activities',{
  2.     url: '/activities',
  3.     controller: 'AlLActivitiesController',
  4.     controllerAs: 'activities',
  5.     templateUrl: '/app/templates/allActivities.html',
  6.     resolve: {
  7.         activities: function(dataService){
  8.             return dataService.getAllActivites();
  9.         }
  10.     },
  11.     data: {
  12.         name: 'My Activity',
  13.         desc: 'Func!'
  14.     },
  15.     foo: {
  16.         myFoo: 'bar'
  17.     }
  18. })

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

  1. (function(){
  2.     angular.module('app')
  3.         .controller('AllActivitiesController',['dataService','notifier','$state','activites','$log', AllActivitiesController]);
  4.  
  5.     function AllActivitiesController(dataService, notifier, $state, activities, $log){
  6.         var vm = this;
  7.  
  8.         vm.selectedMonth = 1;
  9.         vm.allActivities = activities;
  10.  
  11.         $log.debug($state.current.data);
  12.         $log.debug($state.current.foo);
  13.  
  14.         vm.search = function(){
  15.             $state.go('classroom_detail',{id:vm.selectedClassroom.id, month: vm.selectedMonth});
  16.         }
  17.  
  18.         dataService.getAllClassrooms()
  19.             .then(function(classroom){
  20.                 vm.allClassrooms = classrooms;
  21.                 vm.selectedClassroom = classrooms[0];
  22.             })
  23.             .catch(showError);
  24.  
  25.         function showError(message){
  26.             notifier.error(message);
  27.         }
  28.     }
  29. }());

UI-Router的onEnter和onExit事件

  1. .state('classroom',{
  2.     url:'/clsssrooms',
  3.     controller:'AllClssroomsController',
  4.     controllerAs: 'classrooms',
  5.     templateUrl: '/app/tempaltes/allClassrooms.html',
  6.     onEnter: function($log){
  7.         $log.debug('Entering the classrooms state');
  8.     },
  9.     onExit: function($log){
  10.         $log.debug('Existing the classrooms state');
  11.     }
  12. })

未完待续~~

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

  1. AngularJS 使用 UI Router 实现表单向导

    Today we will be using AngularJS and the great UI Router and the Angular ngAnimate module to create ...

  2. [转]AngularJS 使用 UI Router 实现表单向导

    本文转自:http://www.oschina.net/translate/angularjs-multi-step-form-using-ui-router 今天我们将使用AngularJs和伟大的 ...

  3. ngRoute 和 ui.router 的使用方法和区别

    在单页面应用中要把各个分散的视图给组织起来是通过路由机制来实现的.本文主要对 AngularJS 原生的 ngRoute 路由模块和第三方路由模块 ui.router 的用法进行简单介绍,并做一个对比 ...

  4. react第十二单元(react路由-使用react-router-dom-认识相关的组件以及组件属性)

    第十二单元(react路由-使用react-router-dom-认识相关的组件以及组件属性) #课程目标 理解路由的原理及应运 理解react-router-dom以及内置的一些组件 合理应用内置组 ...

  5. AngularJS路由系列(6)-- UI-Router的嵌套State

    本系列探寻AngularJS的路由机制,在WebStorm下开发.本篇主要涉及UI-Route的嵌套State. 假设一个主视图上有两个部分视图,部分视图1和部分视图2,主视图对应着一个state,两 ...

  6. AngularJS路由系列(4)-- UI-Router的$state服务、路由事件、获取路由参数

    本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● UI-Router的$state服务● UI-Router的路由事件● UI-Router获取路由参数 Angular ...

  7. AngularJS路由系列(3)-- UI-Router初体验

    本系列探寻AngularJS的路由机制,在WebStorm下开发. AngularJS路由系列包括: 1.AngularJS路由系列(1)--基本路由配置2.AngularJS路由系列(2)--刷新. ...

  8. AngularJS路由系列(2)--刷新、查看路由,路由事件和URL格式，获取路由参数，路由的Resolve

    本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● 刷新路由● 查看当前路由以及所有路由● 路由触发事件● 获取路由参数 ● 路由的resolve属性● 路由URL格式 ...

  9. AngularJS路由系列(1)--基本路由配置

    本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● 路由的Big Picture ● $routeProvider配置路由 ● 使用template属性 ● 使用temp ...

随机推荐

  1. ps和top的区别，以及各参数意思

    这两个命令都是查看系统进程信息的命令,但是用处有点儿不同 1.ps命令--提供系统过去信息的一次性快照 也就是说ps命令能够查看刚刚系统的进程信息  命令:ps aux或者ps lax [root@L ...

  2. 开源整理：Android App新手指引开源控件

    开源整理:Android App新手指引开源控件 一个App第一次与用户接触或者发生大版本更新时,常常会用户进行新手引导,而一个好的新手指引,往往能够方便新用户快速了解操作你的应用功能.新手指引的重要 ...

  3. jenkins主从从服务器发布脚本执行成功但总提示失败 FATAL: Remote call on XXXX failed

    主从jenkins当调用 slave 执行编译脚本后提示如下错误,找了半天怎么也没有问题,后来忽然发现slave上java的版本和master不同,一个 1.8 一个 1.10,将slave降回1.8 ...

  4. unit测试出现异常：Exception in thread "main" java.lang.NoSuchMethodError: org.junit.platform.commons.util

    在进行单元测试时,测试出现异常 Exception in thread "main" java.lang.NoSuchMethodError: org.junit.platform ...

  5. pathon 基础学习-集合(set)，单双队列，深浅copy，内置函数

    一.collections系列: collections其实是python的标准库,也就是python的一个内置模块,因此使用之前导入一下collections模块即可,collections在pyt ...

  6. DateTime格式字符串HH与hh

    早上写了一个关于接口的示例代码,结果发现了一个bug.接口中我内部将DateTime转化为12小时进制的字符串,这样就导致在用户没有指定小时时,不会默认写入00,而是12. 例如: DateTime ...

  7. 说一下PHP中die()和exit()区别

    PHP手册:die()Equivalent to exit(). 说明:die()和exit()都是中止脚本执行函数:其实exit和die这两个名字指向的是同一个函数,die()是exit()函数的别 ...

  8. Java编程的逻辑 (15) - 初识继承和多态

    本系列文章经补充和完善,已修订整理成书<Java编程的逻辑>,由机械工业出版社华章分社出版,于2018年1月上市热销,读者好评如潮!各大网店和书店有售,欢迎购买,京东自营链接:http:/ ...

  9. Git（五）IDEA应用Git

    一.IDEA客户端git 1.提交代码到本地仓库 1. 关联Git,创建本地库 关联git 配置git环境变量 设置本地仓库目录,一般是IDEA工作空间,选择VCS->Import into V ...

  10. springmvc配置MappingJackson2HttpMessageConverter实现属性驼峰和下划线的转换

    需求 php调用java接口时,因为php那边的属性都是下划线风格,java这边的属性都是驼峰的风格.配置springmvc的json转换,在requestBody的时候(调用对象的set 方法)将j ...