Каков жизненный цикл Angular ui-router? (для отладки бесшумных ошибок)

Ответ 1

После некоторых экспериментов я понял, как достаточно хорошо видеть жизненный цикл, чтобы отлаживать приложение и ощущать, что происходит. Используя все события, в том числе onEnter, onExit, stateChangeSuccess, viewContentLoaded из здесь, дал мне достойную картину того, когда все происходит так, что более гибкие и конкретные к моему коду, чем записанный жизненный цикл. В функции "запустить" модуля приложения я разместил:

Этот код спас бы мне несколько дней и путаницу, если бы я начал использовать его, когда я впервые начал работать с 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);
});

Ответ 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;
}]);

Ответ 3

Как ui-router управляет URL-адресами рядом с провайдером определения местоположения по умолчанию, не ясен, поэтому здесь добавляется дополнительный код отладки. Надеюсь, это будет полезно. Это от https://github.com/ryangasparini-wf/angular-website-routes

$scope.$on('$routeChangeError', function(current, previous, rejection) {
    console.log("routeChangeError", currrent, previous, rejection);
});

$scope.$on('$routeChangeStart', function(next, current) {
    console.log("routeChangeStart");
    console.dir(next);
    console.dir(current);
});

$scope.$on('$routeChangeSuccess', function(current, previous) {
    console.log("routeChangeSuccess");
    console.dir(current);
    console.dir(previous);
});

$scope.$on('$routeUpdate', function(rootScope) {
    console.log("routeUpdate", rootScope);
});

Ответ 4

Мне нужно было отладить ui-router, который я использовал вместе с личным пакетом состояния ui-router-extras. Я обнаружил, что липкие состояния имеют встроенную отладку, которая помогла решить мою проблему. Он регистрирует информацию о переходах состояния и неактивен/активен.

https://christopherthielen.github.io/ui-router-extras/#/sticky

angular.module('<module-name>').config(function ($stickyStateProvider) {
    $stickyStateProvider.enableDebug(true);
});