Angular 17

• Zrozumienie HTML, CSS i JavaScript
• Doświadczenie z TypeScript i RxJS
• Doświadczenie w tworzeniu stron internetowych

Publiczność

• Programiści, którzy chcą dowiedzieć się, jak używać Angular 17 do tworzenia dynamicznych i responsywnych aplikacji internetowych
• Programiści, którzy chcą zaktualizować swoje umiejętności z poprzednich wersji Angular
• Programiści, którzy chcą poznać nowe funkcje i ulepszenia Angular 17

Angular 17 to najnowsza wersja popularnego frameworka internetowego, która wprowadza wiele nowych funkcji i ulepszeń, takich jak nowy, deklaratywny przepływ sterowania, odroczone bloki ładowania, interfejs API przejść widoku i wiele innych.

To prowadzone przez instruktora szkolenie na żywo (na miejscu lub zdalnie) jest przeznaczone dla początkujących i średnio zaawansowanych programistów, którzy chcą korzystać z najnowszych funkcji Angular 17 do tworzenia, testowania i wdrażania aplikacji internetowych.

Pod koniec tego szkolenia uczestnicy będą mogli

• Skonfigurować środowisko programistyczne obejmujące Node.js, Visual Studio Code i Angular CLI.
• Utworzyć podstawową aplikację Angular 17, która wyświetla dane i obsługuje interakcje użytkownika.
• Używać komponentów, dyrektyw, potoków, usług i modułów do organizowania i ponownego wykorzystywania kodu.
• Użyj wiązania danych, wstrzykiwania zależności, routingu, formularzy i klienta HTTP do komunikacji z usługami zaplecza.
• Korzystanie z nowej składni bloków kontrolnych szablonów w celu uproszczenia typowych zadań, takich jak renderowanie warunkowe, tworzenie pętli i obsługa pustych kolekcji.
• Użyj nowego bloku kontrolnego @defer, aby włączyć leniwe ładowanie zawartości bloku i jego zależności.
• Użyj nowego interfejsu API przejść widoków, aby dostosować animacje i przejścia między widokami.
• Debuguj i testuj Angular 17 aplikacji za pomocą narzędzi takich jak Chrome DevTools, Jest, Karma i Protractor.

Format kursu

• Interaktywny wykład i dyskusja.
• Wiele ćwiczeń i praktyki.
• Praktyczne wdrożenie w środowisku laboratoryjnym na żywo.

Opcje dostosowywania kursu

• Aby poprosić o spersonalizowane szkolenie dla tego kursu, skontaktuj się z nami w celu ustalenia szczegółów.

Wprowadzenie

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

Pierwsze kroki

• Tworzenie nowego projektu Angular 17 przy użyciu Angular CLI
• Przeglądanie struktury projektu i plików
• Uruchamianie i obsługa aplikacji
• Wyświetlanie danych przy użyciu interpolacji i wyrażeń

Komponenty

• Zrozumienie roli komponentów w Angular 17
• Tworzenie i używanie komponentów
• Przekazywanie danych między komponentami przy użyciu danych wejściowych i wyjściowych
• Korzystanie z haków cyklu życia komponentów

Dyrektywy

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

Rury

• Zrozumienie przeznaczenia potoków w Angular 17
• Tworzenie i używanie wbudowanych potoków, takich jak data, waluta, json itp.
• Tworzenie i używanie niestandardowych potoków

Usługi

• Zrozumienie roli usług w Angular 17
• Tworzenie i używanie usług
• Wstrzykiwanie zależności przy użyciu dostawców

Moduły

• Zrozumienie roli modułów w Angular 17
• Tworzenie i używanie modułów
• Importowanie i eksportowanie modułów

Wiązanie danych

• Zrozumienie różnicy między jednokierunkowym i dwukierunkowym wiązaniem danych
• Tworzenie i używanie wiązania właściwości, wiązania zdarzeń i składni banana-in-a-box
• Używanie zmiennych referencyjnych szablonu

Routing

• Zrozumienie roli routingu w Angular 17
• Tworzenie i konfigurowanie tras
• Nawigacja między trasami przy użyciu routerLink i router.navigate()
• Używanie parametrów trasy, parametrów zapytania i fragmentów

Formanty

• Zrozumienie różnicy między formularzami opartymi na szablonach i formularzami reaktywnymi
• Tworzenie i sprawdzanie poprawności formularzy przy użyciu kontrolek formularzy, grup formularzy, tablic formularzy itp.
• Korzystanie z wbudowanych walidatorów, takich jak required, minLength, maxLength itp.
• Tworzenie i używanie niestandardowych walidatorów

Klient HTTP

• Zrozumienie roli klienta HTTP w Angular 17
• Tworzenie i używanie żądań HTTP do komunikacji z usługami zaplecza
• Używanie obserwowalnych do obsługi asynchronicznych strumieni danych
• Używanie przechwytywaczy do modyfikowania lub obsługi żądań lub odpowiedzi HTTP

Nowy, deklaratywny przepływ sterowania

• Wyjaśnienie nowej składni bloków kontrolnych szablonu i sposobu, w jaki upraszcza ona typowe zadania, takie jak renderowanie warunkowe, pętle i obsługa pustych kolekcji.
• Podanie przykładów użycia nowych bloków, takich jak @if, @else, @switch, @case, @default, @for i @empty.
• Porównanie nowej składni z poprzednią, taką jak *ngIf, *ngSwitch i *ngFor.
• Wspomnienie, w jaki sposób nowe bloki sterujące obsługują aplikacje bezstrefowe z sygnałami

Bloki odroczonego ładowania

• Wyjaśnienie koncepcji odroczonego ładowania i sposobu, w jaki może ono poprawić wydajność i wrażenia użytkownika aplikacji internetowych.
• Przedstawienie nowego bloku kontrolnego @defer, który umożliwia leniwe ładowanie zawartości bloku i jego zależności.
• Podanie przykładów użycia bloku @defer w różnych scenariuszach, takich jak ładowanie komponentów, dyrektyw, potoków, animacji i stylów.
• Wspomnienie o tym, jak blok @defer działa z nowym interfejsem API przejść widoku

Interfejs API przejść widoku

• Wyjaśnienie celu i zalet interfejsu API przejść widoku, który umożliwia programistom dostosowywanie animacji i przejść między widokami.
• Przedstawienie nowej dyrektywy withViewTransitions, która umożliwia korzystanie z interfejsu API przejść widoku
• Podanie przykładów użycia dyrektywy withViewTransitions z różnymi typami przejść, takimi jak fade, slide, zoom i flip.
• Wspomnienie o tym, jak API przejść widoku działa z routerem Angular i historią przeglądarki.

Inne funkcje i ulepszenia

• Krótkie podsumowanie niektórych innych funkcji i ulepszeń oferowanych przez Angular 17, takich jak:
• Obsługa przekazywania @Component.styles jako ciągu znaków
• Kod animacji Angular jest leniwie ładowany
• Wsparcie dla wersji TypeScript 5.2
• Główny interfejs API sygnału jest teraz stabilny
• Node.js Obsługa wersji 16 została usunięta, a minimalną wersją wsparcia jest wersja 18.13.0.
• Esbuild będzie domyślnym builderem, a domyślny serwer deweloperski będzie korzystał z Vite.

Podsumowanie i kolejne kroki