web-dev-qa-db-de.com

Was ist der Lebenszyklus des Angular UI-Routers? (zum Debuggen stiller Fehler)

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

Ein gutes Antwortformat wäre sauber. So etwas wie:

  1. Anfangsseite des staatlichen Status:

    1. Winkel Lebenszyklus Schritt 1
    2. Lebenszyklus des UI-Routers Schritt 1
    3. Der Lebenszyklus des UI-Routers kann aufgelöst werden
    4. Lebenszyklus der Benutzeroberfläche des Routers onEnter wird ausgelöst
    5. Winkel Lebenszyklus Schritt 2

  2. Zustandsänderung foo -> bar

    1. $stateChangeStart Ereignis wird ausgelöst
    2. fooonExit wird ausgelöst
    3. baronEnter wird ausgelöst
    4. templateUrl ruft die Vorlage ab
    5. Der UI-Router wird in der Digest-Schleife (oder wo auch immer) wieder in den Angular-Lebenszyklus eingefügt.

  3. Verschachtelte Staaten

  4. Mehrere benannte Ansichten:

  5. ui-sref klickte

Usw. Danke!

BEARBEITEN: Debugging-Funktionen lieferten genügend Einblick, um die Anforderungen zu erfüllen. Sehen Sie mein Antwort unten für einen Ausschnitt.

angularjsangular-ui-router
65
Adam

Nach einigem Experimentieren habe ich herausgefunden, wie ich den Lebenszyklus gut genug sehen kann, um meine App zu debuggen und ein Gefühl dafür zu bekommen, was passiert. Durch die Verwendung aller Ereignisse, einschließlich onEnter, onExit, stateChangeSuccess, viewContentLoaded from here , erhielt ich ein anständiges Bild davon, wann Dinge auf eine Weise passieren, die flexibler und spezifischer für meinen Code ist als ein ausgeschriebener Lebenszyklus. In der Funktion "Ausführen" des App-Moduls habe ich Folgendes eingefügt:

Dieser Code hätte mir Tage an Zeit und Verwirrung gespart, wenn ich ihn zum ersten Mal mit Angular und UI-Router verwendet habe. 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);
});
171
Adam

Ich nahm die Lösung von @ Adam und wickelte sie in einen Dienst ein, sodass ich das Debugging (Drucken auf die Konsole) in meiner Anwendung ein- und ausschalten kann.

In der Vorlage:

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

Im Controller:

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

Ich musste den ui-router debuggen, den ich zusammen mit dem sticky state-Paket der ui-router-extras verwendete. Ich habe festgestellt, dass Sticky States Debugging eingebaut haben, das zur Lösung meines Problems beigetragen hat. Es protokolliert Informationen über die Zustandsübergänge und die inaktiven/aktiven.

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

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

Wie ui-router URLs neben dem Standard-Location-Provider $ verwaltet, ist nicht klar. 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);
});
2
s6712

Der Benutzeroberflächenrouter wurde mit Transition Hooks aktualisiert.

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

Liste der Haken: 

  • onBefore - Der Übergang beginnt gerade
  • onStart - Die Umstellung hat begonnen
  • onExit - (Statusereignisse) Alle vorhandenen Zustände werden beendet
  • onRetain - (Statusereignisse) Alle beibehaltenen Zustände werden beibehalten
  • onEnter - (Statusereignisse) Alle eintretenden Status werden eingegeben
  • onFinish - Der Übergang steht kurz vor dem Abschluss 
  • onSuccess - Der Übergang ist abgeschlossen und entweder erfolgreich oder fehlerhaft.
  • onError - Der Übergang ist abgeschlossen und entweder erfolgreich oder fehlerhaft.

In der Übersicht finden Sie Informationen zu Transition: https://ui-router.github.io/guide/transitions

In der Dokumentation finden Sie die Transition Hook-Ereignisse: https://ui-router.github.io/guide/transitionhooks

0
Disfigure