Курс Frontend-розробки (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 • Поглиблене вивчення впровадження залежностей

Досліджує ієрархію впровадження залежностей, токени впровадження та типи провайдерів. Забезпечує дрібнозернистий контроль над тим, як залежності вирішуються в усьому застосунку.

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

Реалізує гварди CanActivate, CanDeactivate та CanLoad для захисту маршрутів. Інтегрує автентифікацію та авторизацію у шар навігації.

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

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

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

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

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

Налаштовує RouterModule з визначеннями маршрутів та додає router-outlet і routerLink. Встановлює основу для всіх функцій навігації.

Урок 1 • Динамічні форми з FormArray

Використовує FormArray для додавання та видалення елементів керування формами під час виконання для даних змінної довжини. Обробляє реальні сценарії, такі як повторювані рядки елементів.

Урок 2 • Валідатори та користувацька валідація

Застосовує синхронні та асинхронні валідатори та створює багаторазові користувацькі функції валідації. Забезпечує цілісність даних перед надсиланням.

Урок 3 • Надсилання форми та керування станом

Обробляє надсилання форми, скидання та стан dirty/touched для забезпечення полірованого UX. Поєднує дані форми з викликами сервісів, представленими в Розділі 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 для перевірки повної поведінки застосунку. Доповнює модульні тести реалістичними сценаріями на основі браузера.