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
。 - 当我们触发路由的回调函数时,回调函数中有三个参数,这三个参数带有我们的路由信息。