Fortgeschrittener Angular-Kurs
Classroom Schulung | Deutsch | Anspruch
Schulungsdauer: 2 Tage
Ziele
Die Teilnehmer erhalten ein Verständnis der Anwendungsarchitektur und der Best Practices für das Design von Angular und lernen, wie man in einer Angular-Anwendung authentifiziert, Unit-Tests durchführt und den Anwendungsstatus verwaltet.
Dieser Kurs wird mit der aktuellen Version von Angular durchgeführt.
Zielgruppe
- Angular-Entwickler
Voraussetzungen
- Grundlegende Erfahrung mit Angular oder Besuch des Seminar Angular Grundkurs
Agenda
Einführung
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
Ziele
Die Teilnehmer erhalten ein Verständnis der Anwendungsarchitektur und der Best Practices für das Design von Angular und lernen, wie man in einer Angular-Anwendung authentifiziert, Unit-Tests durchführt und den Anwendungsstatus verwaltet.
Dieser Kurs wird mit der aktuellen Version von Angular durchgeführt.
Zielgruppe
- Angular-Entwickler
Voraussetzungen
- Grundlegende Erfahrung mit Angular oder Besuch des Seminar Angular Grundkurs
Agenda
Einführung
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