Angular – Power Workshop: Der komplette Einstieg

Von der Einrichtung bis zur Bereitstellung deckt dieser Angular-Kurs alles ab! Sie erfahren alles über Komponenten, Direktiven,Services, Formulare, Http-Zugriff, Authentifizierung, Optimierung einer Angular-App mit Modulen und vieles mehr. Aber das ist noch nicht alles: Im “Angular – Power Workshop” entwickeln Sie unter professioneller Anleitung eigenständige Angular-Projekte, so dass Sie das Gelernte direkt üben und anwenden können!

Agenda

• Angular Einstieg
  • Was ist Angular?
  • Von AngularJS nach Angular
  • Das Angular-CLI
  • Angular-Projektaufbau und eine erste App
  • Was ist TypeScript?
  • Verwendung von Typen in TypeScript
  • Verwendung von Klassen in TypeScript
  • Verwendung von Schnittstellen in TypeScript
  • Verwendung von Generika in TypeScript
• Angular Grundlagen
  • Wie eine Angular App geladen und gestartet wird
  • Angular ist komponentenbasiert
  • Erstellen einer neuen Angular-Komponente
  • Bedeutung von AppModule
  • Bedeutung der Komponentendeklaration
  • Benutzerdefinierte Angular-Komponenten erstellen undverwenden
  • Angular-Komponenten mit dem CLI anlegen
  • Angular-Komponenten verschachteln
  • Arbeiten mit Komponenten-Vorlagen
  • Arbeiten mit Komponenten-Stilen
  • Arbeiten mit Komponenten-Selektoren
  • Was ist Datenbindung?
  • String-Interpolation (Zeichenketten-Interpolation)
  • Property-Binding (Eigenschaften-Bindung)
  • Property-Binding im Vergleich zu String-Interpolation
  • Event-Binding (Ereignis-Bindung)
  • Gleichzeitige Bindung von Eigenschaften und Ereignissen
  • Weitergabe und Verwendung von Daten mittels Ereignisbindung
  • Zwei-Wege-Datenanbindung mit Hilfe des FormsModule
  • Kombination von Datenbindungen
  • Angular-Direktiven verstehen und anwenden
  • Bedingte Ausgabe mit ngIf
  • Alternative ngIf-Ausgabe mit einer else-Bedingung
  • Dynamisches CSS-Styling von Elementen mit ngStyle
  • CSS-Klassen dynamisch anwenden mit ngClass
  • Ausgabe von Listen mit ngFor
  • Nutzen des Index bei Verwendung von ngFor
• Angular Komponenten und Datenanbindung im Detail
  • Angular-Apps in Komponenten aufteilen
  • Übersicht über die Eigenschaften- und Ereignis-Bindung
  • Bindung an benutzerdefinierte Eigenschaften
  • Zuweisen eines Alias zu benutzerdefinierten Eigenschaften
  • Zuweisen eines Alias zu benutzerdefinierten Ereignissen
  • Zusammenfassung der benutzerdefinierten Eigenschaften und der Ereignisbindung
  • Verständnis der View-Kapselung
  • Lokale Referenzen in Vorlagen verwenden
  • Zugriff auf die Vorlage und das DOM mit @ViewChild erhalten
  • Projektion von Inhalten in Komponenten mit ng-content
  • Verständnis des Komponentenlebenszyklus
  • Zugriff auf ng-content mit @ContentChild erhalten
  • Bindung an benutzerdefinierte Ereignisse
• Angular Direktiven im Detail
  • ngFor und ngIf
  • ngClass und ngStyle
  • Erstellen einer einfachen Attribut-Direktive
  • Verwendung des Renderers zum Aufbau einer erweitertenAttribute-Direktive
  • Host-Ereignisse mit HostListener abfangen
  • Host-Eigenschaften mit HostBinding binden
  • Direktiven und Datenbindung
  • Konzept von Struktur-Direktiven
  • Aufbau einer Struktur-Direktive
  • Einsatz von ngSwitch
• AngularServices und Dependency Injection
  • Verstehender Angular Dependency Injection
  • Gründe für den Einsatz von Services
  • Erstellen eines einfachen Angular-Service
  • Einbinden des Angular-Service in Komponenten
  • Erstellen eines Angular-Datendienstes
  • Services in Services einfügen und verwenden
  • Dienste für die komponentenübergreifende Kommunikationnutzen
• Angular Routing
  • Warum brauchen wir einen Router?
  • Einrichten und Laden von Routen
  • Navigieren mit Router-Links
  • Verstehen von Navigationspfaden
  • Styling des aktiven Router-Links
  • Programmgesteuertes Navigieren
  • Verwendung relativer Pfade in der programmatischen Navigation
  • Parameter an Routen übergeben
  • Routenparameter holen
  • Routenparameter reaktiv laden
  • Ein wichtiger Hinweis zu Route Observables
  • Übergabe von Query-Parametern und Fragmenten
  • Abrufen von Query-Parametern und Fragmenten
  • Einrichten von verschachtelt Child-Routen
  • Query-Parameter verwenden
  • Konfiguration der Handhabung von Query-Parametern
  • Routen-Umleitung und Wildcard-Routen
  • Die Umleitungspfadanpassung
  • Auslagerung der Routen-Konfiguration in Router-Module
  • Routen schützen und absichern mit Guards
  • Routenschutz mit canActivate
  • Schützen von verschachtelten Child-Routen mitcanActivateChild
  • Verwenden eines Authentifizierungs-Service
  • Steuerung der Navigation mit canDeactivate
  • Statische Daten an eine Route übergeben
• Angular und Observables mit RxJSAngular und RxJS
  • Verstehen von Observables, Observer, Subscriber
  • Entwicklung und Nutzung eines Observables
  • Die Unsubscribe-Methode
  • Verstehen und Anwenden der RxJS-Operatoren
  • Einsatz von RxJS-Subjects
• Angular und Formulare
  • Einführung in Formulare mit Angular
  • Template-Driven versus Reactive Forms
  • Formular erstellen und Controls registrieren
  • Formular abschicken und verwenden
  • Formularzustände verstehen
  • Zugriff auf Formulare mit @ViewChild
  • HTML5-Validierung hinzufügen
• Angular und Pipes
  • Einführung über Pipes
  • Typische Anwendung von Pipes
  • Angular-Pipes kennen und verwenden
  • Parametrisieren von Pipes
  • Verkettung mehrerer Pipes
  • Erstellen einer benutzerdefinierten Pipe
  • Parametrisieren einer benutzerdefinierten Pipe
  • Die “async”-Pipe
• HTTP-Anfragen in Angular
  • Wie HTTP-Anfragen in SPAs funktionieren
  • Senden von GET-Anfragen
  • Senden von POST, PUT, DELETE-Anfragen
  • Transformieren von Daten mit dem map-Operator
  • Einsatz von HttpClient und Datentypen
  • Verarbeiten der zurückgegebenen Daten
  • Abfangen von HTTP-Fehlern
  • Der “catchError”-Operator
  • Nutzen eines Interceptors
  • Verwendung der “async”-Pipe mit HTTP-Requests
• Authentifizierung und Schutz von Routen in Angular
  • Wie Authentifizierung in Single-Page-Anwendungenfunktioniert
  • Erstellen einer Anmeldeseite und einer Route
  • Benutzer registrieren
  • Benutzer anmelden
  • Anfordern und senden eines Authentifizierungstoken
  • Überprüfen und Verwenden des Authentifizierungsstatus
  • Hinzufügen einer Abmelde-Funktion
  • Beispiel für Routenschutz und Umleitung
• Module in Angular
  • Die Idee hinter Angular-Modulen
  • Verständnis des App-Moduls
  • Verständnis von Feature-Modulen
  • Reihenfolge der Modul-Importe
  • Registrieren von Routen in einem Feature-Modul
  • Verstehen und Erstellen von gemeinsamen Modulen
  • Laden von Komponenten über Selektoren versus Routing
  • Anwendung des Lazy Loading
  • Wie Module und Services zusammenwirken
  • Template-Interaktion & Produktionsbuilds
  • Wie man AoT Compilation (Vorab-Kompilierung) mit dem CLI verwendet
  • Vorladen von Lazy Loading-Routen
• Bereitstellen einer Angular-Anwendung
  • Bereitstellungsvorbereitungen
  • Bereitstellung im Internet
• Optional: NgRX – Zustandsverwaltung in Angular
  • Die Bedeutung der Zustandsverwaltung
  • Die Struktur von NgRX
  • Ein einfaches NgRx-Beispiel
• Optional: Testing in Angular
  • Aufbau der Angular-Testing-Welt
  • Unit-Tests verstehen und anwenden
  • E22-Tests verstehen und anwenden