本系列探寻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. 【Python】Flask系列-数据库笔记

    MySQL-python中间件的介绍与安装: 1.如果是在类unix系统上,直接进入虚拟环境,输入sudo pip install mysql-python. 2.如果是在windows系统上,那么在 ...

  2. C语言内存分布

    C语言内存分布 典型的C语言程序内存表示分区共有5个部分: 正文段 Text segment 已初始化数据段(数据段)Initialized data segment 未初始化数据段(bss)Unin ...

  3. QTP图片验证/图片比较/二进制流对比法

    图片验证主要是文件对比,其中我们可以利用二进制的方法读取图片信息,然后进行对比,达到对比的效果,本例子利用fso对象的文件流的方法实现,代码如下: Public Function CompareFil ...

  4. 树莓派编译安装opencv3 (2019.1.6更新)

    一.更新系统 sudo apt-get update sudo apt-get upgrade sudo rpi-update #重启系统 sudo reboot 二.安装依赖库及程序 sudo ap ...

  5. [转]html网页 swf播放器使用代码

    <object id="player" height="240" width="275" classid="CLSID:6B ...

  6. 【转】手把手教你 Mockito 的使用

    原文链接:https://segmentfault.com/a/1190000006746409 什么是 Mockito Mockito 是一个强大的用于 Java 开发的模拟测试框架, 通过 Moc ...

  7. （mysql）触发器、事件、事务、函数

    1.事务操作原理:事务开启之后Start transaction,所有的操作都会临时保存到事务日志.只有在得到commit才会关闭,否则清空:2.设置回滚点: savepoint 回滚点名字:  回到 ...

  8. 利用CSS改变输入框的光标颜色

    转:http://www.cnblogs.com/gymmer/p/6810367.html 代码: <!DOCTYPE html> <html lang="en" ...

  9. spring-dao.xml 模板

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...

  10. BZOJ 1305 dance跳舞(最大流+二分答案)

    题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=1305 解题思路:转自:https://blog.csdn.net/u012288458/ ...