本系列探寻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. 【Linux系统编程应用】Linux音频编程基础（一）【转】

    转自:https://blog.csdn.net/dengjin20104042056/article/details/52435290 一.数字音频 音频信号是一种连续变化的模拟信号,但计算机只能处 ...

  2. linux网络编程--Circular Buffer(Ring Buffer) 环形缓冲区的设计与实现【转】

    转自:https://blog.csdn.net/yusiguyuan/article/details/18368095 1. 应用场景 网络编程中有这样一种场景:需要应用程序代码一边从TCP/IP协 ...

  3. wordpress配置通过IP直接访问及apache的配置

    wordpress配置通过IP直接访问 环境: 操作系统:centos6.5 yum安装lamp环境: yum -y install mysql mysql-server php php-mysql ...

  4. css中width和padding-top实现正方形

    .div{ width: 100%; height: 0; padding-top: 100% } 这个时候,padding-top的值与width相等,所以可以让div宽高一样,值为width的值

  5. DOM文档对象模型简介

    DOM简介     DOM是W3C(万维网联盟)的标准 "W3C文档对象模型DOM是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容.结构.样式".W3C DOM ...

  6. C# 数据库数据动态插入（反射）

    /// <summary> /// 提供将MySqlDataReader转成T类型的扩展方法 /// </summary> public static class MySqlD ...

  7. 《深入分析JavaWeb技术内幕》学习笔记

    第一章 深入Web请求过程 1.1 B/S网站架构概述 HTTP协议采用无状态的短连接的通信方式.通常一次请求就完成一次数据交互,通常也对应一个业务逻辑. 当在浏览器里输入一个URL,首先会请求DNS ...

  8. Connect to DB2 database in eclipse via jdbc

    https://stackoverflow.com/questions/23801841/connect-to-db2-database-in-eclipse-via-jdbc

  9. 当mysql 遇到 ctrl+c

    目的 为了理解MySQL在执行大SQL时,对执行CTRL+C产生的疑惑,本文通过实验测试和源码分析两个方面,对MySQL处理CTRL+C的详细过程进行分析和讲解,从而解除DBA及开发人员对CTRL+C ...

  10. HDU - 1525

    题意:给你两个数,a,b,有两个人轮流进行一次操作, 每次操作可以将大的数减去k倍的小的数,最后不能操作的人输了,问你谁赢了. 思路:我们可以用辗转相除法求出对于每一个状态可以改变几次,这样问题就变成 ...