Kurs programowania w Angularze

Lekcja 1 • Tworzenie szkieletu pierwszego projektu Angulara

Używa Angular CLI do wygenerowania projektu, zgłębienia jego struktury plików i uruchomienia serwera deweloperskiego. Buduje znajomość układu przestrzeni roboczej używanego w całym kursie.

Lekcja 2 • Konfiguracja środowiska programistycznego

Instaluje Node.js, npm i Angular CLI, aby przygotować lokalną przestrzeń roboczą. Bezpośrednio umożliwia tworzenie projektu omówione w następnej sekcji.

Lekcja 3 • Podstawy TypeScriptu dla Angulara

Wprowadza typy TypeScriptu, interfejsy, dekoratory i moduły używane w Angularze. Zapewnia, że studenci będą potrafić pewnie czytać i pisać kod Angulara od drugiego rozdziału.

Lekcja 1 • Anatomia komponentu Angulara

Rozkłada dekorator komponentu, klasę, szablon i style na ich role. Ustanawia model mentalny dla każdego elementu interfejsu zbudowanego w tym kursie.

Lekcja 2 • Dyrektywy atrybutów i pipe'y

Stosuje wbudowane dyrektywy atrybutów, takie jak ngClass i ngStyle, oraz przekształca dane za pomocą wbudowanych pipe'ów. Uzupełnia możliwości szablonów przed przejściem do serwisów.

Lekcja 3 • Wbudowane dyrektywy strukturalne

Omawia ngIf, ngFor i ngSwitch do warunkowego i listowego renderowania w szablonach. Umożliwia dynamiczne wyświetlanie treści niezbędne w rzeczywistych interfejsach.

Lekcja 4 • Składnia szablonów i wiązanie danych

Uczy interpolacji, wiązania właściwości, wiązania zdarzeń i wiązania dwukierunkowego z ngModel. Łączy logikę komponentu z DOM dla interaktywnych interfejsów.

Lekcja 1 • Dogłębna analiza wstrzykiwania zależności

Bada hierarchię injektorów Angulara, tokeny dostawców i zakres wstrzykiwania. Umożliwia precyzyjną kontrolę nad tworzeniem instancji serwisów i ich udostępnianiem między modułami.

Lekcja 2 • Tworzenie i używanie serwisów

Generuje serwisy za pomocą CLI, hermetyzuje logikę biznesową i wstrzykuje je do komponentów. Demonstruje zasadę pojedynczej odpowiedzialności w architekturze Angulara.

Lekcja 3 • Zrozumienie NgModułów

Wyjaśnia deklaracje, importy, eksporty i dostawców w metadanych NgModule. Ustanawia system modułów, który organizuje każdą aplikację Angulara.

Lekcja 1 • Strażnicy tras i resolvery

Chroni trasy za pomocą strażników CanActivate i CanDeactivate oraz wstępnie pobiera dane za pomocą Resolve. Zapewnia bezpieczną nawigację i wstępnie załadowane dane przed renderowaniem komponentu.

Lekcja 2 • Trasy potomne i nazwane outlet'y

Zagnieżdża trasy potomne w modułach funkcjonalnych i używa nazwanych outlet'ów do widoków pomocniczych. Obsługuje złożone układy, takie jak pulpity nawigacyjne z panelami bocznymi.

Lekcja 3 • Leniwie ładowane moduły funkcjonalne

Dzieli aplikację na leniwie ładowane moduły funkcjonalne, aby zmniejszyć początkowy rozmiar pakietu. Bezpośrednio poprawia metryki wydajności omówione w zaawansowanych rozdziałach.

Lekcja 4 • Parametry trasy i parametry zapytania

Odczytuje dynamiczne segmenty trasy i opcjonalne parametry zapytania za pomocą ActivatedRoute. Umożliwia widoki szczegółów i filtrowane listy sterowane stanem URL.

Lekcja 1 • Async Pipe i integracja z szablonem

Subskrybuje do obserwabli bezpośrednio w szablonach za pomocą async pipe, eliminując ręczne zarządzanie subskrypcjami. Zmniejsza ilość kodu boilerplate i zapobiega wyciekom pamięci w komponentach.

Lekcja 2 • Subject'y i multicasting

Używa Subject, BehaviorSubject i ReplaySubject do multicastowania wartości do wielu subskrybentów. Umożliwia wzorce współdzielonego stanu używane w zarządzaniu stanem opartym na serwisach.

Lekcja 3 • Podstawowe operatory RxJS

Stosuje map, filter, switchMap, mergeMap i catchError do przekształcania i łączenia strumieni. Wyposaża studentów w umiejętności obsługi rzeczywistych wymagań dotyczących transformacji danych.

Lekcja 1 • Mockowanie HTTP w środowisku programistycznym

Używa HttpClientTestingModule i internetowego API w pamięci do symulowania odpowiedzi backendu podczas programowania. Odłącza postęp frontendu od dostępności backendu.

Lekcja 2 • Obsługa błędów i strategie ponawiania

Obsługuje błędy HTTP za pomocą operatorów catchError, retry i retryWhen dla odpornych wywołań API. Zapewnia łagodną degradację i przyjazne dla użytkownika informowanie o błędach.

Lekcja 3 • Interceptor'y HTTP

Tworzy interceptor'y do dołączania tokenów uwierzytelniających, logowania żądań i globalnego przekształcania odpowiedzi. Centralizuje przekrojowe zagadnienia HTTP bez modyfikowania indywidualnych wywołań serwisów.

Lekcja 4 • Konfiguracja HttpClient i żądania GET

Importuje HttpClientModule, wstrzykuje HttpClient i wykonuje typowane żądania GET. Ustanawia podstawę dla całej komunikacji z backendem w aplikacji.

Lekcja 1 • Formularze dynamiczne z FormArray

Zarządza listami kontrolek o zmiennej długości za pomocą FormArray w dynamicznych scenariuszach formularzy. Obsługuje przypadki użycia, takie jak dodawanie wielu adresów lub pozycji.

Lekcja 2 • Podstawy formularzy reaktywnych

Konstruuje formularze programowo za pomocą FormControl, FormGroup i FormBuilder. Umożliwia skalowalną, testowalną logikę formularzy sterowaną wyłącznie z klasy komponentu.

Lekcja 3 • UX formularza i dostępność

Stosuje stany touched, dirty i pristine do kontrolowania widoczności błędów i poprawy UX formularza. Zapewnia, że formularze spełniają standardy dostępności z odpowiednimi atrybutami ARIA.

Lekcja 4 • Niestandardowe walidatory i walidacja asynchroniczna

Pisze synchroniczne i asynchroniczne niestandardowe walidatory do sprawdzania międzypolowego i po stronie serwera. Rozszerza system walidacji Angulara, aby spełniać złożone reguły biznesowe.

Lekcja 1 • Podstawy zarządzania stanem

Implementuje stan oparty na serwisie z BehaviorSubject i wprowadza koncepcje magazynu NgRx dla skalowalnego stanu. Przygotowuje studentów do wyboru odpowiedniej strategii stanu dla złożoności aplikacji.

Lekcja 2 • Niestandardowe dyrektywy i pipe'y

Buduje wielokrotnego użytku dyrektywy atrybutów za pomocą HostListener i HostBinding oraz tworzy czyste i nieczyste niestandardowe pipe'y. Rozszerza możliwości szablonów Angulara dla potrzeb specyficznych dla domeny.

Lekcja 3 • Projekcja treści i komponenty dynamiczne

Używa ng-content do projekcji jedno- i wielogniazdowej oraz tworzy komponenty dynamicznie w czasie wykonania. Umożliwia tworzenie wysoce elastycznych, wielokrotnego użytku komponentów biblioteki UI.

Lekcja 4 • Strategie wykrywania zmian

Porównuje domyślne wykrywanie zmian i OnPush oraz stosuje OnPush z niezmiennymi danymi i obserwablami. Znacząco redukuje niepotrzebne przerenderowania w dużych drzewach komponentów.