Angular - Intensiv-Schulung für Einsteiger - Inhouse von HECKER CONSULTING

Entwickeln Sie moderne Enterprise-Anwendungen mit Angular.

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 und verwenden
• 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 Forms-Modul
• 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 erweiterten Attribut-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

Angular Services und Dependency Injection

• Verstehen der 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 Kommunikation nutzen

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 mit canActivateChild
• Verwenden eines Authentifizierungs-Service
• Steuerung der Navigation mit canDeactivate
• Statische Daten an eine Route übergeben

Angular und Observables mit RxJS

• Angular 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 Forms 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
• Parameter für Pipes
• Verkettung mehrerer Pipes
• Erstellen einer benutzerdefinierten Pipe
• Parameter für eine 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

NgRX - Zustandsverwaltung in Angular

• Die Bedeutung der Zustandsverwaltung
• Die Struktur von NgRX
• Ein einfaches NgRx-Beispiel

Testing in Angular

• Aufbau der Angular-Testing-Welt
• Unit-Tests verstehen und anwenden
• E22-Tests verstehen und anwenden

Mit unserer "Angular - Beratung, Coaching, Workshop, Training" gelingt Ihnen der perfekte Einstieg in das Angular-Framework. Sie erhalten ein vollständiges Verständnis der Architektur hinter einer Angular-Anwendung und bekommen alle relevanten Informationen um moderne, komplexe, reaktionsschnelle sowie skalierbare Webanwendungen mit einem der modernsten Frontend-Web-Frameworks auf dem Markt zu entwickeln.