本系列探寻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. MVC控制器使用总结

    一.新手入门 1.特性 [AuthorizeFilter]  用于权限过滤 [HttpGet] [HttpPost] 2.参数 GET获取 [HttpGet] ) { return Json(&quo ...

  2. 无效GRANT语句导致主从同步断开

    最近遇到一个主从同步断开的案例,是由于在执行GRANT语句时,授权对象给错了,也就可以理解为无效的GRANT语句,我们收到slave库同步断开的报警信息,然后去找问题,发现binlog有报错,报错提示 ...

  3. 自己动手破解rar密码-ruby脚本实现

    破解密码,上策是社工的方式,下策则是暴力破解了.这里使用暴力破解,字典文件放在txt中:通过调用winrar的相关参数进行操作.经过测试,当字典中密码为100个时,破解耗时8秒(个人配置:i5-321 ...

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

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

  5. application/json 四种常见的 POST 提交数据方式

    四种常见的 POST 提交数据方式   HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS.GET.HEAD.POST.PUT.DELETE.TRACE.CONNECT 这几种.其中 ...

  6. shell中信号处理

    参考: Shell 脚本中信号处理实践 Linux Shell 的信号 trap 功能你必须知道的细节   在 unix 里,可能发生的每一种类型的事件都是由一个独立的信号来描述,每一个信号都是一个小 ...

  7. NET WebAPi之断点续传下载（下）

    NET WebAPi之断点续传下载(下) 前言 上一篇我们穿插了C#的内容,本篇我们继续来讲讲webapi中断点续传的其他情况以及利用webclient来实现断点续传,至此关于webapi断点续传下载 ...

  8. 【LOJ】#2081. 「JSOI2016」反质数序列

    题解 我居然都没反应过来二分图内选集合两两不能有边是最大独立集了 我退役吧 显然连边只能在奇数和偶数之间,然后二分图求最大独立集是节点数-最大匹配数 啊当然还有对于1的话只能留一个1 代码 #incl ...

  9. L3-004 肿瘤诊断 dfs bfs

    在诊断肿瘤疾病时,计算肿瘤体积是很重要的一环.给定病灶扫描切片中标注出的疑似肿瘤区域,请你计算肿瘤的体积. 输入格式: 输入第一行给出4个正整数:M.N.L.T,其中M和N是每张切片的尺寸(即每张切片 ...

  10. Python3之turtle模块的使用

    Python3之turtle模块的使用     直接扣代码就行: import turtle as t t.pensize(4) t.hideturtle() t.colormode(255) t.c ...