Was ist der angulare UI-Router-Lebenszyklus? (zum Debuggen stiller Fehler)

Das Beste, was ich gefunden habe, ist http://www.ng-newsletter.com/posts/angular-ui-router.html . Es ist nicht so tief wie beispielsweise die Reihenfolge, in der $stateChangeStart , exampleState.onEnter , exampleState.resolve und exampleState.templateProvider .

Ein tolles Antwortformat wäre sauber. Etwas wie:

  1. Initial pageload von Staat foo:

    1. angularlebenszyklus Schritt 1
    2. UI Router Lebenszyklus Schritt 1
    3. Der Lebenszyklus des UI-Routers wird aufgetriggers
    4. UI router lifecycle onEnter wird ausgetriggers
    5. angularlebenszyklus Schritt 2
  2. Zustandsänderung foo -> bar

    1. $stateChangeStart Ereignis wird ausgetriggers
    2. foo onExit wird onExit
    3. Bar onEnter Brände
    4. templateUrl ruft die Vorlage ab
    5. UI-Router wird wieder in den Angular-Lebenszyklus in der Digest-Schleife (oder wo auch immer) eingefügt.
  3. Verschachtelte Zustände

  4. Mehrere benannte Ansichten:

  5. UI-Sref geklickt

Etc … Danke!

EDIT: Debugging-functionen zur Verfügung gestellt genug Einblick, um die Notwendigkeit zu erfüllen. Siehe meine Antwort unten für ein Snippet.

Nach ein paar Experimenten habe ich herausgefunden, wie man den Lebenszyklus gut genug sieht, um meine App zu debuggen und ein Gefühl dafür zu bekommen, was passiert. Die Verwendung aller Ereignisse, einschließlich onEnter, onExit, stateChangeSuccess, viewContentLoaded von hier , gab mir ein anständiges Bild davon, wann die Dinge auf eine Weise geschehen, die flexibler und spezifischer für meinen Code ist als ein ausgeschriebener Lebenszyklus. In der function “run” des App-Moduls habe ich platziert:

Dieser Code hätte mir Tage der Zeit und Verwirrung erspart, wenn ich ihn anfing, als ich anfing mit Angular und UI-Router. UI-Router benötigt einen “Debug” -Modus, der dies standardmäßig aktiviert.

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

Ich nahm @ Adams Lösung und wickelte sie in einen Dienst, damit ich das Debugging (Drucken auf Konsole) innerhalb meiner Anwendung ein- und ausschalten konnte.

In der Vorlage:

  

In der Steuerung:

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

Oder einfach nur einschalten:

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

Der Service:

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

Wie ui-router URLs neben dem Standard-$ location-Provider verwaltet, ist nicht klar, so dass hier mehr Debug-Code hinzugefügt wird. Hoffentlich wird es hilfreich sein. Diese sind von 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); }); 

Ich musste den UI-Router debuggen, den ich zusammen mit dem UI-Router-Extras Sticky-State-Paket verwendet habe. Ich habe festgestellt, dass die Sticky-Zustände ein Debugging eingebaut haben, das mir geholfen hat, mein Problem zu lösen. Es protokolliert Informationen über die Zustandsübergänge und welche inaktiv / aktiv sind.

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

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

UI Router wurde mit Transition Hooks aktualisiert.

Verwenden Sie $ transition $ service, um auf den onError-Hook zuzugreifen und den Fehler abzufangen.

Liste der Haken:

  • onBefore – Der Übergang steht kurz bevor
  • onStart – Der Übergang hat begonnen
  • onExit – (state events) Alle ausgehenden Stati werden beendet
  • onRetain – (state events) Alle beibehaltenen Staaten bleiben erhalten
  • onEnter – (state events) Es werden alle Eingabezustände eingegeben
  • onFinish – Der Übergang steht kurz vor dem Abschluss
  • onSuccess – der Übergang ist beendet und entweder erfolgreich oder errorshaft.
  • onError – Der Übergang ist beendet und entweder erfolgreich oder errorshaft.

Sie können die Übersicht auschecken, um mehr über Transition zu erfahren: https://ui-router.github.io/guide/transitions

Weitere Informationen finden Sie in der Dokumentation zu den Transition-Hook-Ereignissen: https://ui-router.github.io/guide/transitionhooks