angular-ui-router (下)
来源:互联网 发布:matlab 生成cell矩阵 编辑:程序博客网 时间:2024/06/10 03:03
Params 路由参数
params选项是一个包含路径中的参数和正则表达式匹配结果的数组。该选项不能和url选项混用!当某状态被激活时,应用将这个数组赋值给$stateParams
服务。
Views 视图
开发者可以在一个状态中设置多个有名称的视图。该功能在ui-router中很强大,开发者可以在同一个模板中改变和切换不同的视图。
<如果设置了视图选项,则该状态的‘template’,‘templateUrl’及‘templateProvider’将被忽略。如果想在路由里包含父级模板,就需要创建一个包含模板的抽象模板。
例如有这样的视图:
<div> <div ui-view="filters"></div> <div ui-view="mailbox"></div> <div ui-view="priority"></div></div>
接下来就可以创建将被分别被插入到上述ui-view的有命名的视图了,每个子视图可以包含自己的模板、控制器和预载入数据。
$stateProvider .state('inbox', { views: { 'filters': { template: '<h4>Filter inbox</h4>', controller: function($scope) {} }, 'mailbox': { templateUrl: 'partials/mailbox.html' }, 'priority': { template: '<h4>Priority inbox</h4>', resolve: { facebook: function() { return FB.messages(); } } } } });
abstract 抽象模板
抽象模板不能被激活,但是它的子模板可以被激活。抽象模板可以提供一个包括了多个有名的视图的模板,或者它可以传递作用域变量$scope给子模板。使用它可以在同一个url下传递自定义数据或者预载入的依赖。除了需要添加abstract
属性外,其他设置和设定一个常规状态是相同的:
$stateProvider .state('admin', { abstract: true, url: '/admin', template: '<div ui-view></div>' }) .state('admin.index', { url: '/index', template: '<h3>Admin index</h3>' }) .state('admin.users', { url: '/users', template: '<ul>...</ul>' });
onEnter,onExit 回调函数
当应用进入或者离开当前状态的视图时会调用这两个函数。这两个函数可以访问预载入的数据。这两个回调函数使开发者可以根据状态改变来采取某些动作,例如在用户要离开时可以弹出对话框‘你确定吗?’以及防止意外操作等。
Data 数据
自定义数据也可以被附加到状态控制对象state configObject.该数据和预载入数据resolve属性相似,但是该数据不会被注入到控制器中,promise也不会被预载入,它的用途是从父状态传递数据到子状态。
事件
和ngRoute相同的是,angular-route服务会在不同的状态生命周期lifecycle里启动某些事件events。监听$scope对象便可以捕获这些事件然后采取不同的响应或者操作。如下的事件将会在$rootScope
上触发,因此在任何$scope对象上都可以监听到这些事件。
状态改变事件
$scope.$on('$stateChangeStart', function(evt, toState, toParams, fromState, fromParams), { // 如果需要阻止事件的完成 evt.preventDefault();});
可以触发的事件包括:
stateChangeStart
当状态改变开始的时候被触发
$stateChangeSuccess
当状态改变成功后被触发
$stateChangeError
当状态改变遇到错误时被触发,错误通常是目标无法载入,需要预载入的数据无法被载入等。
视图载入事件
视图载入阶段ui-router也提供了一些事件
$viewContentLoading
当视图正在被载入且在DOM被渲染之前触发。
$scope.$on('$viewContentLoading', function(event, viewConfig){ // 获取任何视图设置的参数,以及一个特殊的属性:viewConfig.targetView});
$viewContentLoaded
当视图被载入且DOM已经渲染完成后被触发。
$stateParams 状态参数
在上面提及使用$stateparams来提取在url中的不同参数。该服务的作用是处理url的不同部分。例如,当上述的inbox状态是这样时:
url: '/inbox/:inboxId/messages/{sorted}?from&to'//当用户访问者链接时:'/inbox/123/messages/ascending?from=10&to=20'
$stateParams
对象的值为:
{inboxId: '123', sorted: 'ascending', from: 10, to: 20}
$urlRouterProvider
和ngRoute一样,开发者可以在该对象上设定特定的URL被激活时做什么的规则。由于设定好的状态在特定的url被访问是会自动激活,所以$urlRouterProvider没有必要用来管理激活和载入状态。但当需要管理哪些被发生在当前状态之外的作用域scope时它会非常有用,例如在重定向或者安全验证的时候。在模块的设置函数里便可使用$urlRouterProvider。
when()
该函数需要两个参数:1.当前的路径,2.需要重定向到的路径(或者是需要在路径被访问是运行的函数)。设置重定向前需要为$urlRouterProvider设置when函数来接受一个字符串。例如,当希望重定向一个空的路由到/inbox:
.config(function($urlRouterProvider) { $urlRouterProvider.when('', '/inbox');});
如果传递的是函数,在路径被匹配时该函数会被执行,处理器返回如下3个值中的一个: - falsy,该回应告诉$urlRouter没有匹配到当前url规则,应该尝试匹配新的路径,这样能保证用户访问了正常的路径。 - 字符串,$urlRouter将该字符串当做重定向的路径。 - TRUE 或者 undefined,该回应告诉$urlRouter,url已被处理
otherwise()
和ngRoute的otherwise()函数相似,在用户提交的路径没有被定义的时候它将重定向到指定的页面。这是个创建’默认‘路径的好方法。 otherwise()只接受一个参数,要么函数要么字符串,字符串必须为合法的url路由地址,函数则会在没有任何路径被匹配的时候被运行。
.config(function($urlRouterProvider) { $urlRouterProvider.otherwise('/'); // or $urlRouterProvider.otherwise( function($injector, $location) { $location.path('/'); });});
rule()
如果想越过任何URL的匹配或者在其他路由前做路由修改,则可以使用rule()函数。在使用它的时候必须返回一个合法的代表路径的字符串。
app.config(function($urlRouterProvider){ $urlRouterProvider.rule( function($injector, $location) { return '/index'; });})
总结
本文涵盖了ui-router深度及几乎全部的功能。希望你也发现这个库的强大和实用,并在下一个项目中实用这些强大的功能。
- angular-ui-router (下)
- angular-ui-router (上)
- Angular(三)路由ui-router
- Angular-Ui-Router
- Angular路由:ui-router
- Angular ui-router 入门
- Angular-ui-router入门
- angular路由 ui.router
- angular-ui-router
- 【angular】angular-ui-router学习
- angular-ui-router页面路由
- angular UI-Router示例一
- angular UI-Router 示例二
- angular 使用 ui-router(1)
- angular.js之 ui-router
- Angular-UI-Router 学习笔记
- angular router ui 路由模块(父子)层级说明
- angular-ui/ui-router的使用
- 系统级性能分析工具 — Perf
- 数据结构之矩阵实现
- 硬盘的存储原理和内部架构
- php变量作用域
- pyhton之pip常用命令
- angular-ui-router (下)
- 压力测试和性能测试的区别
- Android之eclipse的环境搭建
- 【web开发】:利用AJAX查询判断用户名是否重复
- Bug Mark
- ios开发 根据URL或字符串生成二维码
- content之间的数据传递
- win7安装虚拟机过程遇到的问题
- js函数机制