Angular 17 - Plan Szkolenia

Wprowadzenie do Angulara 17

• Czym jest Angular?
• Angular vs React vs Vue
• Przegląd funkcji i architektury Angulara 17
• Konfiguracja środowiska programistycznego

Rozpoczęcie pracy

• Tworzenie nowego projektu w Angularze 17 za pomocą Angular CLI
• Poznanie struktury projektu i plików
• Uruchamianie i serwowanie aplikacji
• Wyświetlanie danych za pomocą interpolacji i wyrażeń

Komponenty

• Rozumienie roli komponentów w Angularze 17
• Tworzenie i używanie komponentów
• Przekazywanie danych między komponentami za pomocą pól wejściowych (inputs) i wyjściowych (outputs)
• Korzystanie z haków cyklu życia komponentów

Dyrektywy

• Rozumienie różnic między dyrektywami strukturalnymi a atrybutowymi
• Tworzenie i używanie wbudowanych dyrektyw, takich jak ngIf, ngFor, ngSwitch itp.
• Tworzenie i używanie niestandardowych dyrektyw

Rury (Pipes)

• Rozumienie celu stosowania rur (pipes) w Angularze 17
• Tworzenie i używanie wbudowanych rur, takich jak date, currency, json itp.
• Tworzenie i używanie niestandardowych rur

Usługi

• Rozumienie roli usług w Angularze 17
• Tworzenie i używanie usług
• Wstrzykiwanie zależności za pomocą dostawców (providers)

Moduły

• Rozumienie roli modułów w Angularze 17
• Tworzenie i używanie modułów
• Importowanie i eksportowanie modułów

Wiązanie danych

• Rozumienie różnic między jednostronnym a dwustronnym wiązaniem danych
• Tworzenie i używanie wiązania właściwości, wiązania zdarzeń oraz składni "banana w pudełku" (banana-in-a-box)
• Używanie zmiennych referencyjnych w szablonach

Routing

• Rozumienie roli routingu w Angularze 17
• Tworzenie i konfigurowanie tras
• Nawigacja między trasami za pomocą routerLink i router.navigate()
• Używanie parametrów trasy, parametrów zapytania i fragmentów

Formularze

• Rozumienie różnic między formularzami opartymi na szablonie a reaktywnymi
• Tworzenie i walidacja formularzy za pomocą elementów sterujących, grup formularzy, tablic formularzy itp.
• Używanie wbudowanych walidatorów, takich jak required, minLength, maxLength itp.
• Tworzenie i używanie niestandardowych walidatorów

Klient HTTP

• Rozumienie roli klienta HTTP w Angularze 17
• Tworzenie i używanie żądań HTTP do komunikacji z usługami backendowymi
• Używanie obserwowalnych (observables) do obsługi asynchronicznych strumieni danych
• Stosowanie interceptorów do modyfikacji lub obsługi żądań lub odpowiedzi HTTP

Nowy, deklaratywny przepływ sterowania

• Wyjaśnienie nowej składni bloków sterowania w szablonach i sposobu, w jaki upraszcza ona typowe zadania, takie jak warunkowe renderowanie, pętle i obsługa pustych kolekcji
• Przedstawienie przykładów użycia nowych bloków, takich jak @if, @else, @switch, @case, @default, @for i @empty
• Porównanie nowej składni ze starszą, np. *ngIf, *ngSwitch i *ngFor
• Omówienie sposobu, w jaki nowe bloki sterowania wspierają aplikacje bezstrefowe (zoneless) z sygnałami (signals)

Bloki opóźnionego ładowania

• Wyjaśnienie koncepcji opóźnionego ładowania oraz sposobu, w jaki może ona poprawić wydajność i doświadczenie użytkownika w aplikacjach webowych
• Przedstawienie nowego bloku sterowania @defer, który umożliwia opóźnione ładowanie treści bloku i jego zależności
• Przedstawienie przykładów użycia bloku @defer w różnych scenariuszach, takich jak ładowanie komponentów, dyrektyw, rur, animacji i stylów
• Omówienie sposobu, w jaki blok @defer współpracuje z nowym API przejść widokowych

API przejść widokowych (View Transitions)

• Wyjaśnienie celu i korzyści związanych z API przejść widokowych, które pozwalają programistom na dostosowywanie animacji i przejść między widokami
• Przedstawienie nowej dyrektywy withViewTransitions, która umożliwia korzystanie z API przejść widokowych
• Przedstawienie przykładów użycia dyrektywy withViewTransitions z różnymi typami przejść, takimi jak fade, slide, zoom i flip
• Omówienie sposobu, w jaki API przejść widokowych współpracuje z routerem Angulara i historią przeglądarki

Inne funkcje i ulepszenia

• Krótkie podsumowanie innych funkcji i ulepszeń oferowanych przez Angulára 17, takich jak:
• Wsparcie dla przekazywania @Component.styles jako ciągu znaków
• Kod animacji w Angularze jest możliwy do załadowania opóźnionego (lazy-load)
• Wsparcie dla TypeScript 5.2
• Podstawowe API sygnałów (signals) jest teraz stabilne
• Usunięto wsparcie dla Node.js v16, minimalna obsługiwana wersja to v18.13.0
• Esbuild będzie domyślnym komponentem budującym (builder), a domyślny serwer deweloperski będzie używał Vite