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:
Pageload inicial do estado foo:
Alteração de estado foo -> bar
$stateChangeStart onExit triggers onEnter Fires templateUrl obtém o modelo Estados nesteds
Múltiplas visualizações nomeadas:
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:
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