本系列探寻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问题解决

    1. MySQL错误日志里出现: 140331 10:08:18 [ERROR] Error reading master configuration 140331 10:08:18 [ERROR] ...

  2. ssh远程免密登录Linux

    一.在本地机器创建公钥,一路回车即可 ssh-keygen -t rsa 二.发送公钥到远程服务器端 如果是默认端口:scp id_rsa.pub user@ip:~/.shh 如果远程服务器设置的是 ...

  3. mysql innodb 行级锁升级

    创建数据表test,表定义如下所示: CREATE TABLE `test` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(20) NO ...

  4. php生成随机数

    生成1-10之间的随机数,不重复. 方法一:用shuffle函数. <?php $arr=range(1,10); shuffle($arr); foreach($arr as $values) ...

  5. Ubuntu 下 vi 输入方向键会变成 ABCD 的解决方法

    Ubuntu 下 vi 输入方向键会变成 ABCD,这是 Ubuntu 预装的是 vim tiny 版本,安装 vim full 版本即可解决. 先卸载vim-tiny: $ sudo apt-get ...

  6. hdu 5011 nim博弈 （2014西安网赛E题）

    n堆石子,每次可以选一堆取走至少一个,之后你可以不操作或者把该堆石子分成两堆,每堆至少一个,和还是原来(取完石子后)的石子个数. Sample Input1121 131 2 3 Sample Out ...

  7. python 单变量线性回归

      单变量线性回归(Linear Regression with One Variable)¶ In [54]: #初始化工作 import random import numpy as np imp ...

  8. 【BZOJ】4128: Matrix

    题解 学习一下矩阵求逆 就是我们考虑这个矩阵 \(AA^{-1} = I\) 我们相当于让\(A\)乘上一个矩阵,变成\(I\) 我们可以利用初等行变换(只能应用初等行变换,或只应用初等列变换) 分三 ...

  9. Orchard学习 02、orchard 路由

    Orchard对mvc路由重新做了包装,重写了asp.net的路由模块 一.路由模块类图 1.路由 Descriptor RouteDescriptor是对常规mvc路由的包装类,它的Route属性就 ...

  10. 【Java】 大话数据结构(13) 查找算法(4) （散列表（哈希表））

    本文根据<大话数据结构>一书,实现了Java版的一个简单的散列表(哈希表). 基本概念 对关键字key,将其值存放在f(key)的存储位置上.由此,在查找时不需比较,只需计算出f(key) ...