Angular - Power Workshop - Seminar / Kurs von GFU Cyrus AG
Inhalte
- Einstieg in Angular
- Was ist Angular
- Das Angular-CLI
- Angular-Projektaufbau und eine erste App
- Was ist TypeScript?
- Verwendung von Typen
- Verwendung von Klassen
- Verwendung von Schnittstellen
- Verwendung von Generika
- Angular Grundlagen
- Wie eine Angular App geladen und gestartet wird
- Komponenten sind wichtig!
- Erstellen einer neuen Komponente
- Bedeutung von AppModule und Komponentendeklaration
- Benutzerdefinierte Komponenten erstellen und verwenden
- Komponenten mit dem CLI anlegen und Komponenten verschachteln
- Arbeiten mit Komponentenvorlagen
- Arbeiten mit Komponenten-Stilen
- Vollständiges Verständnis der Komponentenauswahl
- Was ist Datenbindung?
- Zeichenketten-Interpolation
- Property-Bindung
- Property-Bindung im Vergleich zu Zeichenketten-Interpolation
- Event-Bindung
- Bindung von Eigenschaften und Ereignisse
- Weitergabe und Verwendung von Daten mit Ereignisbindung
- Zwei-Wege-Datenanbindung mit Hilfe des FormsModule
- Kombination von Datenbindungen
- Direktiven verstehen und anwenden
- Bedingte Ausgabe von Daten mit ngIf
- Verbesserung von ngIf mit einer anderen Bedingung
- Dynamische Styling-Elemente mit ngStyle
- CSS-Klassen dynamisch anwenden mit ngClass
- Ausgabe von Listen mit ngFor
- Holen des Index bei Verwendung von ngFor
- Angular Komponenten und Datenanbindung im Detai
l
- Angular-Apps in Komponenten aufteilen
- Übersicht über die Eigenschaften- und Ereignis-Bindung
- Bindung an benutzerdefinierte Eigenschaften
- Zuweisen eines Alias zu benutzerdefinierten Eigenschaften
- Bindung an benutzerdefinierte Ereignisse
- 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
- Angular Direktiven im Detai
l
- ngFor und ngIf
- ngClass und ngStyle
- Erstellen einer einfachen Attribut-Direktive
- Verwendung des Renderers zum Aufbau einer erweiterten Attribute-Direktive
- Host-Ereignisse mit HostListener abfangen
- Host-Eigenschaften mit HostBinding binden
- Bindung an Eigenschaften der Direktive
- Was sind Struktur-Direktiven?
- Aufbau einer Struktur-Direktive
- Einsatz von ngSwitch
- Angular Services und Dependency Injection
- Gründe für den Einsatz von Services
- Erstellen eines einfachen Protokollierungsdienstes
- Einbinden des Protokollierungsdienstes in Komponenten
- Erstellen eins Datendienstes
- Services in Services einfügen
- 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 holen
- Ein wichtiger Hinweis zu Route Observables
- Übergabe von Query-Parametern und Fragmenten
- Abrufen von Query-Parametern und Fragmenten
- Einrichten von verschachtelten Kinderrouten
- Query-Parameter verwenden
- Konfiguration der Handhabung von Query-Parametern
- Routen-Umleitung und Wildcard-Routen
- Wichtig: Umleitungspfadanpassung
- Auslagerung der Routen-Konfiguration
- Routen schützen und absichern mit Guards
- Routenschutz mit canActivate
- Schützen von verschachtelten Kinderrouten 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
- Analyse von Angular-Observables
- Entwicklung und Nutzung eines einfachen Observables
- Entwicklung und Nutzung eines erweiterten Observables
- Die Unsubscribe-Methode
- Verstehen und Anwenden der RxJS-Operatoren
- Code-Kompatibilität mit rxjs-compat
- Formulare in Angular
- Einführung in Formulare mit Angular
- Template-Driven versus Reactive Formulare
- Beispiele für Template-Driven und Reactive Formulare
- Verwenden von Pipes zur Transformation der Ausgabe
- Einführung über Pipes
- Verwendung von Pipes
- Parametrisieren von Pipes
- Wo Sie mehr über Pipes erfahren können
- Verkettung mehrerer Pipes
- Erstellen einer benutzerdefinierten Pipe
- Parametrisieren einer benutzerdefinierten Rohrleitung
- Beispiel: Erstellen einer Filterleitung
- Pure und Impure Pipe
- Die "async" Pipe
- HTTP -Anfragen in Angular
- Wie HTTP-Anfragen in SPAs funktionieren
- Firebase als Datenbank
- Senden von Anfragen (Beispiel: POST-Anfrage)
- Anpassung der Request-Header
- Senden von GET-Anfragen
- Senden einer PUT-Anfrage
- RxJS 6 ohne rxjs-compat
- Transformieren von Daten mit dem map-Operator
- Verwendung der zurückgegebenen Daten
- Fehlerbehebung ohne rxjs-Kompatibilität
- Abfangen von HTTP-Fehlern
- Verwendung der "async" Pipe mit HTTP-Requests
- Authentifizierung und Schutz von Routen in Angular
- Wie Authentifizierung in Single-Page-Anwendungen funktioniert
- JWT - Überblick
- 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 den Modulen
- Verständnis des App-Moduls
- Verständnis der Feature-Module
- 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 in der Cloud
- Einstieg in Angular
- Was ist Angular
- Das Angular-CLI
- Angular-Projektaufbau und eine erste App
- Was ist TypeScript?
- Verwendung von Typen
- Verwendung von Klassen
- Verwendung von Schnittstellen
- Verwendung von ...
Lernziele
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 Offline-Compilation und vieles mehr. Aber das ist noch nicht alles: Diese Schulung zeigt Ihnen auch, wie Sie das Angular CLI verwenden und bietet Ihnen ein komplettes Projekt, das es Ihnen ermöglicht, das im Laufe des Seminars Gelernte zu üben!
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 ... Mehr Informationen >>
Zielgruppen
Web-Entwickler, Web-Programmierer mit Erfahrung mit HTML, CSS, JavaScript, die mit Angular moderne, komplexe, reaktionsschnelle sowie skalierbare Webanwendungen entwickeln wollen.
Termine und Orte
| Datum | Dauer | Preis | ||
|---|---|---|---|---|
| Köln, DE | ||||
| 17.06.2024 - 19.06.2024 | 21 h | Mehr Informationen > | Jetzt buchen › | |
| 09.12.2024 - 11.12.2024 | 21 h | Mehr Informationen > | Jetzt buchen › | |
| 24.02.2025 - 26.02.2025 | 21 h | Mehr Informationen > | Jetzt buchen › | |
| 28.04.2025 - 30.04.2025 | 21 h | Mehr Informationen > | Jetzt buchen › | |