Современный Angular¶

Автономные компоненты: ментальная модель и совместимость

Почему мы вообще запустили NgModules?

Знакомство с автономными компонентами

Ментальная модель

Пайпы, директивы и сервисы

Загрузка автономных компонентов

Совместимость с существующим кодом

Попутное замечание: модуль CommonModule

Архитектура с отдельными компонентами

Группировка строительных блоков

Импортирование целых бочек

Бочки с красивыми именами: сопоставление путей

Библиотеки рабочих пространств и Nx

Границы модулей с использованием Sheriff

Автономные API для маршрутизации и ленивой загрузки

Предоставление конфигурации маршрутизации

Использование директив маршрутизатора

Ленивая загрузка с автономными компонентами

Инжекторы среды: Службы для конкретных маршрутов

Настройка NGRX и функций Slices

Настройка окружения: ENVIRONMENT_INITIALIZER

Компонентный вход привязки

Элементы Angular с автономными компонентами

Предоставление автономного компонента

Установка элементов Angular

Загрузка с помощью элементов Angular

Попутная заметка: Загрузка нескольких компонентов

Вызов элемента Angular

Вызов веб-компонента в компоненте Angular

Бонус: компиляция самодостаточного бандла

HttpClient: автономные API и функциональные перехватчики

Автономный API для HttpClient

Функциональные перехватчики

Перехватчики и ленивая загрузка

Проблема с запросами, сделанными родителями

Устаревшие перехватчики и другие особенности

Дополнительные возможности

Тестирование автономных компонентов

Настройка тестов

Макет HttpClient

Неглубокое тестирование

Макет маршрутизатора и магазина

Паттерны для автономных API

Пример для паттернов

Золотое правило

Паттерн: фабрика провайдеров

Паттерн: Функция

Паттерн: Фабрика поставщиков конфигурации

Паттерн: мост NgModule Bridge

Паттерн: цепочка сервисов

Паттерн: функциональный сервис

Как подготовиться к автономным компонентам?

Вариант 1: страусиная стратегия

Вариант 2: просто выбросить модули Angular

Вариант 2a: Автоматическая миграция на Standalone

Вариант 3: Заменить модули Angular на бочки

Вариант 4: Рабочее пространство Nx с библиотеками и правилами линтинга

Вариант 4a: Границы модулей на основе папок с шерифом

Миграция на автономные компоненты

Первый взгляд на приложение для миграции

Шаг 1

Шаг 2

Шаг 3

Бонус: переход на автономные API

Сигналы в Angular

Обнаружение изменений сегодня: Zone.js

Обнаружение изменений завтра: сигналы

Использование сигналов

Обновление сигналов

Сигналы должны быть неизменяемыми

Вычисленные значения, побочные эффекты и утверждения

Эффектам нужен контекст инъекции

Запись сигналов в эффектах

Сигналы и обнаружение изменений

RxJS Interop

NGRX и другие хранилища?

Связь компонентов с сигналами

Входные сигналы

Двустороннее связывание данных с сигналами модели

Контентные запросы с сигналами

Выходной API

Просмотр запросов с сигналами

Запросы и ViewContainerRef

Паритет характеристик между контентом и запросами вида

Эффективное использование сигналов

Начальный пример с некоторыми возможностями для улучшения

Правило 1: Выводить состояние синхронно везде, где это возможно

Правило 2: избегать эффектов для распространения состояния

Правило 3: Хранилища упрощают реактивный поток данных

Встроенный поток управления и откладываемые представления

Новый синтаксис для потока управления в шаблонах

Автоматическая миграция на встроенный поток управления

Отложенная загрузка

esbuild и новый конструктор приложений

Производительность сборки с esbuild

SSR без усилий с новым конструктором приложений

Больше, чем SSR: неразрушающая гидратация

Больше деталей о гидратации в Angular