Angular Einführung

Agenda Einführung Grundlagen von TypeScript und ECMAScript 6 (ES6)

• TypeScript-Installation, Konfiguration und Kompilierung
• Typ-Annotationen
• Klassen
• Scoping mit let-, var- und const-Keywords
• Arrow-Funktionen
• ES-Module
• Dekoratoren
• Template-Literale
• Spread-Syntax und Rest Parameter
• Umstrukturierung

Übersicht über Angular

• Vorteile des Programmierens mit Angular
• Verständnis der Angular-Versionen
• Single-page Web Application Architectures vs. Traditional Server-side Web Application Architectures
• Angular Style Guide
• Architektur von Angular
• Angular im Vergleich zu anderen JavaScript-Bibliotheken und Frameworks (React, VueJS, etc...)
• Ihre erste Angular-Anwendung

Komponenten

• Verstehen von Komponenten
• Komponenteneigenschaften und Methoden
• Templates: Inline, Multi-line und Extern mit Komponenten-relativen Pfaden

Angular-Module (NgModule)

• Angular-Module vs. ES-Module
• Organisieren des Codes in Feature-Modulen

Projekt einrichten (Verwendung der Angular CLI)

• Angular CLI-Funktionen
• Erstellen eines neuen Projekts (mit neuen CLI-Eingabeaufforderungen)
• Code generieren
• Anpassen der Angular CLI

Daten-Bindung

• Interpolation
• Bindung von Eigenschaften
• Ereignisbindung
• Bidirektionale Datenbindung

Direktives

• Strukturell: ngFor, ngIf, ngSwitch
• Attribut: ngClass, ngStyle

Pipes

• Built-in Pipes: Verwenden, Parameterübergabe, Verkettung

Fortgeschrittene Komponenten

• Komponentenkommunikation mit @Input, @Output
• Komponenten-Architektur
• Komponenten-Stile
• Lifecycle Hooks für Komponenten
• Evaluierung von UI-Komponenten-Frameworks & Bibliotheken

Services & Dependency Injection

• Verwendung eines Service für den Zugriff auf Daten
• Verwendung eines Service, um Geschäftslogik zu kapseln
• Verstehen des Umfangs von Diensten

Injektion von Abhängigkeiten

• Verständnis von Dependency Injection
• Angulars System zur Einspritzung von Abhängigkeiten
• Registrieren
• Injizieren

Modellgesteuerte Formulare (Reactive Forms)

• Importieren des ReactiveFormsModuls
• FormControl, FormGroup und AbstractControl
• Binden von DOM-Elementen an FormGroups und FormControls
• Validierungsregeln, Meldungen und Stile
• Refactoring von Reactive Forms zur Wiederverwendung
• Benutzerdefinierte Validatoren

Kommunikation mit dem Server unter Verwendung des HttpClient-Dienstes

• Entscheiden zwischen Promises oder Observables (RxJS)
• Eine HTTP-GET-Anfrage stellen
• Senden von Daten an den Server mit Http POST- und PUT-Anfragen
• Ausstellen einer HTTP DELETE-Anforderung
• Abfangen von Requests und Responses

Router

• Importieren des RouterModuls
• Routes konfigurieren
• Komponenten mit einem RouterOutlet anzeigen
• Deklarativ navigieren mit RouterLink
• Navigieren mit Code unter Verwendung des Routers
• Zugriff auf Parameter mit ActivatedRoute

Bereitstellen einer Angular Application to Production

• Erstellen einer Anwendung mit der Angular CLI
• Differenzielles Laden: Erstellen eines modernen Builds (ES2015) und eines Legacy-Builds (ES5)
• Bereitstellen auf einem Webserver

Ivy: Neue Compilation & Rendering Pipeline

• Verstehen von Ivy
• Ivy-Ziele
• Vorteile von Ivy
• Ivy-Bundle Sizes

Voraussetzungen

Für eine optimale Teilnahme am Kurs empfehlen wir folgende Vorkenntnisse:

• Grundkenntnisse in JavaScript und TypeScript sind von Vorteil

Zielgruppe

• Web-Entwickler
• Softwareentwickler
• Programmierer