План, на якому побудовано курс

Таблиця IDP

Девʼять цілей індивідуального плану розвитку «Angular: Strong Junior» — дослівно, українською. Курс побудовано за ними: модулі 1–9 відповідають цілям 1–9. Якщо твій план інший, модулі однаково знадобляться — просто порядок може бути свій.

1. Core HTML & CSS Markup

Action items. Побудувати семантичну, чисту HTML5-структуру основних сторінок застосунку без зовнішніх UI-фреймворків. Застосувати сучасні техніки розкладки (CSS Grid і Flexbox) для сторінок, сайдбарів, форм і кастомних компонентів. Дотримати правильної специфічності CSS, методології (BEM або вкладеність SCSS) і кастомних CSS-змінних для тем (Dark/Light). Тримати чисте дерево DOM без зайвих обгорток («div soup»).

Success criteria. Якісна розмітка з семантичними тегами (

). Чиста структурована CSS/SCSS-архітектура без !important-хаків і поламаних розкладок. Робочий перемикач теми на чистих CSS-змінних.

2. Angular Architecture — Guards & Strict TypeScript Setup

Action items. Підняти проєкт на Angular CLI (v22+) зі strict-режимом TypeScript (рівно нуль використань any). Реалізувати власні Angular-сутності: кастомні директиви, пайпи та route guards (CanActivate / CanDeactivate). Використати generics і utility types (Partial, Pick, Omit, Readonly) для моделювання стану та DTO. Налаштувати ESLint так, щоб будь-який any валив збірку (@typescript-eslint/no-explicit-any).

3. Layout Precision & Change Detection Optimization

Action items. Інтегрувати власну HTML/CSS-розкладку в Angular-компоненти під фіксовані десктопні роздільності. Застосувати ChangeDetectionStrategy.OnPush і явну ViewEncapsulation. Стилізувати кастомні контроли (кнопки, інпути, статус-бейджі) відповідно до дизайн-токенів або специфікації Angular Material компанії.

Success criteria. Багатопанельний дашборд із точним піксельним вирівнюванням і оптимізованим OnPush-рендерингом. Чисте розділення presentation- і container-компонентів.

4. Service-Level Data Mocking & RxJS State Management

Action items. Мокати вхідні дані строго на рівні сервісів через RxJS (of, delay, throwError), дотримуючись контрактів Swagger REST. Використати просунуті оператори й сабджекти: BehaviorSubject/ReplaySubject для стану, combineLatest, forkJoin, debounceTime, switchMap. Забезпечити правильне відписування (takeUntilDestroyed або async pipe), щоб не текла пам'ять.

Success criteria. Дані повністю мокаються всередині сервісів за Swagger-специфікацією, нуль ручних .subscribe()-протікань. Реактивні стрими динамічно живлять UI через BehaviorSubject і combineLatest. Акуратна обробка помилок і симуляція завантаження.

5. Complex Grid / Data Table Implementation

Action items. Реалізувати насичену таблицю на Angular Material Table або AG-Grid: багатоколонкове сортування, клієнтська пагінація, динамічний пошук-фільтр і вибір рядків на строго типізованих моделях.

Success criteria. Таблиця плавно рендерить динамічні моковані стрими з повною типобезпекою. Користувач може фільтрувати, сортувати й гортати без лагів UI та витоків пам'яті.

6. Reactive Forms & Custom Validations

Action items. Зробити CRUD-модалки/форми для додавання й редагування елементів гриду на строго типізованому ReactiveFormsModule. Додати кастомні валідатори (наприклад, асинхронна перевірка дубліката назви проти мокованих даних сервісу, динамічні правила валідації залежно від статусу сутності).

Success criteria. Повністю типізовані Reactive Forms із миттєвим фідбеком і зрозумілими повідомленнями про помилки. Модалки чисто зберігають і оновлюють стан через методи сервісу зі строгими TypeScript-інтерфейсами.

7. UI/UX Refinement & Accessibility (a11y)

Action items. Додати скелетони/спінери для відображення асинхронної затримки сервісу. Реалізувати порожні стани й error boundaries. Забезпечити ARIA-атрибути, відповідність контрасту кольорів і повну навігацію з клавіатури.

Success criteria. Професійний UX: застосунок акуратно тримає стани завантаження й порожнечі під час мокованих викликів. Основні флоу (навігація таблицею, модальні форми) проходяться виключно з клавіатури.

8. Unit Testing Core Logic (Karma & Jasmine)

Action items. Написати 2–3 юніт-тести для дата-сервісів, які перевіряють емісії мокованих RxJS-даних і мутації стану (Jasmine/Karma). Написати 2 юніт-тести для логіки валідації форм, guards або кастомних пайпів із перевіркою типів.

Success criteria. Набір тестів проходить чисто через ng test. Тести валідують сервісні моковані стрими й бізнес-логіку без жодних попереджень типів.

9. Azure DevOps / GitHub Flow — Git & Code Review Process

Action items. Вести життєвий цикл задач в Azure Boards; дотримуватись правил іменування гілок і вимог до PR в Azure Repos / Git. Комітити за Conventional Commits (feat:, fix:, refactor:) і проходити peer code review. Читати логи Azure Pipelines, знаходити й лагодити падіння збірки чи лінтера в CI.