(13)AngularJS 1.X 之ngRoute插件

2/10/2017来源:心得技巧人气:1402

引言 路由控制页面的跳转 1 主页面控制页面的跳转在页面后面添加div1 2 页面替换自身位置借助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> 点击页面运行结果

这里写图片描述

4.2 结果分析

通过上面的运行结果,我们可以知道:

事件和控制器的运行熟悉:$routeChangeStart,然后$routeChangeSuccess,最后运行div1Controller。 当我们触发路由的回调函数时,回调函数中有三个参数,这三个参数带有我们的路由信息。