Eckdaten
Zielgruppe: Webentwickler*innen | Dauer 2 Tage | 9:00–17:00 Uhr | Trainer: Hecker Consulting | Online-Seminar | Teilnehmerzahl: 1-12
Seminarbeschreibung
Das Angular-Framework dient als umfangreiche Grundlage für die Entwicklung von reichhaltigen Client-seitigen Web- und Native-Anwendungen, insbesondere durch seine Stärken in der Datenbindung. Wenn also Inhalte in der Benutzeroberfläche aktualisiert werden müssen, sobald Eingaben oder Änderungen von Nutzern erfolgen, lässt sich dies mit Angular einfach umsetzen.
Im Workshop werden die Grundlagen von Angular, einschließlich leistungsstarker Funktionen wie Zwei-Wege-Datenbindung, umfassendes Routing und Dependency Injection entdeckt. Schritt für Schritt erfolgt eine Führung durch die Angular-Plattform mit einem besonderen Fokus auf der komponentenbasierten Architektur. Hierbei wird gezeigt, was Angular ist und welche Möglichkeiten es bietet, während eine voll funktionsfähige Web-App von Anfang bis Ende erstellt wird.
Der Workshop wird in deutscher Sprache über ein gängiges Online-Meeting-System abgehalten. Die Teilnehmenden benötigen eigene PCs und Internet-Anschluss. Nach erfolgreichem Abschluss des Kurses wird ein Teilnahme Zertifikat ausgestellt.
Agenda der IT-Schulung
Angular Architektur Übersicht
- Warum solle man Angular verwenden?
- Grundlagen von TypeScript
- Komponenten, Bootstrap und das DOM
- Direktiven und Pipes
- Datenbindung
- Injektion von Abhängigkeiten
- Dienste und andere Geschäftslogik
- Datenpersistenz
- Routing
Angular-Komponenten
- NgModule und das Root-Modul
- Metadaten der Komponente
- Bootstrapping des Moduls für den Browser
- Der Komponentenselektor
- Das Komponenten-Template
- Das Styling einer Komponente
- Verwendung anderer Komponenten in einer Komponente
- Interpolation und der Ausdruckskontext
- Eigenschaftsbindung
- Ereignis-Bindung
- Daten mit @Input in die Komponente holen
- Abonnieren von Komponentenereignissen mit @Output
Angular-Direktiven und -Pipes
- Strukturelle Direktiven: ngIf
- Strukturelle Direktiven: ngFor
- Attribut-Direktiven: Eingebaut
- Attribut-Direktiven: Benutzerdefiniert
- Verwenden von Direktiven Werten
- Arbeiten mit Ereignissen in Direktiven
- Angular-Pipes: Eingebaut
- Angular-Pipes: Benutzerdefiniert
Angular-Formulare
- Angular Formulare
- Template-gesteuerte Formulare
- Modell-gesteuerte Formulare
- Validierung: Eingebaut
- Validierung: Benutzerdefiniert
- Fehlerbehandlung
Angular-Dependency Injection und Services (Dienste)
- Wie Angular die Dependency Injection ausführt
- Dienste in Angular
- Injektion von Klassen Konstruktoren
- Erstellen und Bereitstellen eines Dienstes
- Bereitstellen von Diensten im Root
- Verwendung des Dienstes in Komponenten
- Der @Inject-Dekorator
- Injektions-Token
HTTP-Zugriff in Angular
- Der Angular HttpClient
- Verwendung eines Mock-Backends für HTTP-Aufrufe
- Verwendung des HttpClient für GET-Aufrufe
- Verwendung von Suchparametern in GET-Aufrufen
- Verwenden des HttpClient für POST-, PUT- und DELETE-Aufrufe
- Behandlung von HTTP-Fehlern
Routing in Angular
- Setzen der Basis href und Konfigurieren von Routen
- Registrierung von Routing im App-Modul
- Router-Outlets
- Router-Links
- Arbeiten mit Routing-Parametern
- Verwenden der Router Klasse zum Navigieren
- Verwenden einer Funktion NgModule für Routen
- Lazy Loading eines Routenmoduls
Styling von Komponenten in Angular
- Die View-Encapsulation-Modi
- Wie Angular Stile auf Komponenten überträgt
- Gemeinsame CSS-Selektoren verwenden
- Spezielle CSS-Selektoren, die Angular unterstützt
- Arbeiten mit globalen Styles