Qual é o ciclo de vida do roteador da interface do usuário angular? (para debugging de erros silenciosos)

O melhor que encontrei é o http://www.ng-newsletter.com/posts/angular-ui-router.html . Ele não é tão profundo quanto, por exemplo, a ordem em que os $stateChangeStart , exampleState.onEnter , exampleState.resolve e exampleState.templateProvider .

Um ótimo formato de resposta seria limpo. Algo como:

  1. Pageload inicial do estado foo:

    1. Etapa 1 do ciclo de vida angular
    2. Etapa 1 do ciclo de vida do roteador da interface do usuário
    3. Resoluções do ciclo de vida do roteador da interface do usuário ocorrem
    4. Ciclo de vida do roteador de interface do usuário onEnter fires
    5. Etapa 2 do ciclo de vida angular
  2. Alteração de estado foo -> bar

    1. incêndios de evento $stateChangeStart
    2. foo onExit triggers
    3. bar onEnter Fires
    4. templateUrl obtém o modelo
    5. O roteador da IU conecta-se novamente ao ciclo de vida Angular no loop digest (ou em qualquer lugar).
  3. Estados nesteds

  4. Múltiplas visualizações nomeadas:

  5. ui-sref clicou

Etc … Obrigado!

EDIT: funções de debugging forneceram insight suficiente para atender a necessidade. Veja minha resposta abaixo para um trecho.

Depois de algumas experiências, descobri como enxergar bem o ciclo de vida para depurar meu aplicativo e ter uma ideia do que estava acontecendo. Usando todos os events, incluindo onEnter, onExit, stateChangeSuccess, viewContentLoaded daqui , deu-me uma imagem decente de quando as coisas estão acontecendo de uma maneira que é mais flexível e específica ao meu código do que um ciclo de vida escrito. Na function “run” do módulo de aplicativo, coloquei:

Este código teria me poupado dias de tempo e confusão, se eu comecei a usá-lo quando comecei com Angular e UI-roteador. O roteador de interface do usuário precisa de um modo de “debugging” que permita isso por padrão.

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

Eu peguei a solução da @ Adam e a envolvi em um serviço para que eu pudesse ligar e desligar a debugging (impressão para o console) de dentro do meu aplicativo.

No modelo:

  

No controlador:

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

Ou apenas para ligá-lo:

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

O serviço:

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

Como o ui-router gerencia urls ao lado do provedor $ location padrão não está claro, adicionando mais código de debugging aqui. Espero que seja útil. Estes são de 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); }); 

Eu precisava depurar o roteador ui que eu estava usando junto com o pacote de estado pegajoso ui-router-extras. Descobri que os estados rígidos foram depurados que ajudaram a resolver meu problema. Ele registra informações sobre as transições de estado e quais estão inativas / ativas.

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

 angular.module('').config(function ($stickyStateProvider) { $stickyStateProvider.enableDebug(true); }); 

O roteador de interface do usuário foi atualizado com ganchos de transição.

Use $ transition $ service para acessar o hook onError e pegar o erro.

Lista de gancho:

  • onBefore – A transição está prestes a começar
  • onStart – A transição começou
  • onExit – (events de estado) Quaisquer estados que saem são excluídos
  • onRetain – (events de estado) Quaisquer estados retidos são retidos
  • onEnter – (events de estado) Quaisquer estados de input são inseridos
  • onFinish – A transição está prestes a terminar
  • onSuccess – a transição está concluída e é bem-sucedida ou com erro.
  • onError – a transição está concluída e é bem sucedida ou com erro.

Você pode conferir a visão geral para aprender sobre Transição: https://ui-router.github.io/guide/transitions

Veja a documentação dos events do Transition Hook: https://ui-router.github.io/guide/transitionhooks