🅰️ День 4
🗺 Теоретическая подготовка: Ментальный сдвиг
| Концепт | Как это в React (react-router-dom) | Как это в Angular 20+ (@angular/router) |
|---|---|---|
| Параметры URL | Хуки useParams(), useSearchParams(). | Свойства-сигналы через декоратор @Input() или DI-сервис ActivatedRoute. |
| Защита роутов | Компоненты-обертки (<ProtectedRoute><Outlet /></ProtectedRoute>). | Functional Guards: Чистые функции, внедряемые в конфигурацию роута через DI. |
| Предзагрузка | Метод loader в Data Routers (запускается параллельно с рендером). | Resolvers: Функции-трансформеры, которые не пустят компонент на экран, пока данные не разрешатся. |
Шаг 1: Функциональный роутинг, Lazy Loading и Component Input Binding (3 часа)
- Теория: Изучение декларативной конфигурации роутера (
provideRouter). Разбор флага withComponentInputBinding(), который автоматически превращает query-параметры (?search=apple) и dynamic params (/user/:id) в стандартные нативные сигнальные инпуты компонента (input()), полностью избавляя от ручного парсинга URL. - Практика: Создание ленивого модуля для админ-панели лаборатории (
loadComponent: () => import(...)). Настройка сквозного прокидывания параметров URL напрямую в стейт без участия хуков.
Шаг 2: Реактивные мосты: Трансформация RxJS потоков в Signals (toSignal) (3 часа)
- Теория: Роутер и HTTP-клиент Angular исторически возвращают асинхронные потоки RxJS Observable. Но шаблоны в Zoneless-режиме хотят читать синхронные Signals. Изучаем функцию-мост
toSignal(), которая подписывается на поток, управляет его жизненным циклом и конвертирует асинхронные события в синхронный стейт. - Практика: Реализация поиска «на лету» с дебаунсом. Связываем input-сигнал поисковой строки, пропускаем его через RxJS операторы
debounceTimeиswitchMapдля отмены Race Conditions при запросах к API, и преобразуем результат в нативныйSignalдля хирургического вывода в DOM.
Шаг 3: Функциональные Guards и Resolvers в Zoneless-окружении (2 часа)
- Теория: Полный отказ от старых ООП-классов CanActivate. Написание легковесных стрелочных функций-гвардов, которые проверяют статус авторизации во внешнем сторе или куках перед переходом. Изучение работы резолверов: как дождаться ответа от сервера до того, как компонент начнет инициализироваться.
- Практика: Написание гварда authGuard, который запрашивает статус ядра из нашего вчерашнего
ExternalEngineStore(используя фабричныйinject), и блокирует переход на страницу админки, если внешнее ядро находится в режиме Offline.
🧪 Лабораторный чек-лист конца дня (Что должно работать в браузере)
- При вводе в URL
/dashboard?search=angularкомпонент автоматически подхватывает строку поиска через сигнальный инпут. - Сетевые запросы не дублируются при быстром вводе благодаря RxJS-операторам, а UI не моргает, так как граф зависимостей обновляется синхронно.
- Попытка перейти на секретный роут при выключенном внешнем движке перенаправляет пользователя на главную страницу песочницы.