angularjs - template - ¿Cuál es el ciclo de vida del ui-router angular?(para la depuración de errores silenciosos)

ui router angularjs

Question

Lo mejor que he encontrado es http://www.ng-newsletter.com/posts/angular-ui-router.html . No es tan profundo como, por ejemplo, el orden en que se $stateChangeStart , $stateChangeStart , $stateChangeStart y exampleState.templateProvider .

Un gran formato de respuesta sería limpio. Algo como:

1. Carga de página inicial del estado foo:

   1. Paso de vida angular paso 1
   2. Paso 1 del ciclo de vida del enrutador UI
   3. El ciclo de vida del enrutador UI se resuelve
   4. Encendido del ciclo de vida del enrutador UI
   5. Paso de vida angular paso 2

2. Cambio de estado foo -> bar

   1. $stateChangeStart evento $stateChangeStart
   2. foo onExit incendios
   3. bar onEnter Incendios
   4. templateUrl obtiene la plantilla
   5. El enrutador de UI se conecta de nuevo al ciclo de vida angular en el ciclo de resumen (o donde sea).

3. Estados anidados

4. Múltiples vistas con nombre:

5. ui-sref hizo clic

Etc ... ¡Gracias!

EDITAR: las funciones de depuración proporcionan suficiente información para satisfacer la necesidad. Vea mi respuesta a continuación para un fragmento.

Answer 1

Después de algunos experimentos, descubrí cómo ver el ciclo de vida lo suficientemente bien como para depurar mi aplicación y tener una idea de lo que estaba sucediendo. Usar todos los eventos, incluyendo onEnter, onExit, stateChangeSuccess, viewContentLoaded desde here , me dio una imagen decente de cuando las cosas están sucediendo de una manera que es tanto más flexible y específica para mi código que un ciclo de vida escrito. En la función "ejecutar" del módulo de la aplicación, coloqué:

Este código me habría ahorrado días de tiempo y confusión si comencé a usarlo cuando comencé con Angular y UI-enrutador. UI-router necesita un modo de "depuración" que lo habilite de manera predeterminada.

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

Answer 2

El modo en que ui-router maneja las URL junto al proveedor de $ ubicación predeterminado no está claro, por lo que se agrega más código de depuración aquí. Espero que sea útil. Estos son 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);
});

Answer 3

Necesitaba depurar el ui-router que estaba usando junto con el paquete de estado adhesivo ui-router-extras. Descubrí que los estados adherentes tienen una depuración integrada que ayudó a resolver mi problema. Registra información sobre las transiciones de estado y cuáles están inactivas / activas.

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

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

Answer 4

Tomé @ la solución de Adam y la envolví en un servicio para poder activar y desactivar la depuración (impresión en la consola) desde mi aplicación.

En la plantilla:

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

En el controlador:

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

O simplemente enciéndalo:

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

El servicio:

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

Answer 5

UI Router ha sido actualizado con Transition Hooks.

Use el servicio $ transition $ para acceder al enganche de error y detectar el error.

Lista de gancho:

• onBefore - La transición está a punto de comenzar
• onStart: la transición ha comenzado
• onExit - (eventos de estado) Se sale cualquier estado que sale
• onRetain - (eventos de estado) Se retienen todos los estados retenidos
• onEnter - (eventos de estado) Se ingresan todos los estados entrantes
• onFinish - La transición está a punto de finalizar
• onSuccess: la transición finaliza y tiene éxito o tiene errores.
• onError: la transición finaliza y tiene éxito o tiene errores.

Puede consultar la descripción general para obtener información sobre Transición: https://ui-router.github.io/guide/transitions

Consulte la documentación de los eventos de Transition Hook: https://ui-router.github.io/guide/transitionhooks