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

● UI-Router的$state服务
● UI-Router的路由事件
● UI-Router获取路由参数

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的$state服务

方法：
● go()  
● reload()
● get()

属性：
● current
● params

事件
● $stateChangeError
● $stateChangeStart
● $stateChangeSuccess
● $stateNotFound

■ index.html, 使用ui-sref

bootstrap.cerulean.min.css

toastr.min.css

<!--Angular-->

angular.min.js

angular-ui-router.min.js

<!--Application-->

app.js

<!--Services-->

dataServices.js

notifier.js

<!--Filters-->

activityMonthFilter.js

<!--Controls-->

HomeController.js

AllSchoolsController.js

AllClassroomsController.js

AllActivityiesController.js

ClassroomController.js

ClassroomSummaryController.js

ClassroomMessageController.js

<body ng-app="app">

    <a ui-sref="home">School Buddy</a>

    <a ui-sref="schools">Schools</a>

    <a ui-sref="classrooms">Classrooms</a>

    <a ui-sref="activities">Activities</a>

    <div ui-view></div>

</body>

■ HomeController.js

(function(){

    angular.module('app')

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

    function HomeController(dataService, notifier, $state, $log){

        var vm = this;

        vm.message = 'Welcome to School Buddy';

        //使用$state服务

        vm.refresh = function(){

            $log.debug($state.current);

            $state.reload();

        }

        dataService.getAllSchools()

            .then(function(schools){

                vm.allSchools = schools;

                vm.schoolCount = schools.length;

            })

            .catch(showError);

        dataService.getAllClassrooms()

            .then(function(classrooms){

                vm.allClassrooms = classrooms;

                vm.classroomCount = classrooms.length;

            })

            .catch(showError);

        ...

    }

}());

■ home.html

{{home.message}}
{{home.schoolCount}}
{{home.classroomCount}}
{{home.activityCount}}

<button ng-click="home.refresh()">刷新</button>

点击"刷新"按钮。

可见，$state.reload()方法只刷新路由部分，与浏览器的刷新按钮功能是不一样的。

控制台方面，$state.current代表的当前如下：

UI-Router的路由事件

■ app.js, 给$rootScope添加有关路由的事件

(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',

                resolve: {

                    promise: function(){

                        throw 'error activating classrooms';

                    }

                }

            })

            .state('activities', {

                url: '/activities',

                controller: 'AllActivitiesController',

                controllerAs: 'activities',

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

            })

    }]);

    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);

        });

    }]);

}());

■ index.html， 故意制造一个404错误

bootstrap.cerulean.min.css

toastr.min.css

<!--Angular-->

angular.min.js

angular-ui-router.min.js

<!--Application-->

app.js

<!--Services-->

dataServices.js

notifier.js

<!--Filters-->

activityMonthFilter.js

<!--Controls-->

HomeController.js

AllSchoolsController.js

AllClassroomsController.js

AllActivityiesController.js

ClassroomController.js

ClassroomSummaryController.js

ClassroomMessageController.js

<body ng-app="app">

    <a ui-sref="home">School Buddy</a>

    <a ui-sref="schools">Schools</a>

    <a ui-sref="classrooms">Classrooms</a>

    <a ui-sref="activitiesAAA">Activities</a>

    <div ui-view></div>

</body>

在<a ui-sref="activitiesAAA">Activities</a>这里制造了一个404错误。

点击首页的"刷新"按钮。

点击Schools

点击Classroom故意抛出的异常

点击Activities故意抛出404异常。

UI-Router获取路由参数

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

.state('classrooms',{

    url: '/classrooms/:id'

})

.state('classrooms',{

    url: '/classrooms/{id}'

})

.state('activities',{

    url: '/activities',

    params: {

        id: { value: 42}

    }

})

localhost:3000/#/classrooms/3

function ClassroomController($stateParams){

    var classroomID = $stateParams.id;

}

■ 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'

            })

    }]);

    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;

        dataService.getClassroom($stateParams.id)

            .then(function(classroom){

                vm.currentClassroom = classroom;

            })

            .catch(showError);

        function showError(message){

            notifier.error(message);

        }

    }

}());

■ allClassrooms.html

<tr ng-repeat="classroom in classrooms.allClassrooms">

    <td><a href="#/classrooms/{{classroom.id}}/details">{{classroom.name}}</a></td>

    <td>{{classroom.school.name}}</td>

    <td><a ui-sref="classroom_summary({id: classroom.id})">{{classroom.teacher}}</a></td>

</tr>

在浏览器中输入：localhost:3000/#/classrooms/1

■ 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}/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);

        });

    }]);

}());

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

(function(){

    angular.module('app')

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

    function ClassroomController(dataService, notifier, $stateParams){

        var vm = this;

        vm.month = $stateParams.month;

        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);

        }

    }

}());

■ AllActivitiesController.js

(function(){

    angular.module('app')

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

    function AllActivitiesController(dataService, notifier, $state){

        var vm = this;

        vm.selectedMonth = 1;

        vm.search = function(){

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

        }

        dataServie.getAllClassrooms()

            .then(function(classrooms){

                vm.allClassrooms = classrooms;

                vm.selectedClassroom = classrooms[0];

            })

            .catch(showError);

        dataService.getAllActivities()

            .then(function(activities){

                vm.allActivities = activities;

            })

            .catch(showError);

        function showError(message){

            notifier.error(message);

        }

    }

}());

浏览器中输入：localhost:3000/#/classrooms/1/detail/12

未完待续~~

AngularJS路由系列(4)-- UI-Router的$state服务、路由事件、获取路由参数的更多相关文章

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

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

  2. spring cloud系列教程第八篇-修改服务名称及获取注册中心注册者的信息

    spring cloud系列教程第八篇-修改服务名称及获取注册中心注册者的信息 本文主要内容: 1:管理页面主机名及访问ip信息提示修改 2:获取当前注册中心的服务列表及每个服务对于的服务提供者列表 ...

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

    本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● UI-Router约束路由参数● UI-Router的Resolve属性● UI-Router给路由附加数据● UI- ...

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

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

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

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

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

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

  7. angularjs ngRoute和ui.router对比

    ngRoute模块是angularjs自带的路由模块,ui.router是一个第三方路由模块,接下来将对两者进行一个对比: ng-router(angular-router.js) ng-view n ...

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

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

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

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

随机推荐

  1. MySQL管理工具MySQL Utilities — 介绍与安装(1)

    MySQL Utilities介绍 MySQL Utilities 提供一组命令行工具用于维护和管理 MySQL 服务器,包括: 管理工具 (克隆.复制.比较.差异.导出.导入) 复制工具 (安装.配 ...

  2. http跨域时的options请求

    1.背景 在前后端分离的项目中经常会遇到跨域请求的问题,如果没有进行跨域配置,会浏览器请求失败.我一般采用两种解决方案: 1.采用nginx进行转发,是前后端服务处于同一个域下面,从根本上避免跨域问题 ...

  3. 阿里云服务器配置nginx和PHP

    1. 安装及启动nginx 输入yum install nginx命令进行nginx的安装,当需要确认时输入”y“确认. yum install nginx 安装完成后,输入service nginx ...

  4. opencv的级联分类器(mac)

    级联分类器的介绍:级联分类器训练 因为要训练负样本,windows电脑有些问题,所以就只能有mac进行训练. 在windows中训练,准备了负样本之后,进行三步. 1.opencv_createsam ...

  5. Notes for building gimp-print

    First try, build gimp-print on ubuntu. 1. Install all dependencies. sudo apt-get install libcups2-de ...

  6. 使用nginx统一代理dashboard,grafana,Prometheus二级目录访问

    k8s上的这些管理工具必不可少,可以统一在nginx下的二级目录下. ingress是好,但我们不方便使用内部域名,相信么...:) 一,prometheus改造 在prometheus的deploy ...

  7. 解决 Delphi XE5 写Android程序的No resource identifier found for attribute... 错误【转】

    原文:http://www.hxhlb.cn/article/32142aaeb67bbc05379369c3.html 那一天,我装上了RAD Studio XE5. 当天晚上,我就写了一个小小的A ...

  8. 【LOJ】#2568. 「APIO2016」烟花表演

    题解 这个听起来很毒瘤的想法写起来却非常休闲,理解起来可能很费劲 例如,我们首先到猜到答案是个下凸包 然后是不是要三分???然而并不是orz 我们通过归纳证明这个下凸包的结论来总结出了一个算法 也就是 ...

  9. 001.Chrony时间服务器

    一 Chrony概览 1.1 Chrony简介 Chrony是一个开源的自由软件,是网络世界协议(NTP)的另一种实现,它能保持系统时钟与时钟服务器(NTP)同步,让时间保持精确. 它由两个程序组成: ...

  10. JAVA-Exception&Error

    JAVA--Exception&Error 在万物皆对象的JAVA中,先让我们看看Exception和Error的地位吧: