Как работает маршрутизатор Angular

Резюмируя статью “The 7-step process of Angular router navigation

Работу маршрутизатора мы можем разбить на 7 этапов:

  1. Parse: разбирает  сроку запроса
  2. Redirect: выполняет перенаправление (если нужно)
  3. Identify: определяет стейт
  4. Guard: запускает гарды конкретного стейта
  5. Resolve: резолвит данные стейта
  6. Activate: активирует компонент
  7. Manage: слушает изменения, чтобы повторить процесс сначала

Давайте рассмотрим каждый этап более подробно.

Continue reading

Новое в Angular4.3

  • HttpClient – принципиально новый клиент, который переехал из отдельного модуля в подсекцию common (‘@angular/common/http‘):
    • позволяет получить данные сразу в JSON
    • типизировать возвращаемые данные вывод
    • появляются интерсепторы
    • задание дефолтных заголовков (например токена авторизации)
    • подписаться события прогресса
  • Новые гарды роутера: GuardsCheckStart, GuardsCheckEnd, ResolveStart, ResolveEnd, NavigationStart
  • Опция для отключения анимации в детях
  • Специальный CSS селектор ::ng-deep, который является альтернативой >>>

Angular: Что такое forwardRef?

Мы иногда встречаем в коде:

и сразу не понятно, что это магическая функция forwardRef. На самом деле все просто: forwardRef – это функция-обертка. Зачем она нужна? Чтобы мы могли задавать значением свойства сущности, которые объявлены ниже (иначе будет ошибка):

Также можно глянуть в исходники, и убедиться что это просто метод-обертка:

Формы и валидация данных в Angular

В отличии от AngularJS в Angular сделали целый модуль, который помогает в обработке форм.

Angular предлагает 2 подхода работы с формами:

  • основанный на шаблонах (template-driven)
  • реактивный (reactive)

Шаблонный более традиционный для декларативного подхода фреймворка. Реактивный появился позже и считается более прогрессивным и гибким. Мы разберем оба подхода.

Continue reading

Запускаем Angular виджет в приложение без Angular

Очень маловероятно, что вы захотите добавлять Angular в приложение только для того, чтобы завести один компонент. Рекомендую смотреть на этот пост, не как на практическое руководство к действию, а как на работу по исследованию возможностей фреймворка.

Continue reading

Что нового в Angular 4.2

  • оператор не нулевого присвоения ( Non-null assertion operator ) теперь можно использовать в шаблонах:

    <h2>{{ user!.name }}</h2>
  • очень много изменений по анимации (смотрите в отдельном посте)
  • добавили поддержку mix & max стандартных валидаторов (но уже в 4.3.0-beta.0 удалили эту возможность признав как breaking change)
  • в тестах появились 3 вспомогательных метода:
    • TestBed.overrideProvider()приближает возможность тестировать в AOT,
    • flush() – для сбрасывания всех счетчиков и выполнения колбэков всех асинхронных операций,
    • fixture.whenRenderingDone() – возвращает промис, который ждет выполнения всех анимаций

Angular & Rxjs: Отписываться или не отписываться?

Как вы наверное уже знаете при подписке на обозреваемую последовательность либо просто событие в Javascript вы обычно должны в определенный момент отписываться, чтобы освободить память. Иначе это приведет к утечке памяти.

Мы рассмотрим основные случаи, когда вы должны отписываться в ngOnDestroy хуке компонента, а также случаи, когда можно не отписываться.

Continue reading

Изучаем Redux и пишем свой Mini-Redux

Предлагаю вам перевод статьи Learn Redux by coding a Mini-Redux.

Существует множество ресурсов по изучению Redux: официальная документация, примеры, учебники, статьи, видео уроки… Имея такое большое количество информации многие начинающие Redux разработчики порой просто теряются в ней.

Другой подход изучения – это самостоятельно написать прототип Redux, чтобы понять основы библиотеки. Для меня это был реальный прорыв.

Не беспокойтесь, это совсем не сложно. Ядро Redux, как вы убедитесь, достаточно просто.

Для начала нам необходимо общее понимание что делает Redux.

Continue reading