（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>点击页面运行结果

这里写图片描述