什么是 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:
状态 foo 的初始页面加载:
Initial pageload of state foo:
- Angular 生命周期步骤 1
- UI 路由器生命周期第 1 步
- UI 路由器生命周期解析发生
- UI 路由器生命周期 onEnter 触发
- Angular 生命周期第 2 步
状态变化 foo -> bar
$stateChangeStart
事件触发- foo
onExit
触发 - bar
onEnter
触发 templateUrl
获取模板- UI 路由器在摘要循环(或其他任何地方)中重新插入 Angular 生命周期.
$stateChangeStart
event fires- foo
onExit
fires - bar
onEnter
Fires templateUrl
gets the template- UI router plugs back into the Angular lifecycle in the digest loop (or wherever).
嵌套状态
Nested states
多个命名视图:
ui-sref 被点击
ui-sref clicked
等等……谢谢!
调试功能提供了足够的洞察力来满足需求.请参阅我的下面的答案以获取片段.
Debugging functions provided enough insight to meet the need. See my answer below for a snippet.
推荐答案
经过一些试验,我想出了如何充分了解生命周期以调试我的应用程序并了解正在发生的事情.从这里,让我对事情发生的时间有一个很好的了解,这种方式比写出的生命周期更灵活,更适合我的代码.在应用模块的运行"函数中,我放置了:
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 : \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);
});
这篇关于什么是 Angular ui-router 生命周期?(用于调试静默错误)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!