Tauche ein in die Welt von Angular und baue deine erste professionelle Webanwendung! Du startest mit den Grundlagen wie Components, Projektstruktur und der Entwicklungsumgebung, bevor du direkt in die Praxis einsteigst und eine Produktlisten-App entwickelst. Lerne die wichtigsten Angular-Konzepte wie Data Binding, Control Flows (@if, @for, @switch) und Lifecycle Hooks kennen und setze sie hands-on um. Mit Routing navigierst du zwischen Seiten, übergibst Parameter elegant und verfeinerst die Darstellung deiner Daten mit Pipes. So entstehen moderne, dynamische Webanwendungen!
Kursübersicht
Start mit Angular
Verfügbar in
tage
tage
nachdem du dich angemeldet hast
- Was ist Angular? (6:31)
- Vorbereitung: Meine Angular-VSCode-Extensions (2:43)
- 01 Angular Installation und Projekt Initialisierung (7:18)
- 02 Angular Projektaufbau (alle Dateien im Überblick) (8:25)
- 03 Aufbau und Sinn von Components (5:23)
- 04 [BugFix] Windows Powershell Error "Ausführung von Skripts deaktiviert" (.ps1 Datei) (3:14)
- 05 DEV/Live-Server starten (npm start und ng serve) (7:20)
- 06 Angular-Components: Einführung (erste Component selber bauen) (9:58)
- 07 Angular-Components: HTML und CSS in externe Dateien auslagern (5:52)
- 08 Produktliste: Projektvorstellung (1:38)
- 09 Produktliste: Vorstellung der Dokumentation (3:04)
- 09.1 Produktliste: Dokumentation [PDF]
- 10 [PRAXIS] Projekt einrichten (5:32)
- 11 [PRAXIS] Header-Component einbauen (ng g c header) (7:31)
- 12 [PRAXIS] Style aus der Produktlistendokumentation implementieren (5:11)
Structure Deep Dive
Verfügbar in
tage
tage
nachdem du dich angemeldet hast
- Alle Control-flows im Überblick (4:00)
- 01 Interpolation {{}} (3:32)
- 02 Eventbinding () (3:54)
- 03 Propertybinding [] (5:28)
- 04 Lifecyclehook: ngOnInit (5:09)
- 05 [PRAXIS] Product Detail: Einrichtung (7:27)
- 06 [PRAXIS] Product Detail: Interpolation (Daten anzeigen) (4:21)
- 07 [PRAXIS] Header: Propertybinding (Classes anpassen) (10:27)
- 08 Einführung Control flows (1:57)
- 09 @if (5:30)
- 10 @for: Einführung (5:44)
- 11 @for: track (2:54)
- 12 @for: index nutzen (4:43)
- 13 @for: default-Fall mit @empty (1:15)
- 14 @switch (6:49)
- 15 [PRAXIS] Header: verschiedene Header anzeigen mit @if (1:51)
- 16 [PRAXIS] Product List: Liste anzeigen über @for (5:27)
- 17 [PRAXIS] Product List: Preise anzeige verbessern mit @switch (4:19)
- Cheatsheet
Routing & Pipes
Verfügbar in
tage
tage
nachdem du dich angemeldet hast
- Einleitung Routing (6:13)
- 01 Router und Routes (8:39)
- 02 Routerlink (5:27)
- 03 Routing mit Parameter (11:10)
- 04 [PRAXIS] Routerlink zur Detailpage (ohne ID) (5:43)
- 05 [PRAXIS] Routerlink zur Detailpage (mit ID) (8:11)
- 06 Weiterleiten im Routing (redirectTo) (7:55)
- 07 mehrere Components in einer Route mit "Wrapper-Component" (3:26)
- 08 [Aufgabe] eigene 404 Page (productdetail not found)
- 09 Pipes Einführung (10:27)
- 10 Eigene Pipes erstellen (custom pipes) (8:14)
- 11 [Aufgabe] Currency Pipe (Preise besser darstellen)