Что такое угловой пользовательского интерфейса маршрутизатора жизненного цикла? (для отладки тихих ошибок)

лучшее, что я нашел это http://www.ng-newsletter.com/posts/angular-ui-router.html. это не так глубоко, как, например, порядок, в котором $stateChangeStart,exampleState.onEnter,exampleState.resolve и exampleState.templateProvider пожар.

отличный формат ответа будет чистым. Что-то вроде:

  1. начальная загрузка страницы состояния foo:

    1. угловой жизненный цикл Шаг 1
    2. ui router lifecycle Шаг 1
    3. жизненный цикл маршрутизатора UI разрешения происходят
    4. ui router lifecycle onEnter пожары
    5. угловой жизненный цикл Шаг 2

  2. изменение состояния фу ->бар

    1. $stateChangeStart событие
    2. фуonExit огни
    3. барonEnter огни
    4. templateUrl получает шаблон
    5. UI маршрутизатор подключается обратно в угловой жизненный цикл в дайджест цикл (или где угодно).

  3. вложенные состояния

  4. несколько именованных вид:

  5. ui-sref нажал

Etc... Спасибо!

EDIT: функции отладки обеспечили достаточную проницательность для удовлетворения этой потребности. Смотрите мой ответ ниже для сниппета.

5 65
angularjs angular-ui-router

5 ответов:

после некоторых экспериментов, я понял, как увидеть в жизненном цикле достаточно хорошо, чтобы отладить мое приложение и получить представление о том, что происходит. Используя все события, включая onEnter, onExit, stateChangeSuccess, viewContentLoaded from здесь, дал мне достойную картину того, когда все происходит таким образом, что это более гибко и специфично для моего кода, чем выписанный жизненный цикл. В функции "run" модуля приложения я разместил:

этот код будет иметь спас меня дней времени и путаницы, если я начал использовать его, когда я впервые начал с угловой и UI-маршрутизатор. UI-маршрутизатор нуждается в режиме" отладки", который включает это по умолчанию.

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

Я взял решение @Adam и обернул его в службу, чтобы я мог включать и выключать отладку (печать на консоль) из своего приложения.

в шаблоне:

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

в контроллере:

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

или просто включить его:

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

сервис:

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

Как ui-router управляет URL-адресами рядом с поставщиком $ location по умолчанию, не ясно, поэтому здесь добавляется больше кода отладки. Надеюсь, это будет полезно. Это от 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

Мне нужно было отладить ui-маршрутизатор, который я использовал вместе с пакетом sticky state ui-router-extras. Я обнаружил, что sticky states имеет встроенную отладку, которая помогла решить мою проблему. Он регистрирует информацию о переходах состояния и которые являются неактивными / активными.

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

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

маршрутизатор пользовательский интерфейс был обновлен с переходом крючки.

используйте$ transition $ service для доступа к крючку onError и поймать ошибку.

список крюка :

  • onBefore - переход начинается
  • onStart-переход начался
  • onExit - (государственные мероприятия) все существующие государства вышел
  • onRetain - (state events) все сохраненные состояния сохраняются
  • onEnter - (государственные события) любой вводимые состояния вводятся
  • onFinish-переход вот-вот закончится
  • onsuccess-переход завершен и либо успешен, либо ошибочен.
  • onError - переход завершен и либо успешен, либо ошибочен.

вы можете проверить обзор, чтобы узнать о переходе:https://ui-router.github.io/guide/transitions

см. документацию для событий крюка перехода : https://ui-router.github.io/guide/transitionhooks

0