AngularJS路由系列(2)--重新整理、檢視路由,路由事件和URL格式，獲取路由引數，路由的Resolve

阿新 • • 發佈：2019-01-07

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

專案檔案結構

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

重新整理路由

有時候我們需要重新整理路由而不是整個頁面。該如何做呢？ngRoute這個module為我們準備了$route服務的reload()方法可以實現。

■ HomeController.js，新增重新整理路由功能，$route.reload

(function(){
    angular.module('app')
        .controller('HomeController',['dataService','notifier', '$route', '$log', HomeController]);
        
    function HomeController(dataService, notifier, $route, $log){
         
var vm = this;
        vm.message = 'Welcome to School Buddy!';
        
        //重新重新整理路由
        vm.refresh = function(){
            $route.reload();
        }
        
        dataService.getAllSchools()
            .then(function(schools){
                vm.allSchools = schools;
                vm.schollCount  
= schools.length;
            })
            .catch(showError);
            
            
        dataService.getAllClassrooms()
            .then(function(classroom){
                vm.allClassrooms = classrooms;
                vm.classroomCount = classrooms.length;
            })
            .catch(showError);
            
        dataService.getAllActivities()
            then(function(activities)){
                vm.allActivities = activities;
                vm.activityCount = activities.length;
            }
            ...
    }
}());

■ home.html, 新增重新整理路由的按鈕

當點選"重新整理"按鈕，重新整理的只是路由，不是整個頁面。

檢視當前路由以及所有路由

$route服務提供了current和routes屬性。

■ HomeController.js，檢視當前路由以及所有路由，使用$route的current和routes屬性

(function(){
    angular.module('app')
        .controller('HomeController',['dataService','notifier', '$route', '$log', HomeController]);
        
    function HomeController(dataService, notifier, $route, $log){
        var vm = this;
        vm.message = 'Welcome to School Buddy!';
        
        //重新重新整理路由
        vm.refresh = function(){
            $log.debug($route.current);
            $log.debut($route.routes);
            $route.reload();
        }
        
        dataService.getAllSchools()
            .then(function(schools){
                vm.allSchools = schools;
                vm.schollCount = schools.length;
            })
            .catch(showError);
            
            
        dataService.getAllClassrooms()
            .then(function(classroom){
                vm.allClassrooms = classrooms;
                vm.classroomCount = classrooms.length;
            })
            .catch(showError);
            
        dataService.getAllActivities()
            then(function(activities)){
                vm.allActivities = activities;
                vm.activityCount = activities.length;
            }
            ...
    }
}());

$route.current相關的如下：

$route.routes相關如下：

路由觸發事件

$route服務提供以下幾個事件：

● $routeChangeStart
● $routeChangesSuccess
● $routeChangeError
● $routeUpdate
使用$on來呼叫事件

這些事件是在路由發生變化、路由成功、路由異常、路由更新時被觸發。誰來做這些事件的載體呢？我們可以使用$on方法把這些事件註冊到$rootScope上去，這樣，在全域性範圍內觸發這些事件。

■ app.js，為$rootScope新增路由事件

(function(){
    var app = angular.module('app', ['ngRoute']);
    
    app.config(['$logProvider','$routeProvider', function($logProvider,$routeProvider){
        $logProvider.debugEnabled(true);
        
        $routeProvider
            .when('/',{
                controller: 'HomeController' ,
                controllerAs: 'home',
                templateUrl: '/app/templates/home.html'
            })
            .when('/schools',{
                controller: 'AllSchoolsController',
                controllerAs: 'schools',
                templateUrl: '/app/templates/allSchools.html',
                caseInsensitiveMatch: true
            })
            .when('/classrooms/:id',{
                controller: 'AllClassroomsController',
                controllerAs: 'classrooms',
                templateUrl: '/app/templates/allClassrooms.html',
                resolve:{
                    promise: function(){
                        throw 'error transitioning to classrooms';
                    }
                }
            })
            .when('/activities',{
                controller: 'AllActivitiesController',
                controllerAs: 'activities',
                templateUrl: '/app/templates/allActivities.html'
            })
            .otherwise('/');
    }]);
    
    app.run(['$rootScope', '$log', function($rootScope, $log){
        //通過$on為$rootScope新增路由事件
        $rootScope.$on('$routeChangeSuccess',function(event, current, previous){
            $log.debug('successfully changed routes');
            
            $log.debug(event);
            $log.debug(current);
            $log.debug(previous);
        });
        
        $rootScope.$on('$routeChangeError', function(event, current, previous, rejection){
            $log.debug('error changing routes');
            
            $log.debug(event);
            $log.debug(current);
            $log.debug(previous);
            $log.debug(rejection);
        });
    }]);
}());

以上，使用resolve在controller初始化之前定義一個promise方法故意丟擲一個異常。

在localhost:3000/#/下重新整理瀏覽器，即觸發了$rootScope的$routeChangeSuccess事件。

可見，event用來存放當前觸發事件；current用來存放當前路由，previous用來存放上一個路由。

清空控制檯記錄，點選導航欄上的Activities

previous顯示了上一個路由。

清空控制檯記錄，點選導航欄上的Classroom,即我們故意在該路由中設定了一個異常。

獲取路由引數

有時候我們需要獲取路由中的引數，ngRoute為我們提供了$routeParams服務。

.when('/classrooms/:id',{

})

在控制器中大致這樣：

function ClassroomController($routeParams){
    var classroomID = $routeParams.id;
    //使用classroomID獲取相關Classroom
}

■ app.js，針對Classroom新增一個帶引數的路由

(function(){
    var app = angular.module('app', ['ngRoute']);
    
    app.config(['$logProvider','$routeProvider', function($logProvider,$routeProvider){
        $logProvider.debugEnabled(true);
        
        $routeProvider
            .when('/',{
                controller: 'HomeController' ,
                controllerAs: 'home',
                templateUrl: '/app/templates/home.html'
            })
            .when('/schools',{
                controller: 'AllSchoolsController',
                controllerAs: 'schools',
                templateUrl: '/app/templates/allSchools.html',
                caseInsensitiveMatch: true
            })
            .when('/classrooms/:id',{
                controller: 'AllClassroomsController',
                controllerAs: 'classrooms',
                templateUrl: '/app/templates/allClassrooms.html'
            })
            .when('/activities',{
                controller: 'AllActivitiesController',
                controllerAs: 'activities',
                templateUrl: '/app/templates/allActivities.html'
            })
            .when('/classrooms/:id',{
                templateUrl: '/app/templates/classroom.html',
                controller: 'ClassroomController',
                controllerAs: 'classroom'
            })
            .otherwise('/');
    }]);
    
    app.run(['$rootScope', '$log', function($rootScope, $log){
        //通過$on為$rootScope新增路由事件
        $rootScope.$on('$routeChangeSuccess',function(event, current, previous){
            $log.debug('successfully changed routes');
            
            $log.debug(event);
            $log.debug(current);
            $log.debug(previous);
        });
        
        $rootScope.$on('$routeChangeError', function(event, current, previous, rejection){
            $log.debug('error changing routes');
            
            $log.debug(event);
            $log.debug(current);
            $log.debug(previous);
            $log.debug(rejection);
        });
    }]);
}());

■ ClassroomController.js

(function(){
    angular.module('app',[])
        .controller('ClassroomController', ['dataService','notifier', '$routeParams', ClassroomController]);
        
    function ClassroomController(dataService, notifier, $routeParams){
        var vm = this;
        
        dataService.getClassroom($routeParams.id)
            .then(function(classroom){
                vm.currentClassroom = classroom;
            })
            .catch(showError);
            
        function showError(message){
            notifier.error(message);
        }
    }
}());

在瀏覽器中輸入localhost:3000/#/classrooms/1

■ app.js，針對Classroom新增帶更多引數的路由

(function(){
    var app = angular.module('app', ['ngRoute']);
    
    app.config(['$logProvider','$routeProvider', function($logProvider,$routeProvider){
        $logProvider.debugEnabled(true);
        
        $routeProvider
            .when('/',{
                controller: 'HomeController' ,
                controllerAs: 'home',
                templateUrl: '/app/templates/home.html'
            })
            .when('/schools',{
                controller: 'AllSchoolsController',
                controllerAs: 'schools',
                templateUrl: '/app/templates/allSchools.html',
                caseInsensitiveMatch: true
            })
            .when('/classrooms/:id',{
                controller: 'AllClassroomsController',
                controllerAs: 'classrooms',
                templateUrl: '/app/templates/allClassrooms.html'
            })
            .when('/activities',{
                controller: 'AllActivitiesController',
                controllerAs: 'activities',
                templateUrl: '/app/templates/allActivities.html'
            })
            .when('/classrooms/:id',{
                templateUrl: '/app/templates/classroom.html',
                controller: 'ClassroomController',
                controllerAs: 'classroom'
            })
            .when('/classroom/:id/detail/:month?',{
                templateUrl: '/app/templates/classroomDetail.html',
                controller: 'ClassroomController',
                controllerAs: 'classroom'
            })
            .otherwise('/');
    }]);
    
    app.run(['$rootScope', '$log', function($rootScope, $log){
        //通過$on為$rootScope新增路由事件
        $rootScope.$on('$routeChangeSuccess',function(event, current, previous){
            $log.debug('successfully changed routes');
            
            $log.debug(event);
            $log.debug(current);
            $log.debug(previous);
        });
        
        $rootScope.$on('$routeChangeError', function(event, current, previous, rejection){
            $log.debug('error changing routes');
            
            $log.debug(event);
            $log.debug(current);
            $log.debug(previous);
            $log.debug(rejection);
        });
    }]);
}());

■ ClassroomController.js

(function(){
    angular.module('app',[])
        .controller('ClassroomController', ['dataService','notifier', '$routeParams', ClassroomController]);
        
    function ClassroomController(dataService, notifier, $routeParams){
        var vm = this;
        
        vm.month = $routeParams.month;
        
        dataService.getClassroom($routeParams.id)
            .then(function(classroom){
                vm.currentClassroom = classroom;
                
                //判斷路由中是否有month這個引數
                if($routeParams.month){
                    //集合或陣列是否為空
                    if(classroom.activities.length > 0){
                        vm.timePeriod = dataService.getMonthName($routeParams.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', '$location', AllActivitiesController]);
        
    function AllActivitiesController(dataService, notifier, $location){
        var vm = this;
        
        vm.seletedMonth = 1;
        
        
        //搜尋過濾
        vm.search = function(){
            var classroom_detail_url = '/classrooms/' + vm.selectedClassroom.id + '/detail/' +vm.seletedMonth;
            $location.url(classroom_detail_url);
        };
        
        dataService.getAllClassrooms()
            .then(function(classrooms){
                vm.allClassrooms = classroom;
                vm.seletedClassroom = classrooms[0];
            })
            .catch(showError);
            
        dataService.getAllActivities()
            .then(function(activities)){
                vm.allActivities = activities;
            }
            .catch(showError);
            
        function showError(message){
            notifier.error(message);
        }
    }
}());

可見，使用$location.url(route)方法可以輕鬆轉到任何路由。

路由的Resolve屬性

在配置路由的時候有一個Resolve屬性，接受一個Object物件，物件的每一個屬性接收一個函式，resolve中的事件發生在controller初始化之前，最終也將被注入到controller中。

.when('/activities', {
    controller: 'AllActivitiesController',
    controllerAd: 'activities',
    templateUrl: '/app/tempaltes/allActivities.html',
    resolve: {
        activities: function(dataService){
            return dataService.getAllActivities();
        }
    }
})

以上，dataService.getAllActivities方法返回一個promise,必須要被resolved之後才會轉到相應的檢視頁。接著，activities可以被注入到AllActivitiesController中。

■ app.js, 在/activities路由下加上resolve屬性

(function(){
    var app = angular.module('app', ['ngRoute']);
    
    app.config(['$logProvider','$routeProvider', function($logProvider,$routeProvider){
        $logProvider.debugEnabled(true);
        
        $routeProvider
            .when('/',{
                controller: 'HomeController' ,
                controllerAs: 'home',
                templateUrl: '/app/templates/home.html'
            })
            .when('/schools',{
                controller: 'AllSchoolsController',
                controllerAs: 'schools',
                templateUrl: '/app/templates/allSchools.html',
                caseInsensitiveMatch: true
            })
            .when('/classrooms/:id',{
                controller: 'AllClassroomsController',
                controllerAs: 'classrooms',
                templateUrl: '/app/templates/allClassrooms.html'
            })
            .when('/activities',{
                controller: 'AllActivitiesController',
                controllerAs: 'activities',
                templateUrl: '/app/templates/allActivities.html',
                resolve: {
                    activities: function(dataService){
                        return dataService.getAllActivites();
                    }
                }
            })
            .when('/classrooms/:id',{
                templateUrl: '/app/templates/classroom.html',
                controller: 'ClassroomController',
                controllerAs: 'classroom'
            })
            .when('/classroom/:id/detail/:month?',{
                templateUrl: '/app/templates/classroomDetail.html',
                controller: 'ClassroomController',
                controllerAs: 'classroom'
            })
            .otherwise('/');
    }]);
    
    app.run(['$rootScope', '$log', function($rootScope, $log){
        //通過$on為$rootScope新增路由事件
        $rootScope.$on('$routeChangeSuccess',function(event, current, previous){
            $log.debug('successfully changed routes');
            
            $log.debug(event);
            $log.debug(current);
            $log.debug(previous);
        });
        
        $rootScope.$on('$routeChangeError', function(event, current, previous, rejection){
            $log.debug('error changing routes');
            
            $log.debug(event);
            $log.debug(current);
            $log.debug(previous);
            $log.debug(rejection);
        });
    }]);
}());

■ AllActivitiesController.js,把路由resolve屬性中的activities注入到控制器中來

(function(){
    angular.module('app')
        .controller('AllActivitiesController', ['dataService', 'notifier', '$location', 'activities', AllActivitiesController]);
        
    function AllActivitiesController(dataService, notifier, $location, activities){
        var vm = this;
        
        vm.seletedMonth = 1;
        
        //這裡的activites中路由的resolve中來
        //原先的getAllActivities方法就不需要存在了
        vm.allActivities = actvities;
        
        
        //搜尋過濾
        vm.search = function(){
            var classroom_detail_url = '/classrooms/' + vm.selectedClassroom.id + '/detail/' +vm.seletedMonth;
            $location.url(classroom_detail_url);
        };
        
        dataService.getAllClassrooms()
            .then(function(classrooms){
                vm.allClassrooms = classroom;
                vm.seletedClassroom = classrooms[0];
            })
            .catch(showError);
            
            
        function showError(message){
            notifier.error(message);
        }
    }
}());

使用resolve的好處是：當檢視頁向$scope要資料的時候，由於在controller例項化之前已經準備好了資料，所以頁面延遲時間大大縮短。

路由URL格式

● Hashbang格式: localhost:3000/#/classrooms/1/detail/12，預設的就是這種格式
● HTML5格式：localhost:3000/classrooms/1/detail/12，需要使用$locationProvider配置，如果使用這種格式，但瀏覽器不支援HTML5的歷史API，Angular就會使用Hashbang格式。

■ app.js, 引用$locationProvider配置自定義url格式

(function(){
    var app = angular.module('app', ['ngRoute']);
    
    app.config(['$logProvider','$routeProvider', '$locationProvider', function($logProvider,$routeProvider, $locationProvider){
        $logProvider.debugEnabled(true);
        
        //使用自定義url格式
        $locationProvider.hasPrefix('!');
        
        $routeProvider
            .when('/',{
                controller: 'HomeController' ,
                controllerAs: 'home',
                templateUrl: '/app/templates/home.html'
            })
            .when('/schools',{
                controller: 'AllSchoolsController',
                controllerAs: 'schools',
                templateUrl: '/app/templates/allSchools.html',
                caseInsensitiveMatch: true
            })
            .when('/classrooms/:id',{
                controller: 'AllClassroomsController',
                controllerAs: 'classrooms',
                templateUrl: '/app/templates/allClassrooms.html'
            })
            .when('/activities',{
                controller: 'AllActivitiesController',
                controllerAs: 'activities',
                templateUrl: '/app/templates/allActivities.html',
                resolve: {
                    activities: function(dataService){
                        return dataService.getAllActivites();
                    }
                }
            })
            .when('/classrooms/:id',{
                templateUrl: '/app/templates/classroom.html',
                controller: 'ClassroomController',
                controllerAs: 'classroom'
            })
            .when('/classroom/:id/detail/:month?',{
                templateUrl: '/app/templates/classroomDetail.html',
                controller: 'ClassroomController',
                controllerAs: 'classroom'
            })
            .otherwise('/');
    }]);
    
    app.run(['$rootScope', '$log', function($rootScope, $log){
        //通過$on為$rootScope新增路由事件
        $rootScope.$on('$routeChangeSuccess',function(event, current, previous){
            $log.debug('successfully changed routes');
            
            $log.debug(event);
            $log.debug(current);
            $log.debug(previous);
        });
        
        $rootScope.$on('$routeChangeError', function(event, current, previous, rejection){
            $log.debug('error changing routes');
            
            $log.debug(event);
            $log.debug(current);
            $log.debug(previous);
            $log.debug(rejection);
        });
    }]);
}());

■ index.html,為了配合以上的自定義url格式需要做些改變

<a href="#!/">School Buddy</a>

<a href="#!/schools">Schools</a>
<a href="#!/classrooms">Classrooms</a>
<a href="#!/activities">Activities</a>

AngularJS路由系列(2)--重新整理、檢視路由,路由事件和URL格式，獲取路由引數，路由的Resolve

專案檔案結構

重新整理路由

檢視當前路由以及所有路由

路由觸發事件

獲取路由引數

路由的Resolve屬性

路由URL格式

AngularJS路由系列(2)--重新整理、檢視路由,路由事件和URL格式，獲取路由引數，路由的Resolve

回歸模型效果評估系列2-MAE、MSE、RMSE、MAPE(MAPD)

c/c++ linux epoll系列2 利用epoll_wait檢視是否可以送信

從零寫分散式RPC框架系列 2.0 （3）RPC-Server和RPC-Client模組改造

快速重新整理物化檢視有with rowid和with primary key兩種，建立時該如何選擇？

【 D3.js 進階系列 — 2.1 】力學圖的事件 + 頂點的固定

zookeeper學習系列：三、利用zookeeper做選舉和鎖

讓HTML標籤、DIV、SPAN擁有focus事件和blur事件，聚焦和失焦

redis 全域性命令檢視所有的鍵，刪除鍵，檢查鍵是否存在，獲取過期時間，鍵的資料結構型別

jquery_trigger() 2個用法（自定義事件和觸發2個作用）

1.3程式設計實現從鍵盤依次輸入姓名（字串）、年齡（整型）、性別（字元）和成績（浮點型），然後依次顯示上述內容

java讀取資料庫指定表，生成bean，獲取主鍵，自動生成get、set方法

Mysql高手系列 - 第8篇：詳解排序和分頁(order by & limit)，及存在的坑

Ngnix技術研究系列2-基於Redis實現動態路由

flask一、配置引數、路由、檢視、正則匹配路由、異常捕獲、請求鉤子、cookie、session描述結構圖和程式碼

Django個人部落格開發之高階優化路由、檢視

Rest Framework第三天-解析器執行流程、檢視層、路由

angular4、angular4.0從入門到實戰打造股票管理網站 1.子路由 2. 路由傳參三種方式 3. 路由守衛

1.關於laravel框架中的路由、控制器、檢視、模型

Django--路由層、檢視層、模版層

AngularJS路由系列(2)--重新整理、檢視路由,路由事件和URL格式，獲取路由引數，路由的Resolve

專案檔案結構

重新整理路由

檢視當前路由以及所有路由

路由觸發事件

獲取路由引數

路由的Resolve屬性

路由URL格式

相關推薦