AngularJS路由系列(4)-- UI-Router的$state服務、路由事件、獲取路由參數

時間  2019-11-16
標籤 angularjs 路由 系列 router state 服務 事件 獲取 參數 欄目 AngularJS 简体版
原文   原文鏈接

 

本系列探尋AngularJS的路由機制，在WebStorm下開發。主要包括：

● UI-Router的$state服務
● UI-Router的路由事件
● UI-Router獲取路由參數


css

AngularJS路由系列包括：

一、AngularJS路由系列(1)--基本路由配置
二、AngularJS路由系列(2)--刷新、查看路由,路由事件和URL格式，獲取路由參數，路由的Resolve
三、AngularJS路由系列(3)-- UI-Router初體驗
四、AngularJS路由系列(4)-- UI-Router的$state服務、路由事件、獲取路由參數
五、AngularJS路由系列(5)-- UI-Router的路由約束、Resolve屬性、路由附加數據、路由進入退出事件
六、AngularJS路由系列(6)-- UI-Router的嵌套Statehtml

 

項目文件結構



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

node

UI-Router的$state服務

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

屬性：
● current
● params

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


■ index.html, 使用ui-srefjquery

 

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.jsjson

 

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

點擊"刷新"按鈕。bootstrap

 

 

可見，$state.reload()方法只刷新路由部分，與瀏覽器的刷新按鈕功能是不同的。

控制檯方面，$state.current表明的當前以下：promise

 

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錯誤app

 

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錯誤。

點擊首頁的"刷新"按鈕。

ide



點擊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

未完待續~~

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程