Kategoria: JavaScript, programowanie front-end, frameworki JS

O szkoleniu

Angular to framework, który firmy wybierają do dużych i długo utrzymywanych aplikacji webowych: systemów wewnętrznych, bankowości, ubezpieczeń czy administracji. Rozwija go Google, a kolejne wersje wyraźnie go unowocześniły. Na szkoleniu uczestnicy budują krok po kroku przykładową aplikację w nowoczesnym Angularze: od projektu w Angular CLI, przez komponenty standalone, sygnały i RxJS, formularze i routing, po komunikację z REST API, testy i pracę z asystentem AI.

Po trzech dniach zajęć:

zbudujesz aplikację z komponentów standalone, korzystając z nowej składni szablonów,
zapanujesz nad stanem aplikacji z użyciem sygnałów i RxJS,
przygotujesz formularze z walidacją, routing i komunikację z REST API,
napiszesz testy jednostkowe komponentów i serwisów,
zrozumiesz idee i dobre praktyki Angulara — także pułapki, na które trafiają programiści nieznający jego specyfiki.

Szczególnie dużo uwagi poświęcamy mechanizmom, które sprawiają trudność, gdy aplikacja rośnie, oraz motywacjom stojącym za pozornie dziwnymi decyzjami projektantów frameworka. Pokazujemy też, jak czytać starszy kod Angulara, z którym pracuje wiele zespołów, i jak wyłapywać przestarzałe wzorce w kodzie generowanym przez AI.

Szkolenie jest dla programistów, którzy pracują albo będą pracować z aplikacjami w Angularze: front-end i full-stack developerów, programistów Javy, .NET i innych języków dołączających do prac nad interfejsem, osób przechodzących z Reacta lub Vue oraz zespołów utrzymujących i modernizujących istniejące aplikacje. Jeśli w ogóle nie znasz JavaScriptu, dobrym pierwszym krokiem będzie Nowoczesny JavaScript i TypeScript dla programistów.

W Twojej firmie działają jeszcze aplikacje w AngularJS 1.x? Prosimy o kontakt — przygotujemy szkolenie pod migrację.

Czas trwania

3 dni, 9:00 - 17:00

Program

Angular — architektura i sposób pracy
- Miejsce Angulara wśród frameworków front-endowych: kiedy i dlaczego wybierają go firmy
- Składniki aplikacji: komponenty, szablony, serwisy, wstrzykiwanie zależności, routing
- AngularJS 1.x a współczesny Angular — rzut okiem, przydatne przy utrzymaniu starszych aplikacji
Środowisko i budowanie aplikacji
- Angular CLI: tworzenie projektu, generowanie komponentów i serwisów
- Serwer deweloperski i budowanie wersji produkcyjnej
- Kompilacja TypeScriptu i SCSS, struktura projektu, linting i formatowanie kodu
TypeScript w zakresie potrzebnym w Angularze
- Typy, interfejsy i klasy
- Typowanie danych z API, generyki w praktyce
- Moduły: import i eksport, dekoratory
Szablony i wiązanie danych
- Interpolacja, wiązanie właściwości i zdarzeń, wiązanie dwukierunkowe
- Wbudowana składnia sterowania: @if, @for, @switch
- Dynamiczne klasy i style: wiązanie class i style, NgClass, NgStyle
- Pipes wbudowane i własne
- Starsza składnia *ngIf i *ngFor — jak ją czytać w istniejącym kodzie
Komponenty
- Komponenty standalone: dekorator @Component, szablon i style
- Wejście i wyjście komponentu: input(), output(), model()
- Cykl życia komponentu
- Komponenty nadrzędne i podrzędne, projekcja treści
- Enkapsulacja stylów
- Biblioteki komponentów UI — rzut okiem na Angular Material
Serwisy i wstrzykiwanie zależności
- Serwisy i ich zasięg, funkcja inject()
- Logika biznesowa poza komponentami
Sygnały: stan i reaktywność
- Signal, computed i effect
- Stan komponentu i stan współdzielony w serwisie
- Wykrywanie zmian: OnPush i aplikacje bez zone.js — co to zmienia w praktyce
Programowanie reaktywne z RxJS
- Observable i subskrypcje, pipe async
- Najważniejsze operatory: map, filter, switchMap, debounceTime, catchError
- Reagowanie na zdarzenia użytkownika, np. wyszukiwanie w trakcie pisania
- RxJS i sygnały razem: toSignal i toObservable
Formularze
- Formularze reaktywne i szablonowe — kiedy które
- Typowane formularze, walidatory wbudowane i własne, walidacja asynchroniczna
- Nasłuchiwanie zmian i prezentacja błędów
- Signal Forms — rzut okiem na nowe podejście
Routing
- Definiowanie tras, parametry, trasy zagnieżdżone
- Nawigacja z szablonu i z kodu
- Leniwe ładowanie części aplikacji
- Guardy i resolvery
Komunikacja z serwerem
- HttpClient: pobieranie, dodawanie i modyfikacja danych przez REST API
- Stany ładowania i obsługa błędów
- Interceptory: nagłówki, uwierzytelnianie, wspólna obsługa błędów
Testy i debugowanie
- Testy jednostkowe w Vitest: komponenty i serwisy, TestBed
- Atrapy zależności i odpowiedzi serwera
- Testy end-to-end — rzut okiem
- Debugowanie w przeglądarce i w Angular DevTools
Praca z asystentem AI w projekcie Angular
- Generowanie i refaktoryzacja komponentów, serwisów i testów
- Kontekst projektu dla asystenta AI: reguły i wsparcie w Angular CLI
- Gdzie AI się myli: przestarzałe wzorce (NgModules, *ngIf, stare narzędzia testowe) i jak je wyłapać
Co dalej — rzut okiem: @defer, renderowanie po stronie serwera (SSR), zarządzanie stanem w większych aplikacjach (NgRx)

Na zamówienie dopasowujemy zakres i proporcje: migracja aplikacji z AngularJS, aktualizacja aplikacji do nowszej wersji Angulara, przejście z NgModules na komponenty standalone i z Karmy na Vitest, zarządzanie stanem z NgRx, SSR, testy end-to-end (Playwright, Cypress) albo przykłady oparte na stosie technologicznym zamawiającego.

Pobierz w wersji PDF

Training also available in English .

Przeznaczenie i wymagania

Szkolenie jest przeznaczone przede wszystkim dla:

programistów, którzy zaczynają pracę w projekcie opartym na Angularze,
front-end i full-stack developerów znających inny framework (np. React, Vue),
programistów backendu, którzy coraz częściej pracują też nad interfejsem aplikacji,
zespołów utrzymujących i modernizujących aplikacje w Angularze, także te pisane w starszym stylu.

Od uczestników oczekujemy przede wszystkim podstawowej znajomości JavaScriptu (funkcje, obiekty i tablice, praca z danymi asynchronicznymi) oraz HTML i CSS. Znajomość TypeScriptu nie jest konieczna — potrzebne podstawy omawiamy na zajęciach. Ogólna orientacja w programowaniu obiektowym ułatwi start.