Szkolenie: Tworzenie aplikacji z użyciem Angular

Wprowadzenie do ekosystemu Angulara — krótka historia i obecne miejsce na rynku

Dlaczego Angular? Przewagi i ograniczenia w porównaniu do innych frameworków

Wzorce projektowe charakterystyczne dla Angulara (DI, MVVM, modularność)

Omówienie celu szkolenia i planu realizacji aplikacji demonstracyjnej

Wstęp do dobrej architektury aplikacji frontendowej

Konfiguracja środowiska pracy: edytory, rozszerzenia i narzędzia linii komend

Wprowadzenie do Angular CLI i jego rola w automatyzacji

Tworzenie projektu „od zera” — podejście strukturalne i modularne

Konfiguracja i integracja bibliotek komponentów UI (np. Angular Material, PrimeNG, Tailwind)

Generator kodu, aliasy ścieżek, linting, formatowanie kodu — konfiguracja jakości projektu

Wprowadzenie do monorepo i wielomodułowej architektury projektu

Koncepcja komponentów jako podstawowych jednostek UI

Wzorzec kompozytu — budowanie złożonych interfejsów z prostych komponentów

Komponenty standalone — domyślne podejście w nowoczesnym Angular

Szablony komponentów, selektory, stylowanie CSS/SCSS, style enkapsulowane vs globalne

Nowa składnia kontroli przepływu: @if, @for, @switch + migracja z *ngIf

Odroczony rendering z blokami @defer — lazy loading w szablonach

Wiązanie danych: jednokierunkowe, dwukierunkowe, dynamiczne atrybuty

Obsługa zdarzeń użytkownika i przekazywanie parametrów

Cykl życia komponentu — omówienie hooków i ich zastosowań

Komunikacja między komponentami: Input/Output, ViewChild, serwisy, EventEmitter

Sygnały: signal(), computed(), effect(), linkedSignal(), resource() — model reaktywności Angular

Kiedy stosować komponenty, dyrektywy atrybutowe, a kiedy pipes

Praktyczne techniki zarządzania zależnościami komponentów i ich testowalność

Formularze szablonowe vs reaktywne — kiedy które podejście

Tworzenie i zarządzanie formularzami prostymi oraz zagnieżdżonymi

Walidacja danych: synchroniczna, asynchroniczna, reguły walidatorów

Zarządzanie stanem formularza i prezentacja błędów użytkownikowi

Dynamiczne formularze — tworzenie pól w locie, FormArray, FormGroup

Typowanie i kontrola nad modelem danych formularza

Obsługa zmian w formularzach i nasłuchiwanie zdarzeń formularzowych

Praktyczne przykłady — tworzenie formularzy rejestracyjnych, filtrów, konfiguratorów

Najczęstsze błędy i antywzorce w pracy z formularzami

Definiowanie i zarządzanie ścieżkami nawigacyjnymi

Konfiguracja zagnieżdżonych tras i mechanizmu router-outlet

Obsługa parametrów tras i ich typowanie

Przekierowania, fallbacki, obsługa błędów nawigacyjnych

Implementacja guards (AuthGuards, RoleGuards, Resolver)

Budowanie struktury nawigacyjnej aplikacji: menu, okruszki, breadcrumbs

Lazy loading — strategie ładowania modułów i optymalizacja wydajności

Testowanie i debugowanie nawigacji

Koncepcja usług i ich rola w architekturze Angulara

Deklarowanie i rejestrowanie usług — @Injectable, providedIn, injection tokens

Przekazywanie i wstrzykiwanie konfiguracji, zależności zewnętrznych i globalnych

Poziomy dostępu i cykl życia usług — root, module, component scope

Tworzenie niestandardowych tokenów i providerów

Dobre praktyki organizowania logiki biznesowej w usługach

Integracja usług z komponentami i formularzami

Reaktywny model HTTP w Angular z użyciem HttpClient

Wysyłanie zapytań do REST API — GET, POST, PUT, DELETE

Zarządzanie parametrami, nagłówkami i autoryzacją

Obsługa błędów, retry logic, timeouts, logowanie zapytań

Tworzenie i stosowanie interceptorów — globalne przetwarzanie zapytań

Strategia zarządzania stanem danych: cache lokalny, unikanie nadmiarowych zapytań

Integracja z serwisami backendowymi

Architektura bezstanowa vs zarządzanie sesją użytkownika

Wprowadzenie do reaktywności i paradygmatu programowania deklaratywnego

Porównanie: callbacki, Promise, RxJS, Signals — zastosowania i różnice

Signals jako główny model reaktywności: signal(), computed(), effect()

Zaawansowane API sygnałów: linkedSignal() i resource() / rxResource()

Tworzenie i zarządzanie strumieniami danych z RxJS

Typowe operatory RxJS: map, switchMap, debounceTime, catchError, concatMap

Interoperacyjność Signals i RxJS: toSignal(), toObservable()

Modele push/pull i multicast/unicast — zrozumienie przepływu danych

Tworzenie reaktywnych komponentów i formularzy

Znaczenie testowania i TDD/BDD w aplikacjach webowych

Konfiguracja środowiska testowego — Vitest, TestBed (Karma jako narzędzie legacy)

Pisanie testów jednostkowych dla komponentów, dyrektyw i usług

Testowanie komponentów opartych na sygnałach

Mockowanie zależności i symulowanie zachowań serwera

Testy integracyjne — sprawdzanie współpracy modułów

End-to-end (E2E) testy z użyciem Cypress lub Playwright — scenariusze użytkownika

Strategie testowania — co, jak i kiedy testować w aplikacji Angular

Pokrycie kodu testami, analiza raportów i testy regresyjne

Najczęstsze błędy i dobre praktyki w testowaniu aplikacji frontendowych

Migracja z NgModules do komponentów standalone

Migracja ze składni strukturalnych (*ngIf, *ngFor) do nowej składni (@if, @for, @switch)

Migracja testów z Karma/Jasmine do Vitest

Korzystanie z automatycznych migracji Angular CLI (ng update, schematics)

Najczęstsze problemy i strategie migracji dużych projektów