转自:http://yijiebuyi.com/blog/3aab7ad8bccb22b4a881849c0593d5e2.html
angular.js 为我们封装好了一个路由工具 ngRoute ,它是一种靠url改变去驱动视图.
angularUI 也为我们封装了一个独立的路由模块 ui-router ,它是一种靠状态 state 来驱动视图.
后者有什么优势:一个页面可以嵌套多个视图,多个视图去控制某一个视图等.
ngRoute
使用时需要ui中用ng-view指令指定 如:<div ng-view></div>
url改变此区域会被刷新.
首先要配置注册 ngRoute
var app = angular.module(“YIJIEBUYI", ['ngRoute']); app.config(function ($locationProvider) {
});
路由设置:
angular.module(‘YIJIEBUYI').config(['$urlRouterProvider',
function($urlRouterProvider) {
$urlRouterProvider
.when(“/blog", “/blog/index")
.otherwise("/blog/index");
});
ui-router
使用时需要ui中用ui-view指令指定 如:<div ui-view></div>
需要下载 ui-route 文件.
首先配置注册 ui-route
var app = angular.module(“YIJIEBUYI", [‘ui.router']); app.config(function () { //路由配置 });
路由设置:
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 相比:
$route —> $state
$routeParams —> $stateParams
$routeProvider —> $stateProvider
<div ng-view></div> —> <div ui-view></div>
设置路由相比:
$urlRouterProvider.otherwise('/blog/index'); 设置默认路由还需要使用ngRoute来设置.
$stateProvider.state(‘blog.index', {url:’….’,views:{模板路径}); 见上面设置信息.
所以我们在上一篇博文简单介绍 ui-route路由控制器中既使用了ngRoute 也使用了 ui-route,就是因为
设置默认页还是要用到 ngRoute工具.
下面详细说下 ui-route 使用:
(1)父路由,子路由
ui-route子路由可以继承父路由,也就是说 state 设置可以嵌套,通过名称中的.(点)来区分层次.
如下面路由:
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'} } }) });
blog 对应的路由是 /blog
blog.index 对应的路由就是 /blog/index (前面的/blog就是从父view中继承过来的)
blog.index 就是 blog的子view
(2)指定响应的view
<div ui-view="view1"></div> <div ui-view="view2"></div>
.state("blog.detail"),{ url:”/:blogID" ,views:{ view1:{ templateUrl:"view1.html" } ,view2:{ templateUrl:"view1.html" } } }
(3) state 配置参数
url:默认相对路径(以^开头的是绝对路径)
views:每个子视图可以包含自己的模板、控制器和预载入数据。 (后2项选填,控制器可以在view中绑定)
abstract:抽象模板不能被激活
template: HTML字符串或者返回HTML字符串的函数
如:
$stateProvider.state(‘blog.detail', { template: '<h1>My Blog</h1>' })
templateUrl: HTML模板的路径或者返回HTML模板路径的函数
如:
$stateProvider.state(‘blog.detail', { templateUrl: ’templates/blog_detail.html' })
templateProvider:返回HTML字符串的函数
如:通过函数返回html
$stateProvider.state(‘blog.detail', { templateProvider: function ($timeout, $stateParams) { return $timeout(function () { return '<h1>' + $stateParams.blogID + '</h1>' }, 100); } })
controller、controllerProvider:指定任何已经被注册的控制器或者一个作为控制器的函数
resolve:在路由到达前预载入一系列依赖或者数据,然后注入到控制器中。
data:数据不会被注入到控制器中,用途是从父状态传递数据到子状态。
onEnter/onExit:进入或者离开当前状态的视图时会调用这两个函数
(4)解决器 Resolve
可以使用 Resolve 为控制器提供可选的依赖注入项。
Relolve 是由 key/value 组成的键值对象.
key – {string}:注入控制器的依赖项名称。
value - {string|function}:
string:一个服务的别名
function:函数的返回值将作为依赖注入项,如果函数是一个耗时的操作,那么控制器必须等待该函数执行完成(be resolved)才会被实例化。
比如,博客后台的视图都需要登录用户才能访问,那么判断是否登录就可以做成一个控制器依赖
$stateProvider.state(‘YIJIEBUYI', { url: “/admin", // 登录后才能访问 resolve: {authentication:[‘YijiebuyiAuth', '$q', function(YijiebuyiAuth, $q){ return $q.when().then(function(){ return YijiebuyiAuth.authentication(); }); }]}, views: { container: { templateUrl: “templates/admin_manage.html" } } })
在上面的返回函数中我们注入了一个服务 YijiebuyiAuth ,这个服务里实现了登录判断的方法 authentication
(5)$state 对象提供自定义数据
$stateProvider .state(‘blog.index', { templateUrl: ’templates/blog_index.html', data: { current_page: 1, page_size: 20 } })
上面 data 对象就是自定义数据,
里面定义了2页面的当前页和显示内容条数
在视图对应的 controller 中我们就可以通过下面的方法来获取自定义数据.
console.log($state.current.data.current_page); // 1 console.log($state.current.data.page_size); // 20
(5) onEnter 和 onExit 回调函数
onEnter: 当状态活跃时触发 什么是活跃???页面正在加载中…..我也求解!
onExit : 当状态不活跃时触发 什么是不活跃?? 页面加载完成...同求解!
$stateProvider.state("blog.detail", { template: '<h1>blog</h1>', resolve: { title: '蚂蚁' }, controller: function($scope, title){ $scope.title = title; }, // title 是解决依赖项注入控制器 onEnter: function(title){ if(title){ ... do something ... } }, // title 是解决依赖项注入控制器 onExit: function(title){ if(title){ ... do something ... } } })
所以,刚才上面做的解决依赖判断是否登录,完全可以在 onEnter 事件中判断登录状态,如果未登录,直接跳转到其他路由即可.
(6) 页面跳转
<a href="#/blog/1234”>博客详情</a> <a ui-sref=“blog.detail({blogID:blogID})”>博客详情</a>
$state.go(‘blog.detail', {blogID:blogID});
(7) 事件
state事件
$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){ ... })
$rootScope.$on('$stateNotFound', function(event, unfoundState, fromState, fromParams){ ... })
$rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){ ... })
$rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error){ ... })
view事件
View被加载但是DOM树构建之前时:
$scope.$on('$viewContentLoading', function(event, viewConfig){ ... });
View被加载而且DOM树构建完成时:
$scope.$on('$viewContentLoaded', function(event){ ... });
相关推荐
前端项目-angular-ui-router,基于状态的AngularJS路由
UI-Router被认为是AngularUI为开发者提供的最实用的一个模块,它是一个让开发者能够根据URL状态或者说是'机器状态'来组织和控制界面UI的渲染,而不是仅仅只改变路由(传统AngularJS应用实用的方式)。该模块为开发者...
Angular的第三方路由
总结 angular.js路由,angular.js ui-router 用法示例demo,适合初学者使用,简单易懂,无多余代码
正在学习Angularjs和路由的Angularjs和ui-router的一个栗子(新手)
angular-ui-router的使用方法有很多,此文中,我们直接在控制器中使用,并完成一个简单的路由。 文中 Angular.js 的版本为 1.5.2 下载和安装 直接通过 bower 来安装 angular-ui-router 使用 bower 安装 angular-...
angular-ui-router-css用于 AngularJS UI 路由器的 CSS 解析器。 在路由状态更改之前解析您的 css。 安装使用安装和管理。 bower instal angular-ui-router-css --save如何使用它将angular-ui-router-css.js到您的...
本解决方案下的ui.router项目是针对angularjs ui.router嵌套路由做的一个demo,程序代码采用VS2013开发,代码齐全,可直接运行。有需要的带走吧~v~v~
angularJs自身提供路由ng-router,但是ng-router不是很好用,配置项零散,好比Vue提供的组件传值一样,虽然提供给你了用法,但是开发过程中逻辑一多用着萌萌的,所以我们抛开ng-router来看ui-router。 引入ui-router ...
Angular ui-router无效路由处理程序 组件添加了一个自定义的ui路由器“无效路由”处理程序。 安装 要安装组件: $ ngx install angular-ui-router-configure-default-route 不知道ngx命令行工具是什么? 了解有关更...
UI 路由器示例示例,基于FunnyAnt 的博客文章: ://www.funnyant.com/angularjs-ui-router/演示以相反的顺序...
本篇文章主要介绍了详解AngularJs路由之Ui-router-resolve(预加载),具有一定的参考价值,感兴趣的小伙伴们可以参考一下
1. 关于ng-router(angular-router.js)和ui-router(angular-ui-router.js)的区别 ngroute是用AngularJS框架的路由的核心部分。 ui-router是一个社区库,它是用来提高完善ngroute路由功能的。 实例: 使用ng-...
redux-ui-router Angular UI Router的ngRedux绑定-将路由器状态保留在ngRedux存储中。 维护商店内的路由器状态使用操作来转换您的UI而不是$state 使用商店状态访问路由参数,而不是$stateParams入门安装$ npm ...
主要介绍了AngularJS ui-router刷新子页面路由的方法,网上虽然有很多种方法,但是都不适合小编,今天小编给大家分享一个还不错的方法,需要的朋友可以参考下
ui-router, 在AngularJS中,使用嵌套视图实现灵活路由的实际解决方案 AngularUI路由器 注意:这是用户界面路由器版本1的Angular 1.x 源。 如果你正在寻找路由器版本 0.2的源,那么可以在这里找到它:。 Angular 中...
主要介绍了AngularJS路由Ui-router模块用法,结合实例形式分析了Ui-router模块的功能、使用方法及相关注意事项,需要的朋友可以参考下
项目使用 angularJS ui-router-tabs angular-ui-router 实现tab页切换, 1、亮点 1)tab页间切换缓存tab页数据 2)刷新页面,保留已经打开的tab页,当前活动tab为上次活动的tab 3)使用嵌套路由,实现单页面应用