Angular 22: кабинет заявок «Диспетчер»
«Диспетчер» — общий учебный проект кабинета заявок и API. Этот курс содержит 16 самостоятельных учебных результатов и одну полную конечную версию исходников. Исходные записи: rq-101 «Заменить проектор», rq-102 «Настроить Wi-Fi», rq-103 «Подготовить переговорную». Статусы new/active/done, version и HTTP-формы одинаковы в обоих курсах.
Последовательность результатов
| Урок | Полученный учебный результат |
|---|---|
| 1. Компонент Angular и модель заявки | Показать исходные заявки в standalone-компоненте. |
| 2. Signals и изменение локального состояния | Менять статус через новый массив в signal. |
| 3. Computed и отбор заявок | Получать отфильтрованный список и счётчик без копий. |
| 4. Входные данные компонента строки | Передавать Ticket в дочернюю строку по input. |
| 5. DI и общая учебная сессия | Получать один Session через inject и provider. |
| 6. Router и адрес отдельной заявки | Разделить список и карточку маршрутом /tickets/:id. |
| 7. Ленивые страницы и границы загрузки | Получать классы страниц через loadComponent. |
| 8. Reactive forms и независимый черновик | Редактировать title и status в типизированной FormGroup. |
| 9. Проверка формы и понятные сообщения | Объяснять required и длину рядом с полем. |
| 10. HttpClient и локальный fixture API | Читать заявки через один HTTP-контракт без сервера. |
| 11. RxJS и актуальность ответа списка | Связывать результат только с текущим фильтром. |
| 12. Фильтры списка в URL | Восстанавливать q и status по query-параметрам. |
| 13. Состояния страницы и доступные ошибки | Различать loading, empty, error и ready без потери смысла. |
14. PATCH и конфликт версии редактора |
Сохранять после подтверждения и оставлять черновик при 409. |
| 15. Учебная роль и границы авторизации UI | Разделять удобство интерфейса и серверное разрешение. |
| 16. Передача Angular-кабинета и подключение Nest | Передать одну конечную версию с воспроизводимым договором. |
Профиль и исходники
Angular/CLI/build 22.0.0, TypeScript 6.0.3, RxJS 7.8.2, Node 22.22.3+ внутри 22.x. Angular можно изучать до сервера: mode fixture перехватывает HttpClient в памяти. Remote сохраняет /api-контракт и использует локальный proxy к Nest. Signals/computed, DI, Router/lazy pages, typed forms и RxJS рассматриваются на одном списке.
Скачать одну полную конечную версию. Внутри README задаёт действия читателя, выбранные зависимости и границы; CONTRACT.md описывает API. Ранние листинги статьи названы упрощённым учебным состоянием либо фрагментом, поэтому архив не накладывается как комплект снимков каждого шага. Lockfile отсутствует: npm tree не разрешалось.
example_execution: not_run. Пакеты не устанавливались; программы, SQL, HTTP, миграции, тесты и измерения не запускались. Все реакции, status и JSON в уроках ожидаемые. Авторская проверка ограничена чтением официальных источников и просмотром текста/структуры файлов. Сборка страниц сайта не подтверждает выполнение учебного проекта.
Границы лаборатории
Один общий список, первые 200 совпадений и total без следующей страницы. Учебные tokens публичны, Nest слушает loopback: настоящие аккаунты, tenants и production-доступ не реализованы. PATCH требует title/status/version и атомарно меняет Ticket вместе с журналом. 409 оставляет Angular-черновик, reload заменяет его явно. Потеря ответа после COMMIT неоднозначна; idempotency и автоматический merge отсутствуют. Fixture не хранит данные между перезагрузками или вкладками.
Соседний курс: NestJS API. Общий маршрут: интерактивная веб-разработка.