web-dev-qa-db-fra.com

Quel est le cycle de vie angulaire du routeur ui? (pour le débogage des erreurs silencieuses)

Le meilleur que j'ai trouvé est http://www.ng-newsletter.com/posts/angular-ui-router.html . Cela ne va pas aussi profondément que, par exemple, l'ordre dans lequel $stateChangeStart, exampleState.onEnter, exampleState.resolve et exampleState.templateProvider sont activés.

Un bon format de réponse serait propre. Quelque chose comme:

  1. Chargement initial de l'état foo:

    1. Cycle de vie angulaire étape 1
    2. Cycle de vie du routeur d'interface utilisateur, étape 1
    3. Le cycle de vie du routeur d'interface utilisateur est résolu
    4. Cycle de vie du routeur d'interface utilisateur onEnter se déclenche
    5. Cycle de vie angulaire étape 2

  2. Changement d'état foo -> bar

    1. $stateChangeStart événement déclenche
    2. fooonExit incendies
    3. baronEnter Fires
    4. templateUrl obtient le modèle
    5. Le routeur d'interface utilisateur se reconnecte au cycle de vie angulaire dans la boucle de digestion (ou ailleurs).

  3. États imbriqués

  4. Plusieurs vues nommées:

  5. ui-sref cliqué

Etc ... Merci!

EDIT: Les fonctions de débogage ont fourni suffisamment d'informations pour répondre aux besoins. Voir ma réponse ci-dessous pour un extrait.

angularjsangular-ui-router
65
Adam

Après quelques expériences, j'ai compris comment intégrer suffisamment le cycle de vie pour déboguer mon application et avoir une idée de ce qui se passait. En utilisant tous les événements, y compris onEnter, onExit, stateChangeSuccess, viewContentLoaded from here , m’a donné une bonne idée du moment où les événements se produisent d’une manière plus souple et spécifique à mon code qu’un cycle de vie écrit. Dans la fonction "run" du module d'application, j'ai placé:

Ce code m'aurait évité des jours de temps et de confusion si je commençais à l'utiliser dès le début avec Angular et UI-router. UI-router a besoin d'un mode "débogage" qui active cela par défaut.

$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

J'ai pris la solution de @ Adam et je l'ai intégrée à un service afin de pouvoir activer et désactiver le débogage (impression sur console) depuis mon application.

Dans le modèle:

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

Dans le contrôleur:

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

Ou simplement l'allumer:

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

Le 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

Je devais déboguer le routeur ui que j'utilisais avec le paquet d'état collant ui-router-extras. J'ai constaté que le débogage intégré par les états collants permettait de résoudre mon problème. Il enregistre des informations sur les transitions d'état et sur celles qui sont inactives/actives.

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

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

La façon dont ui-router gère les urls à côté du fournisseur par défaut $ location n'est pas claire, donc ajoutez plus de code de débogage ici. J'espère que ça va être utile. Ce sont 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);
});
2
s6712

Le routeur d'interface utilisateur a été mis à jour avec les crochets de transition.

Utilisez $ transition $ service pour accéder au hook onError et intercepter l'erreur.

Liste des crochets: 

  • onBefore - La transition est sur le point de commencer
  • onStart - La transition a commencé
  • onExit - (state events) Tous les états existants sont sortis
  • onRetain - (événements d'état) Tous les états conservés sont conservés
  • onEnter - (state events) Tous les états entrants sont entrés
  • onFinish - La transition est sur le point de se terminer 
  • onSuccess - la transition est terminée et est réussie ou erronée.
  • onError - la transition est terminée et est réussie ou erronée.

Vous pouvez consulter la vue d'ensemble pour en savoir plus sur Transition: https://ui-router.github.io/guide/transitions

Voir la documentation relative aux événements Transition Hook: https://ui-router.github.io/guide/transitionhooks

0
Disfigure