包括:
一.ngRoute的使用过程
一.ngRoute的使用过程
二.$routeParams,$location服务,路由事件,$routeChangeSuccess介绍
三.简单的ngRoute的Demo
四.ui-route介绍和使用
1.引入angular-route.js
2.建立模块,把ngRoute模块当做依赖加入进来。例如:
angular.module('myApp',['ngRoute']);
3.在jsp上创建布局模板 例如:<div ng-view></div>
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){
angular.module('myApp',[])
.config(['$routeProvider'],function($routeProvider){
$routeProvider
})
.when('/',{
templateUrl:'view/home.html',
controller:HomeController
controller:HomeController
})
when里面的第一个参数是路由路径,它会和$localtion.path进行匹配。$localtion.path也就是当前的URL路径。我们可以在URL中存储参数,参数需要冒号开头。第二个参数是配置对象,包括有controller,template,templateUrl,resolve,redirectTo和reloadOnSearch。
otherwise方法会在没有任何理由匹配的时候被调用,我们可以用他来默认设置跳转到'/'的路由。
二.$routeParams,$location服务,路由事件,$routeChangeSuccess介绍
$routeParams
如果我们在路由参数中加上:,AngularJs就会把它解析出来并且传递给$routeParams。比如:
路由为:/idnex/:name
三.简单的ngRoute的Demo
一个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服务在路由过程中的每个阶段都会触发不同的事件,可以为这些不同的路由事件设置监听器并做出响应。这个功能对于控制不同的路由事件,以及探测用户的登录和授权状态等场景是非常有用的。
$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:胖客户端应用:功能丰富的客户端应用,包括数据库什么的。
ps:胖客户端应用:功能丰富的客户端应用,包括数据库什么的。
三.简单的ngRoute的Demo
一个最简单的例子:
app.js:
var MyApp = angular.module('MyApp',['ngRoute','ngResource']);
var MyApp = angular.module('MyApp',['ngRoute','ngResource']);
MyApp.config(['$routeProvider',function($routeProvider){
$routeProvider.when('/abc',{
templateurl:'pages/home.html'
})
$routeProvider.otherwise({redirectTo:'/abc'});
$routeProvider.otherwise({redirectTo:'/abc'});
}])
index.jsp
<html>
<head>
</head>
</head>
<body>
aa
<div ng-view></div>
bb
<div ng-view></div>
</body>
</html>
</html>
home.html:
abc
四.ui-route介绍和使用
ui-route的使用:
1.引入angular-ui-route.js文件
2.将UI-Route作为Web应用的依赖,注入到主程序中。例如:
angular.module('MyApp',['ui-router']);
angular.module('MyApp',['ui-router']);
与集成的ngRoute服务不同的是,UI-Router可以将视图嵌套,与传统的ng-view不同,在ngRoute里需要使用ui-view服务。例如:
<div ui-view></div>
要定义一个;路由,与传统方式一样:使用.config方式。但是使用的不是$routeProvider,而是$stateProvider。例如:
.config(function($stateProvider,$urlRouteProvider){
$stateProvider.state('/start',{
})
})
url:'/start',
template:'partials/start.html',
template:'partials/start.html',
URL选项:
例如:$stateProvider.state('index',{
那么就是说,当url为url:'/index/:id',这种形式的话,就会响应该路由,当前的url就会变为index
url:'/index/:id',
})
template:'<div>aaa</div>',
controller:
controller: