Angular Kurs für Frontend-Entwicklung

Lektion 1 • Angular-Module und Anwendungsstart

Erklärt NgModule, das root AppModule und wie Angular die Anwendung startet. Bietet den strukturellen Kontext, der vor dem Erstellen von Komponenten benötigt wird.

Lektion 2 • TypeScript-Grundlagen für Angular

Stellt TypeScript-Typen, Schnittstellen und Dekorateure vor, die zum sicheren Schreiben von Angular-Code erforderlich sind. Verbindet JavaScript-Kenntnisse mit dem getypten Angular-Ökosystem.

Lektion 3 • Einführung in das Angular-Framework

Behandelt die Rolle von Angular in der modernen Frontend-Entwicklung und seine von MVC inspirierte Architektur. Legt die konzeptionelle Basis für alle nachfolgenden Framework-Themen.

Lektion 4 • Einrichten der Entwicklungsumgebung

Installiert und konfiguriert Node.js, npm und die Angular CLI. Stellt sicher, dass jeder Teilnehmer einen konsistenten, reproduzierbaren lokalen Arbeitsbereich hat.

Lektion 1 • Integrierte strukturelle Direktiven

Wendet *ngIf, *ngFor und *ngSwitch an, um die DOM-Struktur dynamisch zu steuern. Zeigt, wie Direktiven die Ausdrucksfähigkeit von Vorlagen erweitern.

Lektion 2 • Eigenschafts- und Ereignisbindung

Lehrt den unidirektionalen Datenfluss mittels Eigenschaftsbindung und die Behandlung von Benutzerereignissen mittels Ereignisbindung. Verknüpft die Komponentenlogik mit DOM-Elementen und Benutzerinteraktionen.

Lektion 3 • Vorlagensyntax und Ausdrücke

Behandelt die Vorlagenausdruckssprache von Angular, die sichere Navigation und Vorlagenreferenzvariablen. Ermöglicht das dynamische Rendern von Inhalten innerhalb von Komponentenansichten.

Lektion 4 • Lebenszyklus-Hooks von Komponenten

Untersucht die vollständige Reihenfolge der Lebenszyklus-Hooks von ngOnInit bis ngOnDestroy. Lehrt, wann und warum jeder Hook für die Initialisierung und Bereinigung verwendet wird.

Lektion 1 • ViewChild- und ContentChild-Abfragen

Greift programmatisch über Abfragen auf untergeordnete Komponenteninstanzen und projizierte Inhalte zu. Ermöglicht fortgeschrittene Komponentenkoordination über die Vorlagenbindung hinaus.

Lektion 2 • Eltern-Kind-Kommunikation mit @Input

Verwendet @Input, um Daten im Komponentenbaum nach unten zu übergeben, und validiert die Eingabe mit Settern. Etabliert das primäre abwärtsgerichtete Datenflussmuster in Angular.

Lektion 3 • Erstellen benutzerdefinierter struktureller Direktiven

Implementiert strukturelle Direktiven mit TemplateRef und ViewContainerRef, um das DOM zu manipulieren. Erweitert die Fähigkeit der Teilnehmer, wiederverwendbare Layoutlogik zu erstellen.

Lektion 4 • Erstellen benutzerdefinierter Attributdirektiven

Erstellt Direktiven, die das Aussehen oder Verhalten von Host-Elementen ändern, ohne die DOM-Struktur zu verändern. Verstärkt das in Kapitel 2 eingeführte Direktivenmuster.

Lektion 1 • Erstellen und Bereitstellen von Angular-Services

Generiert Services mit der CLI und registriert sie auf Modul-, Komponenten- oder Root-Ebene. Etabliert die Service-Schicht als Heimat für gemeinsame Logik.

Lektion 2 • HTTP-Client und REST-API-Integration

Konfiguriert HttpClientModule und führt GET-, POST-, PUT- und DELETE-Anfragen durch. Verbindet die Service-Schicht mit echten Backend-Datenquellen.

Lektion 3 • Fehlerbehandlung und HTTP-Interceptors

Implementiert globale Fehlerbehandlung mit catchError und Anfrage-/Antworttransformation mit Interceptoren. Erzeugt produktionsreife HTTP-Kommunikationsmuster.

Lektion 4 • Dependency Injection Deep Dive

Untersucht die DI-Hierarchie, Injektions-Tokens und Anbietertypen. Ermöglicht eine feinkörnige Kontrolle darüber, wie Abhängigkeiten in der gesamten App aufgelöst werden.

Lektion 1 • Routen-Guards und Zugriffskontrolle

Implementiert CanActivate, CanDeactivate und CanLoad Guards, um Routen zu schützen. Integriert Authentifizierung und Autorisierung in die Navigationsschicht.

Lektion 2 • Lazy Loading und Route Resolver

Teilt die App in Feature-Module auf, die bei Bedarf geladen werden, und ruft Daten mit Resolvern im Voraus ab. Verbessert die anfängliche Ladeleistung und das Benutzererlebnis.

Lektion 3 • Verschachtelte Routen und benannte Ausgabebereiche

Strukturiert untergeordnete Routen unter übergeordneten Routen und verwendet benannte Ausgabebereiche für Hilfsansichten. Unterstützt komplexe Layoutanforderungen in großen Anwendungen.

Lektion 4 • Router-Einrichtung und grundlegende Navigation

Konfiguriert das RouterModule mit Routendefinitionen und fügt router-outlet und routerLink hinzu. Legt die Grundlage für alle Navigationsfunktionen.

Lektion 1 • Dynamische Formulare mit FormArray

Verwendet FormArray, um Formularsteuerelemente zur Laufzeit für Daten mit variabler Länge hinzuzufügen und zu entfernen. Behandelt reale Szenarien wie sich wiederholende Positionszeilen.

Lektion 2 • Validatoren und benutzerdefinierte Validierung

Wendet synchrone und asynchrone Validatoren an und erstellt wiederverwendbare benutzerdefinierte Validatorfunktionen. Stellt die Datenintegrität vor dem Absenden sicher

Lektion 3 • Formularübermittlung und Zustandsverwaltung

Behandelt die Formularübermittlung, das Zurücksetzen und den Zustand dirty/touched, um eine ausgefeilte Benutzererfahrung zu liefern. Verbindet Formulardaten mit den in Kapitel 4 eingeführten Service-Aufrufen.

Lektion 4 • Vorlagengetriebene Formulare

Verwendet ngForm, ngModel und integrierte Validatoren, um Formulare deklarativ in der Vorlage zu erstellen. Führt Formularkonzepte mit minimalem TypeScript-Overhead ein.

Lektion 1 • NgRx Entity und DevTools

Vereinfacht die Sammlungsverwaltung mit NgRx Entity und inspiziert den Zustand mit Redux DevTools. Beschleunigt die Entwicklung und das Debugging von store-lastigen Funktionen.

Lektion 2 • Einführung in den NgRx Store

Installiert NgRx und definiert Aktionen, Reducer und den Store für einen Feature-Ausschnitt. Etabliert das Redux-Muster im Angular-Ökosystem.

Lektion 3 • Service-basierter Zustand mit BehaviorSubject

Speichert und teilt den Zustand über Komponenten hinweg mit BehaviorSubject in einem Service. Bietet eine leichtgewichtige Zustandslösung vor der Einführung von NgRx.

Lektion 4 • NgRx Effects für Seiteneffekte

Behandelt asynchrone Operationen wie HTTP-Aufrufe außerhalb von Reducern mit NgRx Effects. Hält Reducer rein und zentralisiert die Seiteneffektlogik.

Lektion 1 • Deployment-Strategien und CI/CD-Integration

Stellt Angular-Builds auf statischem Hosting bereit und integriert automatisierte Pipelines für Continuous Delivery. Schließt den Entwicklungslebenszyklus vom Code bis zur Produktion ab.

Lektion 2 • Unit-Tests von Komponenten und Services

Schreibt Unit-Tests mit Jasmine und TestBed für Komponenten, Services und Pipes. Validiert einzelne Einheiten isoliert vor der Integration.

Lektion 3 • Bundle-Optimierung und Build-Konfiguration

Konfiguriert Produktions-Builds, Tree Shaking und differenzielles Laden für eine optimale Bundle-Größe. Bereitet die App auf reale Bereitstellungs-Einschränkungen vor.

Lektion 4 • End-to-End-Tests mit Cypress

Automatisiert Benutzerablauftests mit Cypress, um das vollständige Anwendungsverhalten zu validieren. Ergänzt Unit-Tests um realistische browserbasierte Szenarien.