Angular ui-router 生命周期是什么?(用于调试静默错误) [英] What is the Angular ui-router lifecycle? (for debugging silent errors)

问题描述

我发现最好的是 http://www.ng-newsletter.com/posts/angular-ui-router.html.它不像 $stateChangeStart、exampleState.onEnter、exampleState.resolve 和 exampleState.templateProvider 触发.

The best I've found is http://www.ng-newsletter.com/posts/angular-ui-router.html. It doesn't go as deep as, for example, the order in which $stateChangeStart, exampleState.onEnter, exampleState.resolve, and exampleState.templateProvider fire.

一个很好的答案格式应该是干净的.比如:

A great answer format would be clean. Something like:

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

1. Initial pageload of state foo:

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

状态变化foo -> bar

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

1. $stateChangeStart event fires
2. foo onExit fires
3. bar onEnter Fires
4. templateUrl gets the template
5. UI router plugs back into the Angular lifecycle in the digest loop (or wherever).

嵌套状态

Nested states

多个命名视图:

点击了ui-sref

等等...谢谢！

调试功能提供了足够的洞察力来满足需求.请参阅我的答案以获取片段.

Debugging functions provided enough insight to meet the need. See my answer below for a snippet.

推荐答案

经过一些试验，我想出了如何深入了解生命周期以调试我的应用程序并了解正在发生的事情.使用 here，以一种比写出的生命周期更灵活、更针对我的代码的方式，让我清楚地了解了事情何时发生.在app模块的run"函数中，我放置了:

After some experimenting, I figured out how to see into the lifecycle well enough to debug my app and get a feel for what was happening. Using all the events, including onEnter, onExit, stateChangeSuccess, viewContentLoaded from here, gave me a decent picture of when things are happening in a way that's more both more flexible and specific to my code than a written out lifecycle. In the app module's "run" function, I placed:

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

This code would have saved me days of time and confusion if I started using it when I first started with Angular and UI-router. UI-router needs a "debug" mode that enables this by default.

$rootScope.$on('$stateChangeStart',function(event, toState, toParams, fromState, fromParams){
  console.log('$stateChangeStart to '+toState.name+'- fired when the transition begins. toState,toParams : 
',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);
});

这篇关于Angular ui-router 生命周期是什么?(用于调试静默错误)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！