（13）AngularJS 1.X 之ngRoute插件

2024-04-27 15:19:03

字體：大中小

來源：轉載

供稿：網友

引言路由控制頁面的跳轉1 主頁面控制頁面的跳轉在頁面后面添加div12 頁面替換自身位置借助location服務在頁面后面添加div1路由跳轉傳遞參數路由事件1 代碼實現2 結果分析

1.引言

AngularJS路由功能是一個純前端的解決方案，與我們熟悉的后臺路由不太一樣。后臺路由：通過不同的 URL 會路由到不同的控制器上(controller)，再渲染(render)到頁面(HTML)。AngularJS 的前端路由：需要提前對指定的(ng-app)，定義路由規則(routePRovider)，然后通過不同的 URL，告訴(ng-app)加載哪個頁面(HTML)，再渲染到視圖(ng-view)中。

AngularJS 的前端路由雖然 URL 輸入不一樣，頁面展示不一樣，其實完成的就是單頁視圖(ng-view)的局部刷新。

AngularJS路由的實現主要設計幾個方面：

ng-view指令決定數據顯示的位置使用$routeProvider供應商設置路由的配置$routeParams用于接受路由的參數路由的事件：$routeChangeStart,$routeChangeSuccess,$routeChangeError

接下來我們就來看一下上面說的幾個方面

2.路由控制頁面的跳轉

關于頁面的跳轉主要介紹兩個方面：

第一種類型的跳轉（主頁面加載頁面1，然后主頁面重新加載頁面2）

這里寫圖片描述

第二種類型的跳轉（主頁面加載頁面1，然后頁面1中跳轉到頁面2）

這里寫圖片描述

2.1 主頁面控制頁面的跳轉（在頁面后面添加`#!div1`）

首先加載angularjs函數庫<script src="js/angular.js"></script>加載路由插件<script src="js/angular-route.js"></script>設置angular作用域<html ng-app="myApp"><head> <script src="js/angular.js"></script> <script src="js/angular-route.js"></script> <meta charset="utf-8"> </head><body></body></html>配置我們的路由供應商var app = angular.module('myApp',['ngRoute']); app.config(['$routeProvider',function($routeProvider){ $routeProvider .when('/div1',{ templateUrl : "./div1.html", controller : 'div1Controller' }) .when('/div2',{ templateUrl : "./div2.html", controller : 'div2Controller' }) .otherwise({ redirectTo : '/index.html' }); }]);修改我們的控制器app.controller('div1Controller', function($scope) { $scope.name="第一個頁面"; }); app.controller('div2Controller', function($scope) { $scope.name="第二個頁面"; }); app.controller('MainCtrl', function($scope,$location) { $scope.changUrl1= function () { $location.path("/div1"); } $scope.changUrl2= function () { $location.path("/div2"); } });編寫我們的主頁面（路由會自動查找ng-view指令）<div ng-controller="MainCtrl"> <button ng-click="changUrl1()">跳轉到第一個頁面</button> <button ng-click="changUrl2()">跳轉到第二個頁面</button> </div><div ng-view></div>編寫div1頁面（下面是div1頁面全部內容）{{name}}編寫div2頁面（下面是div2頁面全部內容）{{name}}運行結果

這里寫圖片描述

2.2 頁面替換自身位置（借助`$location`服務，在頁面后面添加`#!div1`）

接下來我們看一下，代碼是如何實現的。

引入AngularJS函數庫（略）引入路由插件（略）設置AngularJS作用域（略）配置路由供應商 var app = angular.module('myApp',['ngRoute']); app.config(['$routeProvider',function($routeProvider){ $routeProvider .when('/div1',{ templateUrl : "div1.html", controller : 'div1Controller' }) .when('/div2',{ templateUrl : "div2.html", controller : 'div2Controller' }) .otherwise({ redirectTo : '/index.html' }); }]);設置我們的控制器 app.controller('div1Controller', function($scope,$location) { $scope.changUrl= function () { $location.path("/div2"); } }); app.controller('div2Controller', function($scope) { $scope.name="第二個頁面"; }); app.controller('MainCtrl', function($scope,$location) { $scope.changUrl= function () { $location.path("/div1"); } });設置我們主頁面（路由會自動查找ng-view指令）（主頁面的部分內容） <div ng-controller="MainCtrl"> <button ng-click="changUrl()">跳轉到第一個頁面</button> </div> <div ng-view></div>div1頁面（下面是div1頁面全部內容）<button ng-click="changUrl();">改變頁面</button>第一個頁面div2頁面（僅僅只有一個表達式）{{name}}

3.路由跳轉傳遞參數

在頁面跳轉的時候如果我們想要傳遞參數應該如何傳遞呢？在這里我們就來實現一下。

定義我們的路由（注意：路由中有一個參數id） var app = angular.module('myApp',['ngRoute']); app.config(['$routeProvider',function($routeProvider){ $routeProvider .when('/div1/:id',{ templateUrl : "./div1.html", controller : 'div1Controller' }) .otherwise({ redirectTo : '/index.html' }); }]);當我們跳轉的時候，傳遞參數，比如下面的代碼 app.controller('MainCtrl', function($scope,$location) { $scope.changUrl= function () { //在這里傳遞參數id=10 $location.path("/div1/10") } });在div1Controller獲取到參數（通過$routeParams參數） app.controller('div1Controller', function($routeParams) { alert($routeParams.id) });運行結果

這里寫圖片描述

上面我們只是傳遞一個參數。如果傳遞多個參數原理也是一樣的，我們看下面的代碼 app.config(['$routeProvider',function($routeProvider){ $routeProvider .when('/div1/:content/:id',{ templateUrl : "./div1.html", controller : 'div1Controller' }) .otherwise({ redirectTo : '/index.html' }); }]);跳轉頁面 app.controller('MainCtrl', function($scope,$location) { $scope.changUrl= function () { //在這里傳遞參數content=10,id=20 $location.path("/div1/10/20") } });接受參數 app.controller('div1Controller', function($routeParams) { alert($routeParams.id+":"+$routeParams.content) });運行結果

這里寫圖片描述

4.路由事件

在我們路由跳轉時是有事件的，分別為：$routeChangeStart,$routeChangeSuccess,$routeChangeError，我們可以給$rootScope綁定全局的路由事件的處理函數，全局的事件綁定我們可以通過run方法來綁定，接下來我們就來看一下代碼的實現。

4.1 代碼實現

通過run配置路徑事件var app = angular.module('myApp',['ngRoute']); app.run(function ($rootScope) { $rootScope.$on('$routeChangeStart',function(event,current,pre) { console.log("$routeChangeStart") console.log(event); console.log(current); console.log(pre); }); $rootScope.$on('$routeChangeSuccess',function(event,current,pre) { console.log("$routeChangeSuccess") console.log(event); console.log(current); console.log(pre); }); })配置我們的路由app.config(['$routeProvider',function($routeProvider){ $routeProvider .when('/div1',{ templateUrl : "./div1.html", controller : 'div1Controller' }) .otherwise({ redirectTo : '/index.html' }); }]);編寫我們的控制器 app.controller('MainCtrl', function($scope,$location) { $scope.changUrl= function () { //在這里傳遞參數id=10 $location.path("/div1") } }); app.controller('div1Controller', function($routeParams) { console.log("div1Controller") });編寫我們的html頁面 <div ng-controller="MainCtrl"> <button ng-click="changUrl()">跳轉頁面</button> </div> <div ng-view></div>點擊頁面運行結果

這里寫圖片描述