Курс фронтенд-разработки на Angular

Урок 1 • Модули Angular и загрузка приложения

Объясняет NgModules, корневой AppModule и то, как Angular загружает приложение. Предоставляет структурный контекст, необходимый перед созданием компонентов.

Урок 2 • Основы TypeScript для Angular

Знакомит с типами TypeScript, интерфейсами и декораторами, необходимыми для уверенного написания кода Angular. Соединяет знания JavaScript с типизированной экосистемой Angular.

Урок 3 • Введение в фреймворк Angular

Освещает роль Angular в современной фронтенд-разработке и его архитектуру, вдохновлённую MVC. Задаёт концептуальную основу для всех последующих тем фреймворка.

Урок 4 • Настройка среды разработки

Устанавливает и настраивает Node.js, npm и Angular CLI. Обеспечивает единое, воспроизводимое локальное рабочее пространство для каждого студента.

Урок 1 • Встроенные структурные директивы

Применяет *ngIf, *ngFor и *ngSwitch для динамического управления структурой DOM. Демонстрирует, как директивы расширяют выразительность шаблонов.

Урок 2 • Привязка свойств и событий

Обучает однонаправленному потоку данных через привязку свойств и обработке событий пользователя через привязку событий. Связывает логику компонента с элементами DOM и взаимодействиями пользователя.

Урок 3 • Синтаксис шаблонов и выражения

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

Урок 4 • Хуки жизненного цикла компонентов

Исследует полную последовательность хуков жизненного цикла от ngOnInit до ngOnDestroy. Обучает, когда и зачем использовать каждый хук для инициализации и очистки.

Урок 1 • Запросы ViewChild и ContentChild

Получает программный доступ к экземплярам дочерних компонентов и проецируемому содержимому с помощью запросов. Обеспечивает расширенную координацию компонентов за пределами привязки шаблонов.

Урок 2 • Связь родитель-ребёнок с @Input

Использует @Input для передачи данных вниз по дереву компонентов и проверяет входные данные с помощью сеттеров. Устанавливает основной шаблон нисходящего потока данных в Angular.

Урок 3 • Создание пользовательских структурных директив

Реализует структурные директивы с помощью TemplateRef и ViewContainerRef для управления DOM. Расширяет способность студентов создавать переиспользуемую логику макета.

Урок 4 • Создание пользовательских атрибутных директив

Создаёт директивы, изменяющие внешний вид или поведение элемента хоста без изменения структуры DOM. Закрепляет шаблон директив, представленный в главе 2.

Урок 1 • Создание и предоставление сервисов Angular

Генерирует сервисы с помощью CLI и регистрирует их на уровне модуля, компонента или корня. Устанавливает слой сервисов как место для общей логики.

Урок 2 • HTTP-клиент и интеграция REST API

Настраивает HttpClientModule и выполняет запросы GET, POST, PUT и DELETE. Связывает слой сервисов с реальными серверными источниками данных.

Урок 3 • Обработка ошибок и HTTP-перехватчики

Реализует глобальную обработку ошибок с помощью catchError и трансформацию запросов/ответов с помощью перехватчиков. Создаёт готовые к продакшену шаблоны HTTP-взаимодействия.

Урок 4 • Углублённое изучение внедрения зависимостей

Исследует иерархию DI, токены внедрения и типы провайдеров. Обеспечивает детальный контроль над тем, как разрешаются зависимости в приложении.

Урок 1 • Гварды маршрутов и контроль доступа

Реализует гварды CanActivate, CanDeactivate и CanLoad для защиты маршрутов. Интегрирует аутентификацию и авторизацию в слой навигации.

Урок 2 • Ленивая загрузка и резолверы маршрутов

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

Урок 3 • Вложенные маршруты и именованные выходы

Структурирует дочерние маршруты внутри родительских маршрутов и использует именованные выходы для вспомогательных представлений. Поддерживает сложные требования к макету в больших приложениях.

Урок 4 • Настройка маршрутизатора и базовая навигация

Настраивает RouterModule с определениями маршрутов и добавляет router-outlet и routerLink. Закладывает основу для всех функций навигации.

Урок 1 • Динамические формы с FormArray

Использует FormArray для добавления и удаления элементов управления формы во время выполнения для данных переменной длины. Обрабатывает реальные сценарии, такие как повторяющиеся строки.

Урок 2 • Валидаторы и пользовательская валидация

Применяет синхронные и асинхронные валидаторы и создаёт переиспользуемые пользовательские функции валидации. Обеспечивает целостность данных перед отправкой.

Урок 3 • Отправка формы и управление состоянием

Обрабатывает отправку, сброс и состояние dirty/touched формы для обеспечения качественного пользовательского опыта. Связывает данные формы с вызовами сервисов, представленными в главе 4.

Урок 4 • Шаблонные формы

Использует ngForm, ngModel и встроенные валидаторы для декларативного создания форм в шаблоне. Знакомит с концепциями форм с минимальным использованием TypeScript.

Урок 1 • NgRx Entity и DevTools

Упрощает управление коллекциями с помощью NgRx Entity и позволяет инспектировать состояние с помощью Redux DevTools. Ускоряет разработку и отладку функций с интенсивным использованием хранилища.

Урок 2 • Введение в NgRx Store

Устанавливает NgRx и определяет действия, редюсеры и хранилище для среза функциональности. Устанавливает шаблон Redux в экосистеме Angular.

Урок 3 • Состояние на основе сервисов с BehaviorSubject

Хранит и разделяет состояние между компонентами с помощью BehaviorSubject в сервисе. Предоставляет лёгкое решение для управления состоянием до введения NgRx.

Урок 4 • NgRx Effects для побочных эффектов

Обрабатывает асинхронные операции, такие как HTTP-вызовы, за пределами редюсеров с помощью NgRx Effects. Сохраняет редюсеры чистыми и централизует логику побочных эффектов.

Урок 1 • Стратегии развёртывания и интеграция CI/CD

Развёртывает сборки Angular на статическом хостинге и интегрирует автоматизированные конвейеры для непрерывной доставки. Завершает жизненный цикл разработки от кода до продакшена.

Урок 2 • Модульное тестирование компонентов и сервисов

Пишет модульные тесты с Jasmine и TestBed для компонентов, сервисов и пайпов. Проверяет отдельные модули изолированно перед интеграцией.

Урок 3 • Оптимизация бандла и конфигурация сборки

Настраивает производственные сборки, tree shaking и дифференциальную загрузку для оптимального размера бандла. Готовит приложение к ограничениям реального развёртывания.

Урок 4 • Сквозное тестирование с Cypress

Автоматизирует тестирование пользовательских потоков с помощью Cypress для проверки полного поведения приложения. Дополняет модульные тесты реалистичными сценариями в браузере.