Angular Kompaktkurs

Classroom Schulung | Deutsch | Anspruch

Schulungsdauer: 5 Tage

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

Über den Dozenten

Thomas Götzinger

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

Über den Dozenten

Thomas Götzinger

Dieser Lerninhalt wird in folgenden Lernplänen verwendet

Zu diesem Lerninhalt werden folgende Lerngruppen angeboten

Tags

Diese Seite weiterempfehlen