Angular Kompaktkurs

Ziele

In diesem fünftägigen Angular Kompaktkurs lernen die Teilnehmer, wie Sie mit Angular (aktuelle Majorversion) Single-Page-Applicationen erstellen. Außerdem sammeln Sie erste Erfahrungen mit TypeScript, der Angular-Systemsprache und werden auch an die Vorteile der komplexeren Funktionen des Frameworks eingeführt.

Die Schulung wird auf der jeweils aktuellen Version von Angular durchgeführt.

Zielgruppe

• Web-Entwickler
• Web-Programmierer mit Erfahrung in HTML, CSS, JavaScript

Voraussetzungen

Gute JavaScript-Kenntnisse.

Agenda

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

Unit-Tests

• Tools: Jasmine, Karma
• Jasmine-Syntax: describe, it, beforeEach, afterEach, matchers
• Setup und der erste Test
• Test-Terminologie: Mock, Stub, Spy, Fakes
• Angular Test-Terminologie: TestBed, ComponentFixture, debugElement, async, fakeAsync, tick, inject
• Einfacher Komponententest
• Erkennen von Komponentenänderungen
• Testen einer Komponente mit Eigenschaften ( Inputs ) und Ereignissen ( Outputs )
• Testen einer Komponente, die den Router verwendet
• Testen einer Komponente, die von einem Dienst abhängt
• Testen eines Services und Mocking der HTTP Requests
• Testen einer Pipe

RxJS und Observables

• Was ist eine Observable?
• Erstellen von Observables
• Was ist ein Observer?
• Observer Beispiel
• Operatoren: map, switchMap, debounceTime, distinctUntilChanged
• Praktische Anwendung der Verwendung von RxJS
• Subjekt
• Subjekt Example
• EventEmitter oder Observable

Security

• Best Practices
• Verhindern von Cross-Site Scripting (XSS)
• Trusting values mit dem DOMSanitizer
• HTTP-Angriffe (CSRF und CSSI)
• Authentifizierung mit JSON-Web-Tokens (JWT)
• Autorisierung: Router-Guards

Erkennung von Änderungen

• Verständnis für Zone.js und Change Detection
• Change Detection Strategies Default und OnPush

Erweitertes Angular CLI

• Anpassen eines Builds mit Builder-APIs in der CLI
• Erzeugen von Web Workers

Erweitertes Routing

• Lazy-Loading von Angular-Modulen (mit dynamischen Importen)
• Nested oder Child Routes

Erweiterte Dependency Injection

• Provider
• Hierarchische Injection
• providedIn-Optionen: root, module, platform, any

Pipes

• Erstellen einer benutzerdefinierten Pipe mit PipeTransform
• Verstehen von Pure und Impure Pipes