AngularJs(五)：路由

来源：互联网发布：linux查看oracle实例编辑：程序博客网时间：2024/06/06 18:54

包括：
一.ngRoute的使用过程

二.$routeParams，$location服务，路由事件，$routeChangeSuccess介绍

三.简单的ngRoute的Demo

四.ui-route介绍和使用

一.ngRoute的使用过程

1.引入angular-route.js

2.建立模块，把ngRoute模块当做依赖加入进来。例如：

angular.module('myApp',['ngRoute']);
3.在jsp上创建布局模板例如：<div ng-view></div>

4.可以使用AngularJs提供的when和otherwise来两个方法来定义路由。用config函数在特定的模块或应用中定义路由，例如：

angular.module('myApp',[])

.config(['$routeProvider'],function($routeProvider){

//在这里定义路由

})

现在就可以用when方法来定义一个特定的路由
angular.module('myApp',[])
.config(['$routeProvider'],function($routeProvider){

$routeProvider

.when('/',{

templateUrl:'view/home.html',
controller:HomeController

})

when里面的第一个参数是路由路径，它会和$localtion.path进行匹配。$localtion.path也就是当前的URL路径。我们可以在URL中存储参数，参数需要冒号开头。第二个参数是配置对象，包括有controller，template，templateUrl,resolve,redirectTo和reloadOnSearch。

otherwise方法会在没有任何理由匹配的时候被调用，我们可以用他来默认设置跳转到'/'的路由。

二.$routeParams，$location服务，路由事件，$routeChangeSuccess介绍

$routeParams

如果我们在路由参数中加上：，AngularJs就会把它解析出来并且传递给$routeParams。比如：

路由为：/idnex/:name

一个URL为 /index/a

那么AngularJs会在$routeParams中添加一个名为name的键，值就是a。注意：控制器中想要访问这些变量，需要把$routeParams注入到控制器。

$location服务

AngularJs提供了一个服务用以解析地址栏中的URL。当应用需要在内部进行跳转的时候是使用$location服务的最好的场景。比如用户注册后，修改或者登录后进行的跳转。

$location没有刷新整个页面的能力。如果需要刷新整个页面，需要使用$window.location对象。例如：$window.location.href="/XX/XX";

1.path()：获取页面的当前路径。$localtion.path('/')修改当前路径并且跳到另一个URL中。

2.replace()：用户点击后不能点击其他按钮。

3.host()：获取Url中的主机

4.port()：获取Url中的端口号

5.protocal()：获取Url中的协议

6.url()：获取当前页面的Url

路由模式：

路由模式决定你的站点的Url长成什么样子

有标签模式和HTML5模式：

标签模式不做介绍。对于HTML5模式：

和普通的URL没有什么区别

路由事件：
$route服务在路由过程中的每个阶段都会触发不同的事件，可以为这些不同的路由事件设置监听器并做出响应。这个功能对于控制不同的路由事件，以及探测用户的登录和授权状态等场景是非常有用的。

我们需要给路由设置时间监听器，用$rootScope来监听这些事件。

1.$routeChangeStart

AngularJs在路由变化之前会广播$routeChangeStart事件，在这一步中，路由服务会加载路由变化所需要的依赖。例如:

angular.module('myApp',[])

.run(['$rootScope','$location',function($rootScope,$location){

$rootScope.$on('$routeChangeStart',function(evt,next,current){
});

}])

$routeChangeStart事件带有2个参数：

1.将要导航到的下一个URL。

2.路由变化前的URL。

$routeChangeSuccess

AngularJs会在路由的依赖被加载后广播$routeChangeSuccess事件

angular.module('myApp',[])

.run(['$rootScope','$location',function($rootScope,$location){

$rootScope.$on('$routeChangeSuccess',function(evt,next,previous){
})

}])

$routeChangeSuccess带有3个参数，

原始的AngularJs evt参数。

用户当前的路由。

上一个路由。
ps:胖客户端应用：功能丰富的客户端应用，包括数据库什么的。

三.简单的ngRoute的Demo

一个最简单的例子：

app.js:
var MyApp = angular.module('MyApp',['ngRoute','ngResource']);

MyApp.config(['$routeProvider',function($routeProvider){

$routeProvider.when('/abc',{

templateurl:'pages/home.html'

})
$routeProvider.otherwise({redirectTo:'/abc'});

}])

index.jsp

<html>

<body>

aa
<div ng-view></div>

</body>
</html>

home.html:

abc

四.ui-route介绍和使用

ui-route的使用：

1.引入angular-ui-route.js文件

2.将UI-Route作为Web应用的依赖，注入到主程序中。例如：
angular.module('MyApp',['ui-router']);

与集成的ngRoute服务不同的是，UI-Router可以将视图嵌套，与传统的ng-view不同，在ngRoute里需要使用ui-view服务。例如:

要定义一个；路由，与传统方式一样：使用.config方式。但是使用的不是$routeProvider，而是$stateProvider。例如：

.config(function($stateProvider,$urlRouteProvider){

$stateProvider.state('/start',{

url:'/start',
template:'partials/start.html',

})

URL选项：

例如：$stateProvider.state('index',{

url:'/index/:id',

template:'<div>aaa</div>',
controller:

})

那么就是说，当url为url:'/index/:id',这种形式的话，就会响应该路由，当前的url就会变为index

0 0