angular 系列八 ui-router详细介绍及ngRoute工具区别

我们了解 angular.js 是一种富客户端单页面应用,所以要在一个页面呈现不同的视图,路由起到了至关重要的作用.@H_502_3@

@H_502_3@

angular.js 为我们封装好了一个路由工具ngRoute,它是一种靠url改变去驱动视图.@H_502_3@

angularUI 也为我们封装了一个独立的路由模块 ui-router,它是一种靠状态 state 来驱动视图.@H_502_3@

后者有什么优势:一个页面可以嵌套多个视图,多个视图去控制某一个视图等.@H_502_3@

@H_502_3@

UI-Router是Angular-UI提供的客户端路由框架，它解决了原生的ng-route的很多不足：@H_502_3@

视图不能嵌套。这意味着$scope会发生不必要的重新载入。
同一URL下不支持多个视图。这一需求也是常见的：我们希望导航栏用一个视图（和相应的控制器）、内容部分用另一个视图（和相应的控制器）。

UI-Router提出了$state的概念。一个$state是一个当前导航和UI的状态，每个$state需要绑定一个URL Pattern。在控制器和模板中，通过改变$state来进行URL的跳转和路由。@H_502_3@

@H_502_3@

ngRoute@H_502_3@

使用时需要ui中用ng-view指令指定如:<divng-view></div>@H_502_3@

url改变此区域会被刷新.@H_502_3@

首先要配置注册 ngRoute@H_502_3@

varapp = angular.module(“YIJIEBUYI",['ngRoute']); app.config(function($locationProvider) {@H_502_3@

@H_502_3@

});@H_502_3@

@H_502_3@

路由设置:@H_502_3@

angular.module(‘YIJIEBUYI').config(['$urlRouterProvider',@H_502_3@

function($urlRouterProvider) {@H_502_3@

$urlRouterProvider@H_502_3@

.when(“/blog",“/blog/index")@H_502_3@

.otherwise("/blog/index");@H_502_3@

@H_502_3@

ui-router@H_502_3@

使用时需要ui中用ui-view指令指定如:<div ui-view></div>@H_502_3@

需要下载 ui-route 文件.@H_502_3@

首先配置注册 ui-route@H_502_3@

varapp=angular.module(“YIJIEBUYI",[‘ui.router']);
app.config(function(){
//路由配置
});

路由设置:@H_502_3@

angular.module(‘YIJIEBUYI').config(['$stateProvider',function($stateProvider){
$stateProvider.state('blog',{
url:'/blog',views:{
'container':{templateUrl:'templates/blog/layout.html'}
}
}).state('blog.index',{
url:'/index',views:{
'container':{templaterUrl:'templates/blog/index.html'}
}
})
});

ngRoute 和 ui-route 相比:@H_502_3@

$route —> $state@H_502_3@

$routeParams —> $stateParams@H_502_3@

$routeProvider —> $stateProvider@H_502_3@

<div ng-view></div> —> <div ui-view></div>@H_502_3@

@H_502_3@

设置路由相比:@H_502_3@

$urlRouterProvider.otherwise('/blog/index'); 设置默认路由还需要使用ngRoute来设置.@H_502_3@

@H_502_3@

$stateProvider.state(‘blog.index',{url:’….’,views:{模板路径}); 见上面设置信息.@H_502_3@

@H_502_3@

ui-route路由控制器中既使用了ngRoute 也使用了 ui-route,就是因为@H_502_3@

设置默认页还是要用到 ngRoute工具.用于管理未知的URL（统一跳转到某处）。@H_502_3@

二是监听浏览器地址栏URL的变化，重定向到路由定义的状态中。
@H_502_3@

@H_502_3@

app.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider) {
    $urlRouterProvider
        .when('/legacy-route',{
            redirectTo: '/'
        });
}]);

总之，$urlRouterProvider让我们处理状态机抽象的$stateProvider没有检测到的情况。
@H_502_3@

下面详细说下 ui-route 使用:@H_502_3@

(1)父路由,子路由@H_502_3@

ui-route子路由可以继承父路由,也就是说 state 设置可以嵌套,通过名称中的.(点)来区分层次.@H_502_3@

如下面路由:@H_502_3@

 blog 对应的路由是 /blog@H_502_3@ 
 blog.index 对应的路由就是 /blog/index (前面的/blog就是从父view中继承过来的)@H_502_3@ 
 blog.index 就是 blog的子view@H_502_3@ 
(2)指定响应的view@H_502_3@ 
<divui-view="view1"></div>
<divui-view="view2"></div> 
.state("blog.detail"),{
url:”/:blogID",views:{
view1:{
templateUrl:"view1.html"
},view2:{
templateUrl:"view1.html"
}
}
} 
 
 @H_502_3@ 
(3) state 配置参数@H_502_3@ 
 url：默认相对路径（以^开头的是绝对路径）@H_502_3@ 
 views：每个子视图可以包含自己的模板、控制器和预载入数据。(后2项选填,控制器可以在view中绑定)@H_502_3@ 
 abstract：抽象模板不能被激活@H_502_3@ 
 template:HTML字符串或者返回HTML字符串的函数@H_502_3@ 
 如:@H_502_3@ 
$stateProvider.state(‘blog.detail',{
template:'<h1>MyBlog</h1>'
}) 
 templateUrl:HTML模板的路径或者返回HTML模板路径的函数@H_502_3@ 
 
 @H_502_3@ 
 templateProvider：返回HTML字符串的函数@H_502_3@ 
 如:通过函数返回html@H_502_3@ 
 controller、controllerProvider：指定任何已经被注册的控制器或者一个作为控制器的函数@H_502_3@ 
 resolve：在路由到达前预载入一系列依赖或者数据，然后注入到控制器中。@H_502_3@ 
 data：数据不会被注入到控制器中，用途是从父状态传递数据到子状态。@H_502_3@ 
 onEnter/onExit：进入或者离开当前状态的视图时会调用这两个函数@H_502_3@ 
(4)解决器 Resolve@H_502_3@ 
 可以使用 Resolve为控制器提供可选的依赖注入项。@H_502_3@ 
 Relolve 是由 key/value 组成的键值对象.@H_502_3@ 
 key – {string}：注入控制器的依赖项名称。@H_502_3@ 
 value - {string|function}：@H_502_3@ 
 string：一个服务的别名@H_502_3@ 
 function：函数的返回值将作为依赖注入项，如果函数是一个耗时的操作，那么控制器必须等待该函数执行完成（be resolved）才会被实例化。@H_502_3@ 
 比如,博客后台的视图都需要登录用户才能访问,那么判断是否登录就可以做成一个控制器依赖@H_502_3@ 
$stateProvider.state(‘YIJIEBUYI',{
url:“/admin",//登录后才能访问
resolve:{authentication:[‘YijiebuyiAuth','$q',function(YijiebuyiAuth,$q){
return$q.when().then(function(){
returnYijiebuyiAuth.authentication();
});
}]},views:{
container:{templateUrl:“templates/admin_manage.html"}
}
}) 
 在上面的返回函数中我们注入了一个服务YijiebuyiAuth,这个服务里实现了登录判断的方法 authentication@H_502_3@ 
 
 @H_502_3@ 
(5)$state 对象提供自定义数据@H_502_3@ 
$stateProvider
.state(‘blog.index',{
templateUrl:’templates/blog_index.html',data:{
current_page:1,page_size:20
}
}) 
 上面 data 对象就是自定义数据,@H_502_3@ 
 里面定义了2页面的当前页和显示内容条数@H_502_3@ 
 在视图对应的 controller 中我们就可以通过下面的方法来获取自定义数据.@H_502_3@ 
console.log($state.current.data.current_page);//1
console.log($state.current.data.page_size);//20 
(5) onEnter 和 onExit 回调函数@H_502_3@ 
 onEnter: 当状态活跃时触发 什么是活跃???页面正在加载中…..我也求解!@H_502_3@ 
 onExit : 当状态不活跃时触发 什么是不活跃?? 页面加载完成...同求解!@H_502_3@ 
$stateProvider.state("blog.detail",{
template:'<h1>blog</h1>',resolve:{title:'一介布衣'},controller:function($scope,title){
$scope.title=title;
},//title是解决依赖项注入控制器
onEnter:function(title){
if(title){...dosomething...}
},//title是解决依赖项注入控制器
onExit:function(title){
if(title){...dosomething...}
}
}) 
 
 @H_502_3@ 
 所以,刚才上面做的解决依赖判断是否登录,完全可以在 onEnter 事件中判断登录状态,如果未登录,直接跳转到其他路由即可.@H_502_3@ 
(6) 页面跳转@H_502_3@ 
<ahref="#/blog/1234”>博客详情</a>
<aui-sref=“blog.detail({blogID:blogID})”>博客详情</a> 
$state.go(‘blog.detail',{blogID:blogID}); 
(7) 事件@H_502_3@ 
 state事件@H_502_3@ 
 @H_502_3@ 
 $rootScope.$on('$stateChangeStart',function(event,toState,toParams,fromState,fromParams){ ... })@H_502_3@ 
 $rootScope.$on('$stateNotFound',unfoundState,sans-serif; font-size:14px; line-height:20px"> $rootScope.$on('$stateChangeSuccess',sans-serif; font-size:14px; line-height:20px"> $rootScope.$on('$stateChangeError',fromParams,error){ ... })@H_502_3@ 
 
 @H_502_3@ 
 view事件@H_502_3@ 
 View被加载但是DOM树构建之前时：@H_502_3@ 
 $scope.$on('$viewContentLoading',viewConfig){ ... });@H_502_3@ 
 View被加载而且DOM树构建完成时：@H_502_3@ 
 $scope.$on('$viewContentLoaded',function(event){ ... });@H_502_3@ 

 @H_502_3@ 
转自：http://yijiebuyi.com/blog/3aab7ad8bccb22b4a881849c0593d5e2.html@H_502_3@

angular 系列八 ui-router详细介绍及ngRoute工具区别

猜你在找的Angularjs相关文章