AngularJS 页面载入事件的相关方法

AngularJS的uirouter一个重要的内容就是使用state的使用，这里记录一组关于state的事件，每当路由转移过程中发生对应事件时，都会在$rootScrope广播，使用$rootScope.$on('$stateEventName', function(event, ...))获取该事件。

0. 引入router.state.events

首先引入JavaScript源文件：

1
<script src="stateEvents.js"></script>

然后导入模块：
1
angular.module("myApplication", ['ui.router', 'ui.router.state.events']

1. 事件

  1. $stateChangeCancel
  2. $stateChangeStart
  3. $stateNotFound
  4. $stateChangeError
  5. $stateChangeSuccess

$stateChangeCancel

当一个页面的转移被取消时，会在$rootScope广播$stateChangeCancel事件
有以下参数可以使用：

  • toState 目标state
  • toParams 前往目标state时的参数
  • fromState 来源state
  • fromParams 带来的参数
  • options 选项
  • $transition$

和开始事件$stateChangeStart ， 成功事件$stateChangeSuccess 提供的参数相同

$stateChangeError

相比于开始和成功的事件，错误事件多一个参数error，其内容当然是错误信息。

$stateNotFound

没有找到state时的事件，提供一下参数可以用：

  • unfoudState 未找到的state信息，提供to toParams options等属性
  • fromState 来源state
  • fromParams 来源参数
  • options 选项

2. 更新到 Transition Hooks

uirouter已经更新了IHookRegistry接口，可以对transition进行更为详细控制。
$transition 和$transitionService都实现了该接口，但是$transition对象只能在转换开始前使用。

该接口提供以下方法：

  1. getHooks 返回所有已登录的hook方法，参数时方法名，比如onBefore onEnter等等
  2. onBefore 开始前
  3. onStart 开始后
  4. onExit 退出，onStart之后transition会推出state
  5. onRetain 保留，onExit之后onRetain会被执行，子state会被优先执行
  6. onEnter 进入，在onRetain结束后，transition会进入state
  7. onFinish 结束前，这是最后可以取消或者定向transition的方法
  8. onError 错误
  9. onSuccess 成功