什么是角UI路由器的生命周期？ （用于调试沉默错误） [英] What is the Angular ui-router lifecycle? (for debugging silent errors)

问题描述

我发现最好的是<一个href=\"http://www.ng-newsletter.com/posts/angular-ui-router.html\">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. 角周期第1步


2. UI路由器生命周期的第1步

发生
3. UI路由器生命周期议决


4. UI路由器生命周期的OnEnter大火


5. 角生命周期第2步

状态改变的富 - > 栏

State change foo -> bar

1. $ stateChangeStart 事件触发


2. 富 onExit 火灾


3. 栏 的OnEnter 火灾


4. templateUrl 获取模板


5. UI路由器插回在消化循环（或地方）的角度生命周期。

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).

嵌套状态

多重命名视图：

UI-SREF点击

等...谢谢！

编辑：提供了足够的洞察力，以满足需要调试功能。看到我的回答以下一个片段。

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

推荐答案

一些试验后，我想出如何去看透生命周期足够好，调试我的应用程序，并得到了什么事的感觉。使用所有事件，包括的OnEnter，onExit，stateChangeSuccess，viewContentLoaded从这里 >，给我当事情的方式，更重要的是更加灵活，具体到我的code不是写出来的生命周期正在发生的一个体面的照片。在应用模块中的运行功能，我把：

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:

如果我开始使用它，当我第一次开始用角和UI路由器这code将有救了我的时间和混乱天。 UI的路由器需要调试模式，它在默认情况下启用此。

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.to+'- 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){
//   // runs on individual scopes, so putting it in "run" doesn't work.
//   console.log('$viewContentLoading - view begins loading - dom not rendered',viewConfig);
// });
$rootScope.$on('$viewContentLoaded',function(event){
  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);
});

这篇关于什么是角UI路由器的生命周期？ （用于调试沉默错误）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！