什么是Angular ui-router生命周期？(用于调试静默错误)

Question

我找到的最好的是http://www.ng-newsletter.com/posts/angular-ui-router.html.它不会去深,例如,在该命令$stateChangeStart,exampleState.onEnter,exampleState.resolve,和exampleState.templateProvider火灾.

一个很好的答案格式是干净的.就像是:

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

   1. 角度生命周期步骤1
   2. UI路由器生命周期第1步
   3. UI路由器生命周期解决发生
   4. UI路由器生命周期onEnter fires
   5. 角度生命周期第2步

2. 状态改变foo - > 吧

   1. $stateChangeStart 事件火灾
   2. foo onExit火
   3. 酒吧 onEnter火灾
   4. templateUrl 得到模板
   5. UI路由器在摘要循环(或任何地方)中插回Angular生命周期.

3. 嵌套状态

4. 多个命名视图:

5. ui-sref点击了

等等......谢谢!

编辑:调试功能提供了足够的洞察力,以满足需要.请参阅下面的答案以获取代码段.

Answer 1

经过一些实验,我想出了如何充分了解生命周期以调试我的应用程序并了解正在发生的事情.从这里使用所有事件,包括onEnter,onExit,stateChangeSuccess,viewContentLoaded ,给了我一个很好的画面,说明事情发生的时间比我的代码更灵活,更具体,而不是写出来的生命周期.在app模块的"运行"功能中,我放置了:

如果我在第一次使用Angular和UI路由器时开始使用它,这段代码可以节省我几天的时间和困惑.UI路由器需要"调试"模式,默认情况下启用此模式.

$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);
});

Answer 2

我使用了@ Adam的解决方案并将其包装到服务中,因此我可以在应用程序中打开和关闭调试(打印到控制台).

在模板中:

<button ng-click="debugger.toggle()">{{debugger.active}}</button>

在控制器中:

function($scope, PrintToConsole){ $scope.debugger = PrintToConsole; }

或者只是打开它:

angular.module('MyModule', ['ConsoleLogger'])
.run(['PrintToConsole', function(PrintToConsole) {
    PrintToConsole.active = true;
}]);

服务:

angular.module("ConsoleLogger", [])
.factory("PrintToConsole", ["$rootScope", function ($rootScope) {
    var handler = { active: false };
    handler.toggle = function () { handler.active = !handler.active; };
    $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
        if (handler.active) {
            console.log("$stateChangeStart --- event, toState, toParams, fromState, fromParams");
            console.log(arguments);
        };
    });
    $rootScope.$on('$stateChangeError', function (event, toState, toParams, fromState, fromParams, error) {
        if (handler.active) {
            console.log("$stateChangeError --- event, toState, toParams, fromState, fromParams, error");
            console.log(arguments);
        };
    });
    $rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
        if (handler.active) {
            console.log("$stateChangeSuccess --- event, toState, toParams, fromState, fromParams");
            console.log(arguments);
        };
    });
    $rootScope.$on('$viewContentLoading', function (event, viewConfig) {
        if (handler.active) {
            console.log("$viewContentLoading --- event, viewConfig");
            console.log(arguments);
        };
    });
    $rootScope.$on('$viewContentLoaded', function (event) {
        if (handler.active) {
            console.log("$viewContentLoaded --- event");
            console.log(arguments);
        };
    });
    $rootScope.$on('$stateNotFound', function (event, unfoundState, fromState, fromParams) {
        if (handler.active) {
            console.log("$stateNotFound --- event, unfoundState, fromState, fromParams");
            console.log(arguments);
        };
    });
    return handler;
}]);