angularjs - Angular ui-router 的生命周期是什么？ (用于调试无声错误)

Question

我发现的最好的是http://www.ng-newsletter.com/posts/angular-ui-router.html 。例如，它的深度不如 $stateChangeStart、exampleState.onEnter、exampleState.resolve 和 exampleState.templateProvider 火。

一个好的答案格式应该是干净的。像这样的东西:

1. 状态 foo 的初始页面加载:

   1. Angular 生命周期第 1 步
   2. UI 路由器生命周期步骤 1
   3. UI 路由器生命周期解析发生
   4. UI 路由器生命周期 onEnter 触发
   5. Angular 生命周期第 2 步

2. 状态更改foo -> bar

   1. $stateChangeStart 事件触发
   2. foo onExit 触发
   3. bar onEnter 触发
   4. templateUrl 获取模板
   5. UI 路由器在摘要循环(或任何地方)中重新插入 Angular 生命周期。

3. 嵌套状态

4. 多个命名 View :

5. 点击了 ui-sref

等等...谢谢!

编辑:调试功能提供了足够的洞察力来满足需求。看我的answer below一个片段。

Answer 1

经过一些实验，我弄清楚了如何充分了解生命周期来调试我的应用程序并了解正在发生的情况。使用 here 中的所有事件，包括 onEnter、onExit、stateChangeSuccess、viewContentLoaded ，让我对事情发生的时间有了一个清晰的了解，这种方式比写出的生命周期更灵活、更针对我的代码。在应用程序模块的“运行”函数中，我放置了:

如果我在第一次开始使用 Angular 和 UI-router 时就开始使用这段代码，将会节省我数天的时间和困惑。 UI-router 需要一个默认启用此功能的“调试”模式。

$rootScope.$on('$stateChangeStart',function(event, toState, toParams, fromState, fromParams){
  console.log('$stateChangeStart to '+toState.name+'- fired when the transition begins. toState,toParams : \n',toState, toParams);
});
$rootScope.$on('$stateChangeError',function(event, toState, toParams, fromState, fromParams, error){
  console.log('$stateChangeError - fired when an error occurs during transition.');
  console.log(arguments);
});
$rootScope.$on('$stateChangeSuccess',function(event, toState, toParams, fromState, fromParams){
  console.log('$stateChangeSuccess to '+toState.name+'- fired once the state transition is complete.');
});
$rootScope.$on('$viewContentLoading',function(event, viewConfig){
   console.log('$viewContentLoading - view begins loading - dom not rendered',viewConfig);
});

/* $rootScope.$on('$viewContentLoaded',function(event){
     // runs on individual scopes, so putting it in "run" doesn't work.
     console.log('$viewContentLoaded - fired after dom rendered',event);
   }); */

$rootScope.$on('$stateNotFound',function(event, unfoundState, fromState, fromParams){
  console.log('$stateNotFound '+unfoundState.to+'  - fired when a state cannot be found by its name.');
  console.log(unfoundState, fromState, fromParams);
});