Tworzenie aplikacji z użyciem Angular

Wprowadzenie do 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

Komponenty i widoki

• Koncepcja komponentów jako podstawowych jednostek UI
• Wzorzec kompozytu — budowanie złożonych interfejsów z prostych komponentów
• Różnice między komponentami deklarowanymi a standalone
• Szablony komponentów, selektory, stylowanie CSS/SCSS, style enkapsulowane vs globalne
• 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, RxJS
• Sygnały, obserwowalność zmian, efekty, memoizacja i aktualizacje UI
• Kiedy stosować komponenty, dyrektywy strukturalne i atrybutowe, a kiedy pipes
• Praktyczne techniki zarządzania zależnościami komponentów i ich testowalność

Obsługa formularzy

• 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

Routing i nawigacja

• 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

Usługi i zależności

• 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

Komunikacja z API

• 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

Programowanie reaktywne

• Wprowadzenie do reaktywności i paradygmatu programowania deklaratywnego
• Porównanie: callbacki, Promise, RxJS, Signals — zastosowania i różnice
• Tworzenie i zarządzanie strumieniami danych
• Typowe operatory RxJS: map, switchMap, debounceTime, catchError, concatMap
• Modele push/pull i multicast/unicast — zrozumienie przepływu danych
• Tworzenie reaktywnych komponentów i formularzy
• Signals: podstawy, pochodne, efekty i zasoby — nowy model reaktywności Angulara

Testowanie aplikacji Angular

• Znaczenie testowania i TDD/BDD w aplikacjach webowych
• Konfiguracja środowiska testowego — Karma, Jasmine, TestBed
• Pisanie testów jednostkowych dla komponentów, dyrektyw i usług
• 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

materiały szkoleniowe - część teoretyczna szkolenia, slajdy - zostaną udostępnione uczestnikom na szkoleniu w formie pdf.

uczestnik otrzyma certyfikat uczestnictwa z opisem nabytych umiejętności

Od uczestników wymagana jest umiejętność programowania w języku JavaScript lub TypeScript

Szkolenie będzie prowadzone zdalnie, w czasie rzeczywistym, na żywo, z trenerem, możliwością zadawania pytań.

Szkolenie składa się w 30% z wykładu teoretycznego, w 70% z warsztatów i samodzielnej pracy programistycznej.

Podczas szkolenia uczestnicy mają dostęp do czatu z trenerem, współdzielą ekran podczas części warsztatowej, żeby zaprezentować postęp swojej pracy.

Walidacja będzie bazowała na ocenie efektów samodzielnej pracy uczestników, będzie sprawdzała nabytą wiedzę teoretyczną i umiejętność jej zastosowania w praktyce.

szkolenie na platformie zoom, wymagane:

stabilne połączenie internetowe (zalecane min. 10Mbit/s download i 1Mbit/s upload)

przeglądarka internetowa Chrome

zainstalowana aplikacja Zoom App

dobrej jakości słuchawki oraz mikrofon (opcjonalnie) kamera internetowa

link do szkolenia zostanie przesłany uczestnikom przed szkoleniem i będzie aktywny do końca szkolenia.