Что такое Угловой ui-router жизненный цикл? (для отладки бесшумных ошибок)

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

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

  1. Начальная папка состояния foo:

    1. Угловой этап жизненного цикла 1
    2. Шаг 1 жизненного цикла маршрутизатора пользовательского интерфейса
    3. Реализуется жизненный цикл маршрутизатора UI
    4. Жизненный цикл маршрутизатора UI onEnter fire
    5. Угловой этап жизненного цикла 2
  2. Изменение состояния foo -> bar

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

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

  5. ui-sref нажал

И т.д. … Спасибо!

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

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

Этот код сэкономит мне время и путаницу, если я начну использовать его, когда я впервые начну с Angular и UI-router. 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); }); 

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

В шаблоне:

  

В controllerе:

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

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

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

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

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

UI Router обновлен с помощью переходных крючков.

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

Перечень крючков:

  • onBefore – Переход вот-вот начнется
  • onStart – начался переход
  • onExit – (события состояния) Выходные состояния завершаются
  • onRetain – (события состояния) Сохраняются все сохраненные состояния
  • onEnter – (события состояния) Вводятся любые входящие состояния
  • onFinish – Переход скоро закончится
  • onSuccess – переход завершен и является либо успешным, либо ошибочным.
  • onError – переход завершен и является либо успешным, либо ошибочным.

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

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

  • Как отправлять и извлекать параметры с помощью $ state.go toParams и $ stateParams?
  • Угловой UI-маршрутизатор Вложенное разрешение штата в дочерних штатах
  • путь динамического шаблона ui-router
  • Использование ui-router с Bootstrap-ui modal
  • Угловой и UI-маршрутизатор, как установить динамический шаблонUrl
  • Путают $ locationChangeSuccess и $ stateChangeStart
  • Ввод $ state (ui-router) в $ http-перехватчик вызывает циклическую зависимость
  • Angularjs ui-router абстрактное состояние с разрешением
  • Угловой - ui-router получает предыдущее состояние
  • Interesting Posts

    Можно ли добавить графическую карту (Nvidia) на ноутбук?

    Единство: streamовое видео в реальном времени

    Запуск firefox tar.bz install в моем homedir с отдельными настройками из дистрибутива, установленного firefox

    Расширение переменной внутри одинарных кавычек в команде в Bash

    Retrofit2 Android: ожидается BEGIN_ARRAY, но BEGIN_OBJECT в строке 1 столбец 2 путь $

    Проводник Windows 10 не переименовывает новую созданную папку

    Почему жесткие диски не так велики, как рекламируются?

    Как выбрать первую строку для каждой группы в MySQL?

    Когда использовать поставщика контента

    MVC3 и Entity Framework

    java.lang.NoClassDefFoundError: Не удалось инициализировать class XXX

    Установка Laravel: как разместить каталог ~ / .composer / vendor / bin в вашем PATH?

    Предоставление разрешению конкретному пользователю доступа к файлу NFS

    Подтверждения IPN PayPal IPN с использованием процедур SSL: SSL3_READ_BYTES: сбой вызова подтверждения sslv3

    Bitlocker не запрашивает пароль?

    Давайте будем гением компьютера.