Kurs programowania Front-End w Angularze

Lekcja 1 • Moduły Angulara i uruchamianie aplikacji

Wyjaśnia NgModules, główny AppModule i sposób uruchamiania aplikacji przez Angular. Zapewnia kontekst strukturalny potrzebny przed budową komponentów.

Lekcja 2 • TypeScript niezbędny dla Angulara

Wprowadza typy, interfejsy i dekoratory TypeScript wymagane do pewnego pisania kodu w Angularze. Łączy wiedzę o JavaScripcie z ekosystemem typowanej składni Angulara.

Lekcja 3 • Wprowadzenie do frameworka Angular

Omawia rolę Angulara w nowoczesnym programowaniu front-end i jego architekturę inspirowaną MVC. Stanowi koncepcyjną podstawę dla wszystkich kolejnych tematów frameworka.

Lekcja 4 • Konfiguracja środowiska programistycznego

Instaluje i konfiguruje Node.js, npm i Angular CLI. Zapewnia każdemu kursantowi spójne, odtwarzalne lokalne środowisko pracy.

Lekcja 1 • Wbudowane dyrektywy strukturalne

Stosuje *ngIf, *ngFor i *ngSwitch do dynamicznego sterowania strukturą DOM. Pokazuje, jak dyrektywy rozszerzają wyrazistość szablonów.

Lekcja 2 • Wiązanie właściwości i zdarzeń

Uczy jednokierunkowego przepływu danych przez wiązanie właściwości i obsługi zdarzeń użytkownika przez wiązanie zdarzeń. Łączy logikę komponentu z elementami DOM i interakcjami użytkownika.

Lekcja 3 • Składnia szablonów i wyrażenia

Omawia język wyrażeń szablonów Angulara, bezpieczną nawigację i zmienne referencyjne szablonów. Umożliwia dynamiczne renderowanie treści w widokach komponentów.

Lekcja 4 • Haki cyklu życia komponentu

Bada pełną sekwencję haków cyklu życia od ngOnInit do ngOnDestroy. Uczy, kiedy i dlaczego używać każdego haka do inicjalizacji i czyszczenia.

Lekcja 1 • Zapytania ViewChild i ContentChild

Uzyskuje dostęp do instancji komponentów podrzędnych i rzutowanej treści programowo za pomocą zapytań. Umożliwia zaawansowaną koordynację komponentów poza wiązaniem szablonów.

Lekcja 2 • Komunikacja nadrzędny-potomek za pomocą @Input

Używa @Input do przekazywania danych w dół drzewa komponentów i waliduje dane wejściowe za pomocą setterów. Ustanawia podstawowy wzorzec przepływu danych w dół w Angularze.

Lekcja 3 • Budowanie niestandardowych dyrektyw strukturalnych

Implementuje dyrektywy strukturalne za pomocą TemplateRef i ViewContainerRef do manipulacji DOM. Rozszerza umiejętności kursantów w zakresie tworzenia wielokrotnego użytku logiki układu.

Lekcja 4 • Budowanie niestandardowych dyrektyw atrybutowych

Tworzy dyrektywy modyfikujące wygląd lub zachowanie elementu hosta bez zmiany struktury DOM. Wzmacnia wzorzec dyrektywy wprowadzony w Rozdziale 2.

Lekcja 1 • Tworzenie i dostarczanie serwisów w Angularze

Generuje serwisy za pomocą CLI i rejestruje je w zakresie modułu, komponentu lub korzenia. Ustanawia warstwę serwisową jako miejsce dla współdzielonej logiki.

Lekcja 2 • Klient HTTP i integracja z API REST

Konfiguruje HttpClientModule i wykonuje żądania GET, POST, PUT i DELETE. Łączy warstwę serwisową z rzeczywistymi źródłami danych backendu.

Lekcja 3 • Obsługa błędów i interceptory HTTP

Implementuje globalną obsługę błędów za pomocą catchError oraz transformację żądań/odpowiedzi za pomocą interceptora. Tworzy gotowe do produkcji wzorce komunikacji HTTP.

Lekcja 4 • Wstrzykiwanie zależności — szczegółowe omówienie

Bada hierarchię DI, tokeny wstrzykiwania i typy providerów. Umożliwia precyzyjną kontrolę nad tym, jak zależności są rozwiązywane w całej aplikacji.

Lekcja 1 • Guardy tras i kontrola dostępu

Implementuje guardy CanActivate, CanDeactivate i CanLoad w celu ochrony tras. Integruje uwierzytelnianie i autoryzację z warstwą nawigacji.

Lekcja 2 • Leniwie ładowanie i resolvery tras

Dzieli aplikację na moduły funkcjonalne ładowane na żądanie i wstępnie pobiera dane za pomocą resolverów. Poprawia początkową wydajność ładowania i doświadczenie użytkownika.

Lekcja 3 • Zagnieżdżone trasy i nazwane outlety

Strukturyzuje trasy potomne pod trasami nadrzędnymi i używa nazwanych outletów dla widoków pomocniczych. Wspiera złożone wymagania układu w dużych aplikacjach.

Lekcja 4 • Konfiguracja routera i podstawowa nawigacja

Konfiguruje RouterModule z definicjami tras i dodaje router-outlet oraz routerLink. Ustanawia podstawę dla wszystkich funkcji nawigacji.

Lekcja 1 • Dynamiczne formularze z FormArray

Używa FormArray do dodawania i usuwania kontrolek formularza w czasie wykonania dla danych o zmiennej długości. Obsługuje rzeczywiste scenariusze, takie jak powtarzające się pozycje.

Lekcja 2 • Walidatory i niestandardowa walidacja

Stosuje walidatory synchroniczne i asynchroniczne oraz tworzy wielokrotnego użytku niestandardowe funkcje walidacyjne. Zapewnia integralność danych przed wysłaniem.

Lekcja 3 • Wysyłanie formularza i zarządzanie stanem

Obsługuje wysyłanie formularza, resetowanie i stan dirty/touched, aby zapewnić dopracowane UX. Łączy dane formularza z wywołaniami serwisów wprowadzonymi w Rozdziale 4.

Lekcja 4 • Formularze szablonowe

Używa ngForm, ngModel i wbudowanych walidatorów do deklaratywnego budowania formularzy w szablonie. Wprowadza koncepcje formularzy przy minimalnym narzucie TypeScriptu.

Lekcja 1 • NgRx Entity i DevTools

Upraszcza zarządzanie kolekcjami za pomocą NgRx Entity i pozwala na inspekcję stanu za pomocą Redux DevTools. Przyspiesza rozwój i debugowanie funkcji obciążonych stanem.

Lekcja 2 • Wprowadzenie do NgRx Store

Instaluje NgRx i definiuje akcje, reducery i store dla wycinka funkcjonalności. Ustanawia wzorzec Redux w ekosystemie Angulara.

Lekcja 3 • Stan oparty na serwisie z BehaviorSubject

Przechowuje i współdzieli stan między komponentami za pomocą BehaviorSubject w serwisie. Zapewnia lekkie rozwiązanie stanu przed wprowadzeniem NgRx.

Lekcja 4 • Efekty NgRx dla efektów ubocznych

Obsługuje operacje asynchroniczne, takie jak wywołania HTTP, poza reducerami za pomocą NgRx Effects. Utrzymuje reducery czyste i centralizuje logikę efektów ubocznych.

Lekcja 1 • Strategie wdrożeniowe i integracja CI/CD

Wdraża kompilacje Angulara do hostingu statycznego i integruje zautomatyzowane potoki ciągłego dostarczania. Zamyka cykl rozwoju od kodu do produkcji.

Lekcja 2 • Testowanie jednostkowe komponentów i serwisów

Pisze testy jednostkowe za pomocą Jasmine i TestBed dla komponentów, serwisów i potoków. Weryfikuje poszczególne jednostki w izolacji przed integracją.

Lekcja 3 • Optymalizacja pakietu i konfiguracja kompilacji

Konfiguruje kompilacje produkcyjne, tree shaking i ładowanie różnicowe dla optymalnego rozmiaru pakietu. Przygotowuje aplikację do rzeczywistych ograniczeń wdrożeniowych.

Lekcja 4 • Testowanie end-to-end za pomocą Cypress

Automatyzuje testowanie przepływów użytkownika za pomocą Cypress w celu walidacji pełnego zachowania aplikacji. Uzupełnia testy jednostkowe realistycznymi scenariuszami w przeglądarce.