Angular

Оглавление

Ferdinand Malcher. Angular

Angular

Vorwort

Versionen und Namenskonvention: Angular vs. AngularJS

Umgang mit Aktualisierungen

An wen richtet sich das Buch?

Was sollten Sie mitbringen?

Für wen ist dieses Buch weniger geeignet?

Wie ist dieses Buch zu lesen?

Abtippen statt Copy & Paste

Beratung und Workshops

Danksagung

Aktualisierungen in der dritten Auflage

Neue Kapitel

Stark überarbeitete und erweiterte Kapitel

Sonstiges

Aktualisierungen in der zweiten Auflage. Neue Kapitel

Vollständig neu geschriebene Kapitel

Stark überarbeitete und erweiterte Kapitel

Inhaltsverzeichnis

1Schnellstart

StackBlitz und Drittanbieter-Cookies

Polyfill bzw. Shim

1.1Das HTML-Grundgerüst

Listing 1–1Die Datei src/index.html. 1.2Die Startdatei für das Bootstrapping

Listing 1–2Die Datei src/main.ts

Achtung: Bootstrap hat nichts mit CSS zu tun!

1.3Das zentrale Angular-Modul

Listing 1–3Die Datei src/app/app.module.ts

Achtung: JavaScript-Modul ≠ Angular-Modul

1.4Die erste Komponente

Listing 1–4Die Datei src/app/app.component.ts

DieHelloComponent

Zusammenfassung

2Haben Sie alles, was Sie benötigen?

2.1Visual Studio Code

Kommentare im JSDoc-Format

Erweiterungen für VS Code

2.2Google Chrome

2.3Paketverwaltung mit Node.js und NPM. JavaScript ohne Browser

Node.js und NPM installieren

Listing 2–1Node.js mithilfe von Homebrew installieren

Listing 2–2Versionsnummer von Node.js und NPM ausgeben

NPM-Pakete installieren

Listing 2–3NPM-Pakete lokal installieren

Listing 2–4NPM-Pakete global installieren

Tipp: Windows-Build-Tools installieren

Zusammenfassung

2.4Codebeispiele in diesem Buch

Listing 2–5Beispielprojekt als Komplettpaket klonen

Listing 2–6Beispielprojekt in verschiedenen Stadien klonen

Listing 2–7Alle weiteren Codebeispiele klonen

3Angular CLI: der Codegenerator für unser Projekt

3.1Das offizielle Tool für Angular

3.2Installation

Auf eine globale Installation verzichten

3.3Die wichtigsten Befehle

Listing 3–1Neues Projekt generieren

Listing 3–2Komponente erstellen

Listing 3–3Komponente erstellen mit dem Kurzbefehl

Listing 3–4Unit-Tests ausführen

4Einführung in TypeScript

4.1Was ist TypeScript und wie setzen wir es ein?

Verwirrung um die ECMAScript-Versionen

4.2Variablen: const, let und var

Die schmerzhafte var-heit

Blockgebundene Variablen mit let

Konstanten mit const

const, let, var – wann nutze ich welche?

4.3Die wichtigsten Basistypen

Primitive Typen: Zahlen, Zeichenketten und boolesche Werte

Typisierte Arrays

Listing 4–1JavaScript-Array mit unterschiedlichen Typen

Beliebige Werte mit any und unknown

4.4Klassen

Listing 4–2Deklaration einer Klasse

Eigenschaften/Propertys

Listing 4–3Eigenschaften einer Klasse

Methoden

Rückgabetyp void

Listing 4–4Methoden ohne Rückgabewert. Getter und Setter

Listing 4–5Klasse mit Getter- und Setter-Methoden. Konstruktoren

Listing 4–6Klasse mit Konstruktor

Listing 4–7Konstruktor – vereinfachte Initialisierung von Eigenschaften. Einschränkung: Nur ein Konstruktor pro Klasse

Vererbung

Listing 4–8Vererbung

4.5Interfaces

Interface für Klassen

4.6Template-Strings

Listing 4–9Template-String mit eingebetteten Ausdrücken

4.7Arrow-Funktionen/Lambda-Ausdrücke

Listing 4–10Herkömmliche Callback-Funktion

Listing 4–11Zusätzlicher Code durch die Verwendung herkömmlicher Callback-Funktionen

Listing 4–12Vereinfachung: Arrow Functions werden im Kontext der jeweiligen Klasse ausgeführt. 4.8Spread-Operator und Rest-Syntax

Spread-Operator vs. Spread-Syntax

Objekteigenschaften kopieren

Klasseninstanzen können nicht geklont werden

Array-Elemente kopieren

Funktionsargumente übergeben

Rest-Syntax: Funktionsargumente empfangen

4.9Union Types

4.10Destrukturierende Zuweisungen

4.11Decorators

4.12Optional Chaining

4.13Nullish Coalescing

Zusammenfassung

5Projekt- und Prozessvorstellung

5.1Unser Projekt: BookMonkey

Storys

Skizzen

5.2Projekt mit Angular CLI initialisieren

Listing 5–1Ein neues Projekt für den BookMonkey anlegen

NPM: Warnungen und Hinweise zu Sicherheitslücken

Listing 5–2In das Projekt navigieren

Datei nicht gefunden?

angular.json

package-lock.json

package.json

Tipp: TSLint für Visual Studio Code

Der Inhalt des src-Ordners

Die Einstiegsseite index.html

Listing 5–3Die Datei index.html des BookMonkeyProjekts. Bootstrapping der Anwendung

Listing 5–4Das zentrale AppModule unserer Anwendung (app.module.ts)

Listing 5–5Bootstrapping der BookMonkey-App (main.ts)

Den Webserver starten

Listing 5–6Den Webserver starten

5.3Style-Framework Semantic UI einbinden

Listing 5–7Semantic UI über NPM installieren

Listing 5–8Globales CSS in die Anwendung einbinden

Alternative: Styles mit CSS-Imports einbinden

Listing 5–9Den Loader aus Semantic UI nutzen (index.html)

6Komponenten & Template-Syntax: Iteration I

6.1Komponenten: die Grundbausteine der Anwendung

6.1.1Komponenten

Was ist ein Decorator?

Listing 6–1Eine simple Komponente

Was ist ein CSS-Selektor?

Listing 6–2Erzeugtes Markup für die Komponente MyComponent

Das Template einer Komponente

Listing 6–3Template einer Komponente definieren

Der Style einer Komponente

Ein Blick ins Innere: View Encapsulation

Listing 6–4Style-Definitionen in Komponenten. 6.1.2Komponenten in der Anwendung verwenden

Listing 6–5Alle Komponenten müssen im AppModule deklariert werden. 6.1.3Template-Syntax

{{ Interpolation }}

Der Safe-Navigation-Operator ?

[Property Bindings]

Eselsbrücke

(Event Bindings)

Eselsbrücke

[(Two-Way Bindings)]

Eselsbrücke

#Elementreferenzen

Direktiven

*Strukturdirektiven

Listing 6–6 ngIf verwenden

Listing 6–7 ngFor verwenden

Listing 6–8Erzeugtes Markup für Listing 6–7

Listing 6–9 ngFor mit Hilfsvariablen

Listing 6–10Erzeugte Ausgabe für Listing 6–9

Listing 6–11Einsatz von ngSwitch

[Attributdirektiven]

Merke: Eckige Klammern → Ausdruck

| Pipes

Ist das alles gültiges HTML?

Zusammenfassung

6.1.4Den BookMonkey erstellen. Story – Listenansicht

Klasse oder Interface für die Datenmodelle?

Interfaces für die Datenmodelle anlegen

Listing 6–12Interface Book anlegen mit der Angular CLI

Listing 6–13Das Interface Book (book.ts)

Eine Komponente für die Buchliste

Listing 6–14Komponente BookListComponent mit der Angular CLI anlegen

Namenskonventionen in Angular – dashed-case vs. CamelCase

Listing 6–15Das Template der BookListComponent (book-list.component.html)

Listing 6–16 BookListComponent (book-list.component.ts)

ngOnInit() statt Konstruktor – die Lifecycle-Hooks von Angular

Listenkomponente in die Anwendung einbinden

Listing 6–17Template der Hauptkomponente AppComponent (app.component.html) Ein Präfix verwenden

Was haben wir gelernt?

Defekte Unit-Tests

6.2Property Bindings: mit Komponenten kommunizieren

6.2.1Komponenten verschachteln

6.2.2Eingehender Datenfluss mit Property Bindings

Listing 6–18DOM-Eigenschaften mit JavaScript schreiben

Listing 6–19HTML-Element mit Attributen

Propertys, Propertys, Propertys, …

6.2.3Andere Arten von Property Bindings

Attribute Bindings

Listing 6–20Attribute Binding. Class Bindings

Listing 6–21Class Binding

Listing 6–22Mehrere CSS-Klassen setzen mit der Direktive ngClass

Listing 6–23Mehrere CSS-Klassen setzen mit Class Bindings. Style Bindings

Listing 6–24Ansatz zum Setzen von CSS-Eigenschaften (funktioniert nicht)

Listing 6–25Style Binding

Listing 6–26Die Direktive ngStyle verwenden

6.2.4DOM-Propertys in Komponenten auslesen

Listing 6–27Property Binding auf dem Host-Element einer Komponente

Listing 6–28Propertys auslesen mit dem @Input()-Decorator

Listing 6–29Input-Propertys umbenennen

6.2.5Den BookMonkey erweitern. Refactoring – Property Bindings

Listing 6–30Template-Struktur der Buchliste

Listing 6–31Komponente BookListItem mit der Angular CLI anlegen

Listing 6–32Template der Komponente BookListComponent (book-list.component.html)

Listing 6–33Komponente BookListItemComponent (book-list-item.component.ts)

Listing 6–34Template der Komponente BookListItemComponent (book-list-item.component.html)

Was haben wir gelernt?

6.3Event Bindings: auf Ereignisse in Komponenten reagieren

Listing 6–35Event Binding

6.3.1Native DOM-Events

Listing 6–36Event Handler in JavaScript

Listing 6–37Event Bindings in Angular

Listing 6–38Event-Payload übergeben (JavaScript)

Listing 6–39Event-Payload übergeben (Angular)

Warum die Angular-Syntax verwenden?

6.3.2Eigene Events definieren

Listing 6–40Eigene Events für eine Komponente definieren

Listing 6–41Eigenes Event abonnieren mit Event Binding

Listing 6–42Payload an die Handler-Methode übergeben

6.3.3Den BookMonkey erweitern. Story – Event Bindings

Komponente für die Detailansicht anlegen

Listing 6–43Komponente BookDetailsComponent mit der Angular CLI anlegen

Datenfluss in der AppComponent

Listing 6–44 AppComponent (app.component.ts)

Meldung: Expected call-signature to have a typedef

Listing 6–45Template der AppComponent (app.component.html)

Event aus der BookListComponent werfen

Listing 6–46Ausschnitt aus der Komponente BookListComponent (book-list.component.ts)

Listing 6–47Template der BookListComponent (book-list.component.html) Detailansicht implementieren

Listing 6–48 BookDetails-Component (book-details.component.ts)

Listing 6–49Template der BookDetails-Component (book-details.component.html) Der <ng-container>

Code Review

Was haben wir gelernt?

7Powertipp: Styleguide

8Services & Routing: Iteration II

8.1Dependency Injection: Code in Services auslagern

Klärung des Begriffs »Service«

Inversion of Control: Zuständigkeit umkehren

Listing 8–1Instanz einer Klasse direkt erzeugen

8.1.1Abhängigkeiten anfordern

Listing 8–2Constructor Injection mit TypeScript

Listing 8–3Kurzform für Constructor Injection. 8.1.2Services in Angular

Listing 8–4Service mit Decorator Injectable() 8.1.3Abhängigkeiten registrieren

Abhängigkeiten explizit registrieren mit providers

Listing 8–5Abhängigkeit über @NgModule() bereitstellen

Tree-Shakable Providers mit providedIn

Listing 8–6Tree-Shakable Provider mit providedIn

8.1.4Abhängigkeiten ersetzen

Listing 8–7Abhängigkeit explizit bereitstellen (Kurzform)

Listing 8–8 useClass verwenden

Listing 8–9 useClass verwenden und Abhängigkeit ersetzen

Listing 8–10 useValue verwenden

Listing 8–11 useFactory verwenden

Abhängigkeiten für Unit-Testing ersetzen

Eingebaute Abhängigkeit ErrorHandler ersetzen

Listing 8–12Eigenen ErrorHandler implementieren

Listing 8–13 ErrorHandler ersetzen

8.1.5Eigene Tokens definieren mit InjectionToken

Listing 8–14Ein InjectionToken erzeugen

Listing 8–15Ein InjectionToken bereitstellen. 8.1.6Abhängigkeiten anfordern mit @Inject()

Listing 8–16Eigenes Token anfordern mit @Inject()

8.1.7Multiprovider: mehrere Abhängigkeiten im selben Token

Listing 8–17Multiprovider registrieren. 8.1.8Zirkuläre Abhängigkeiten auflösen mit forwardRef

8.1.9Provider in Komponenten registrieren

Listing 8–18Provider direkt in der Komponente angeben

8.1.10Den BookMonkey erweitern. Refactoring – Codekapselung mit Services

Service generieren

Listing 8–19Service anlegen mit der Angular CLI

Listing 8–20Methode getAll() im BookStoreService (book-store.service.ts) Lifecycle-Hooks funktionieren nur in Komponenten und Direktiven

Service verwenden

Listing 8–21Service verwenden in der BookListComponent (book-list.component.ts)

Was haben wir gelernt?

8.2Routing: durch die Anwendung navigieren

Warum Routing?

8.2.1Routen konfigurieren

Listing 8–22Eine Routendefinition

Listing 8–23Mehrere Routendefinitionen mit Imports. 8.2.2Routing-Modul einbauen

Listing 8–24Neues Projekt mit Routing-Konfiguration anlegen

Listing 8–25Routing-Modul mit zwei Routen

Listing 8–26Das zentrale AppModule importiert das AppRoutingModule (app.module.ts)

Die Reihenfolge ist wichtig!

8.2.3Komponenten anzeigen

Listing 8–27Template der Komponente AppComponent

8.2.4Root-Route

Listing 8–28 StartComponent als Standardroute festlegen

8.2.5Routen verlinken

Listing 8–29Mit RouterLink zu Routen verlinken

RouterLink nur für interne Links

Pfade in Single-Page-Applikationen

8.2.6Routenparameter

Listing 8–30Routenparameter konfigurieren

Listing 8–31Routenparameter übergeben Keine optionalen Parameter

Listing 8–32Routenparameter auslesen

Listing 8–33Routenparameter auslesen (asynchron)

Was ist mit this.route.params?

8.2.7Verschachtelung von Routen

Listing 8–34Route mit Kind-Routen

Listing 8–35Beispiele für Links auf verschachtelte Routen. 8.2.8Routenweiterleitung

Listing 8–36Route mit Weiterleitung

Achtung: Redirects mit absoluten Pfaden können nicht verkettet werden!

8.2.9Wildcard-Route

Listing 8–37Wildcard-Route für unbekannte Pfade

8.2.10Aktive Links stylen

Listing 8–38 RouterLinkActive: CSS-Klassen auf aktive Links setzen

Listing 8–39 RouterLinkActive auf einem Elternelement

8.2.11Route programmatisch wechseln

Listing 8–40 Router.navigate() verwenden, um die Route aus der Komponente heraus zu wechseln

Listing 8–41Relative Pfade mit Router.navigate()

8.2.12Den BookMonkey erweitern. Story – Navigation

Komponente für die Startseite anlegen

Listing 8–42 HomeComponent anlegen mit der Angular CLI

Routing aufsetzen

Listing 8–43Routen auf die drei Komponenten

Listing 8–44Komplette Routenkonfiguration mit Redirect (app-routing.module.ts)

Listing 8–45Router-Outlet in der AppComponent (app.component.html)

Parameter in Detailansicht auslesen

Listing 8–46Die Methode getSingle() im BookStoreService (book-store.service.ts)

Listing 8–47 BookDetailsComponent verwendet die Servicemethode (book-details.component.ts)

Links setzen

Listing 8–48Navigationsleiste in der AppComponent (app.component.html)

Relative oder absolute Pfade?

Listing 8–49Buchliste in der BookListComponent mit Link zur Detailseite (book-list.component.html)

Listing 8–50Link im Template der HomeComponent (home.component.html)

Aktive Links stylen

Listing 8–51Navigationsleiste in der AppComponent mit RouterLinkActive (app.component.html)

Komponenten aufräumen

Was haben wir gelernt?

9Powertipp: Chrome Developer Tools

Die Chrome Developer Tools starten

Elements: den DOM inspizieren

Console: Befehle ausführen

Network & Timeline: geladene Dateien analysieren

Debugging: Fehler im Quellcode aufspüren

Mit Breakpoints arbeiten. Die debugger-Anweisung einsetzen

Listing 9–1Die Anweisung debugger

Achtung: Debugger und Console wieder entfernen

Haltepunkte in den Developer Tools setzen

Während des Debuggings navigieren

Werte von Objekten inspizieren

Eine Quellcodedatei durchsuchen

Zwischen mehreren Dateien navigieren

Den Call Stack inspizieren

10HTTP & reaktive Programmierung: Iteration III. 10.1HTTP-Kommunikation: ein Server-Backend anbinden

CRUD

Die alte HTTP-Klasse von Angular

Der HttpClient von Angular

Reaktive Datenströme mit Observables

10.1.1Modul einbinden

Listing 10–1Das HttpClientModule importieren

10.1.2Requests mit dem HttpClient durchführen

Listing 10–2HTTP-Daten mit der get()-Methode abrufen. 10.1.3Optionen für den HttpClient

Die gesamte HttpResponse abonnieren

Listing 10–3Abonnieren von Daten mittels get()-Methode des HttpClient s

Zusätzliche Request-Header setzen

Listing 10–4Request-Header setzen. Query-Parameter übermitteln

Listing 10–5Query-Parameter hinzufügen

Antwort ohne JSON verarbeiten

Listing 10–6Response-Typ setzen. 10.1.4Den BookMonkey erweitern. Story – HTTP

Das HttpClientModule nutzen

Listing 10–7 HttpClientModule importieren (app.module.ts) Den BookStoreService anpassen

Listing 10–8Die HttpClient-Klasse importieren und in den Konstruktor injizieren (book-store.service.ts) getAll(): alle Bücher abrufen

Listing 10–9Die Methode getAll() (book-store.service.ts) getSingle(): ein einzelnes Buch abrufen

Listing 10–10Die Methode getSingle() (book-store.service.ts) remove(): ein Buch löschen

Listing 10–11Die Methode remove() (book-store.service.ts)

Daten aus dem Service abonnieren

Kein Abonnent = keine Aktion

Listing 10–12Die Komponente BookListComponent (book-list.component.ts , Ausschnitt)

Die Detailansicht anpassen

Listing 10–13Service für die Detailansicht anfragen (book-details.component.ts) Styling anpassen

Listing 10–14Die Löschmethode removeBook() (book-details.component.ts)

Listing 10–15Lösch-Button in der Komponente Book-DetailsComponent (book-details.component.html, Ausschnitt) Die Listenansicht auf vorhandene Einträge prüfen

Listing 10–16Nachrichten in der Bücherliste anzeigen (book-list.component.html) Code Review

Was haben wir gelernt?

10.2Reaktive Programmierung mit RxJS

10.2.1Alles ist ein Datenstrom

10.2.2Observables sind Funktionen

Listing 10–17Producer-Funktion

Listing 10–18Funktion mit Observer aufrufen

Listing 10–19Ausgabe des Programms

10.2.3Das Observable aus RxJS

10.2.4Observables abonnieren

Listing 10–20Observable abonnieren mit Observer

Listing 10–21Observable abonnieren mit Callbacks. Observer und Subscriber: Was ist der Unterschied?

Subscriptions beenden

Listing 10–22Subscription beenden mit unsubscribe()

Observables und das Suffix $

10.2.5Observables erzeugen

Konstruktor von Observable

Listing 10–23Observable erzeugen mit Konstruktor

Creation Functions

Listing 10–24Observable erzeugen mit of()

Listing 10–25Observable erzeugen mit from()

Listing 10–26Observable erzeugen mit timer() und interval()

Observables und Promises

10.2.6Operatoren: Datenströme modellieren

Listing 10–27Operatoren verwenden

Marble-Diagramme

Die wichtigsten Operatoren: map(), filter() und scan()

Listing 10–28Transformation mit map()

Listing 10–29Filtern mit filter()

Listing 10–30Punkte kumulieren mit scan()

Pipeable Operators vs. Dot-Chaining

Imports von RxJS

10.2.7Heiße Observables, Multicasting und Subjects

Kalte und heiße Observables

Eselsbrücke: Restaurant und Kantine

Durchlauferhitzer: kalte Datenströme teilen mit share()

Listing 10–31Datenstrom teilen mit share()

Multicasting mit Subjects

Listing 10–32Struktur von Subject

Listing 10–33Subject verwenden

Listing 10–34Subscriben in ein Subject

Listing 10–35 BehaviorSubject verwenden

Listing 10–36 ReplaySubject verwenden

Rechtzeitiger Aufbau der Subscription

10.2.8Subscriptions verwalten & Memory Leaks vermeiden

Listing 10–37Subscription mit Memory Leak erzeugen

Listing 10–38 unsubscribe() beim Beenden der Komponente

Listing 10–39Datenstrom beenden mit takeUntil()

10.2.9Flattening-Strategien für Higher-Order Observables

Listing 10–40Verschachteltes Subscribe

Listing 10–41Verschachteltes Subscribe (vereinfacht)

Listing 10–42Mappen auf ein anderes Observable

Listing 10–43 mergeAll() verwenden

Listing 10–44 mergeMap() verwenden

Beispiel: Sushi-Restaurant

Listing 10–45Sushi essen mit Observables

10.2.10Den BookMonkey erweitern: Daten vom Server typisieren und umwandeln. Refactoring – Daten vom Server typisieren und umwandeln

Listing 10–46Die Methode getAll() (book-store.service.ts)

Ein konkreter Typ für die HTTP-Antwort

Listing 10–47Interface BookRaw anlegen

Listing 10–48Die neuen Interfaces BookRaw und ThumbnailRaw (book-raw.ts) OpenAPI Generator: Interfaces und Services automatisch generieren

Daten transformieren

Listing 10–49Klasse BookFactory anlegen

Listing 10–50 BookFactory zur Transformation der Daten (book-factory.ts) Factory im Service verwenden

Listing 10–51Methode getSingle() im BookStoreService (book-store.service.ts)

Listing 10–52Methode getAll() im BookStoreService (book-store.service.ts)

10.2.11Den BookMonkey erweitern: Fehlerbehandlung. Refactoring – Fehlerbehandlung

Neues Spiel, neues Glück: bei Fehlern neu versuchen

Listing 10–53Operator retry() im BookStoreService verwenden (book-store.service.ts)

Fehler abfangen und behandeln

Listing 10–54Fehler abfangen und verschlucken

Listing 10–55Methode errorHandler() im BookStoreService (book-store.service.ts)

Listing 10–56Fehler abfangen mit catchError() (book-store.service.ts)

10.2.12Den BookMonkey erweitern: Typeahead-Suche. Story – Typeahead-Suche

Den BookStoreService erweitern

Listing 10–57Die neue Methode getAllSearch() (book-store.service.ts)

Eine neue Komponente erstellen

Listing 10–58Komponente SearchComponent anlegen mit der Angular CLI

Listing 10–59Die SearchComponent in die Startseite einbauen (home.component.html)

Listing 10–60Komponente mit dem Subject keyUp$ (search.component.ts)

Listing 10–61Eingabefeld mit Event Binding auf keyup (search.component.html)

Listing 10–62Datenstrom ausgeben (search.component.ts)

Mindestlänge für den Suchbegriff

Listing 10–63Suchbegriffe nach der Länge filtern (search.component.ts) Datenstrom entprellen

Listing 10–64Datenstrom entprellen mit debounceTime() (search.component.ts)

Gleiche Suchbegriffe vermeiden

Listing 10–65Gleiche Begriffe vermeiden mit distinctUntilChanged() (search.component.ts) Suchbegriff zum Server schicken

Listing 10–66 BookStoreService in die Komponente injizieren (search.component.ts)

Listing 10–67Ergebnisse abrufen und speichern (search.component.ts) Seiteneffekte nutzen

Listing 10–68Vollständige Implementierung der SearchComponent (search.component.ts) Ergebnisse und Ladestatus anzeigen

Listing 10–69HTML-Template für die SearchComponent (search.component.html)

Wie geht’s weiter?

Was haben wir gelernt?

10.3Interceptoren: HTTP-Requests abfangen und transformieren

10.3.1Warum HTTP-Interceptoren nutzen?

10.3.2Funktionsweise der Interceptoren

10.3.3Interceptoren anlegen

Listing 10–70Der Grundaufbau eines Interceptors

Listing 10–71Interceptor zum Loggen von HTTP-Anfragen verwenden. 10.3.4Interceptoren einbinden

Listing 10–72Interceptor im AppModule registrieren

Listing 10–73Separate Datei für die Provider der Interceptoren anlegen

Listing 10–74Interceptoren aus separater Datei importieren

10.3.5OAuth 2 und OpenID Connect

Implicit Flow

Authorization Code Flow

OpenID Connect und Angular

10.3.6Den BookMonkey erweitern. Refactoring – Abgesicherte API verwenden

Das abgesicherte Backend nutzen

Listing 10–75Basis-URL im BookStoreService anpassen (book-store.service.ts)

Den Token-Interceptor implementieren

Listing 10–76Interceptor anlegen mit der Angular CLI

Listing 10–77Grundgerüst für den TokenInterceptor

Listing 10–78 TokenInterceptor implementieren. Den Token-Interceptor registrieren

Listing 10–79 TokenInterceptor als Provider registrieren

Authentifizierung und Autorisierung: Wie geht es weiter?

Was haben wir gelernt?

11Powertipp: Komponenten untersuchen mit Augury

Komponenten untersuchen

Augury

12Formularverarbeitung & Validierung: Iteration IV

Warum soll ich meine Formulare mit Angular bauen?

12.1Angulars Ansätze für Formulare

12.2Template-Driven Forms

12.2.1FormsModule einbinden

Listing 12–1Das FormsModule in die Anwendung importieren (app.module.ts) 12.2.2Datenmodell in der Komponente

Listing 12–2Datenmodell in der Komponente initialisieren. 12.2.3Template mit Two-Way Binding und ngModel

Listing 12–3Ein einfaches HTML-Formular

Listing 12–4Two-Way Binding mit ngModel

12.2.4Formularzustand verarbeiten

Listing 12–5CSS-Klassen der Controls für visuelles Feedback einsetzen

Listing 12–6Zugriff auf den Formularzustand. 12.2.5Eingaben validieren

Listing 12–7Mehrere Validatoren. 12.2.6Formular abschicken

Listing 12–8Methode zur Verarbeitung der Eingaben

Listing 12–9Submit-Event abfangen. 12.2.7Formular zurücksetzen

Listing 12–10Zugriff auf NgForm

@ViewChild() und @ContentChild() mit dem Flag static

Listing 12–11Formular zurücksetzen

12.2.8Den BookMonkey erweitern. Story – Neue Bücher hinzufügen

Das FormsModule einbinden

Listing 12–12 DateValueAccessor-Module importieren (app.module.ts)

Die Komponentenstruktur

Listing 12–13Die Komponenten BookForm und CreateBook mit der Angular CLI anlegen

Die Komponenten zusammenbauen

Listing 12–14Das Buchformular in die CreateBookComponent einbinden. Vorbereitungen für Routen und Funktionen

Listing 12–15Route für das Formular hinzufügen (app-routing.module.ts)

Listing 12–16Menüpunkt für die Administration hinzufügen

Factory-Methode für ein leeres Buch

Listing 12–17Die BookFactory um die empty()-Methode erweitern (book-factory.ts) Datenmodell in der BookFormComponent

Listing 12–18Die Komponente BookFormComponent anlegen (book-form.component.ts) Das Formular-Template anlegen

Listing 12–19Template des Formulars (book-form.component.html) Das Formular abschicken

Listing 12–20Die Komponente BookFormComponent fertigstellen (book-form.component.ts)

Die Methode create() im BookStoreService

Listing 12–21Den BookStoreService um die Methode create() erweitern (book-store.service.ts) Daten verarbeiten in der CreateBookComponent

Listing 12–22Das Event im Template der CreateBookComponent verarbeiten (create-book.component.ts)

Listing 12–23Die empfangenen Formulardaten in der CreateBookComponent versenden (create-book.component.ts) Formular zurücksetzen trotz Routing?

Fehlernachrichten anzeigen

Listing 12–24Die Komponente FormMessages mit der Angular CLI anlegen

Listing 12–25Die Komponente FormMessages implementieren (form-messages.component.ts)

Listing 12–26Das Template der Komponente FormMessages (form-messages.component.ts) Die FormMessagesComponent verwenden

Listing 12–27Die Komponente FormMessages in der BookFormComponent einbinden (book-form.component.html)

Zusammenfassung

Was haben wir gelernt?

12.3Reactive Forms

12.3.1Warum ein zweiter Ansatz für Formulare?

12.3.2Modul einbinden

Listing 12–28Das ReactiveFormsModule importieren (app.module.ts) 12.3.3Formularmodell in der Komponente

FormControl

FormGroup

FormArray

Komplexes Formularmodell

Listing 12–29Das Datenmodell in der Komponente. 12.3.4Template mit dem Modell verknüpfen

Listing 12–30Formular mit dem Modell verknüpfen

Listing 12–31Formularfelder mit formControlName

Listing 12–32Mehrere Formularfelder mit formGroupName

Listing 12–33Dynamische Formularfelder mit formArrayName

12.3.5Formularzustand verarbeiten

Listing 12–34Zugriff auf den Formularzustand

12.3.6Eingebaute Validatoren nutzen

Listing 12–35Validatoren in Reactive Forms verwenden

12.3.7Formular abschicken

Listing 12–36Event abonnieren und Formular abschicken

12.3.8Formular zurücksetzen

Listing 12–38Formular zurücksetzen. 12.3.9Formularwerte setzen

Listing 12–39Werte im Formular überschreiben. 12.3.10FormBuilder verwenden

Listing 12–40 FormBuilder verwenden

12.3.11Änderungen überwachen

Listing 12–41Änderungen an den Formularwerten überwachen und weiterverarbeiten. 12.3.12Den BookMonkey erweitern. Story – Das Buchformular erweitern

Modul importieren

Listing 12–42 FormsModule durch das ReactiveFormsModule ersetzen (app.module.ts)

Formularmodell definieren

Listing 12–43Die neuen Abhängigkeiten und Propertys in der Komponente (book-form.component.ts)

Listing 12–44Die neue Methode initForm() (Grundgerüst) (book-form.component.ts)

Listing 12–45Methoden zum Erzeugen der FormArrays (book-form.component.ts)

Listing 12–46Das vollständige Formularmodell (book-form.component.ts)

Listing 12–47Die Getter authors und thumbnails (book-form.component.ts) Das Template anlegen

Listing 12–48Das Template des Formulars (book-form.component.html)

Formularfelder für Autoren und Bilder dynamisch hinzufügen

Listing 12–49Neue Formularfelder in das FormArray einfügen (book-form.component.ts)

Listing 12–50Plus-Button im Template des Formulars (book-form.component.html) Formular abschicken

Listing 12–51Das Event mit den Formulardaten auslösen. Vorbereitung zum Bearbeiten von Büchern

Listing 12–52Die Komponente EditBook mit der Angular CLI anlegen

Listing 12–53Die Route admin/edit/:isbn hinzufügen (app-routing.module.ts)

Listing 12–54Das Template der BookDetailsComponent anpassen (book-details.component.html)

Den BookStoreService anpassen

Listing 12–55Die Methode update() (book-store.service.ts) Das Formular in der BookFormComponent anpassen

Listing 12–56Input-Propertys anlegen (book-form.component.ts)

Listing 12–57Formular in ngOnChanges() initialisieren (book-form.component.ts)

Listing 12–58Vorhandene Buchdaten ins Formular laden (book-form.component.ts)

Listing 12–59Feld im Modell deaktivieren (book-form.component.ts)

Listing 12–60ISBN nachträglich hinzufügen (book-form.component.ts) Der Container EditBookComponent

Listing 12–61Routenparameter und Buch abrufen (edit-book.component.ts)

Listing 12–62Die Methoden ngOnInit und updateBook der EditBookComponent (edit-book.component.ts)

Listing 12–63Buchdatensatz bearbeiten (edit-book.component.html)

Was haben wir gelernt?

12.4Eigene Validatoren entwickeln

12.4.1Validatoren für einzelne Formularfelder

Listing 12–64Grundlegender Aufbau einer Validierungsfunktion

Listing 12–65Format einer Postleitzahl validieren

Listing 12–66Eigene Validatoren in Reactive Forms nutzen

12.4.2Validatoren für Formulargruppen und -Arrays

Listing 12–67Ein Validator für ein FormArray

Listing 12–68Validator für ein FormArray einbinden

Listing 12–69Ein Validator für eine FormGroup

Listing 12–70Validator für eine FormGroup einbinden. 12.4.3Asynchrone Validatoren

Listing 12–71Service für die Abfrage der PLZ-API

Listing 12–72Den asynchronen Validator in ein Formular einbinden

Listing 12–73Status pending visualisieren

12.4.4Den BookMonkey erweitern. Story – Formularvalidierung

Listing 12–74Die Methode check() zur Überprüfung, ob eine ISBN bereits vorhanden ist (book-store.service.ts)

Listing 12–75Neue Klasse für die Validatoren anlegen

Die synchronen Validatoren implementieren

Listing 12–76Grundgerüst der Validierungsfunktionen (book-validators.ts) isbnFormat(): die ISBN validieren

atLeastOneAuthor(): Liste der Autoren validieren

Der asynchrone Validator BookExistsValidatorService

Die eigenen Validatoren verwenden

Listing 12–77Eigene Validatoren im Bücherformular nutzen (book-form.component.ts)

Listing 12–78Fehlermeldungen hinzufügen (form-messages.component.ts)

Was haben wir gelernt?

12.5Welcher Ansatz ist der richtige?

13Pipes & Direktiven: Iteration V

13.1Pipes: Daten im Template formatieren

13.1.1Pipes verwenden

Listing 13–1Pipe mit Argument

Listing 13–2Pipes verketten. 13.1.2Die Sprache fest einstellen

Listing 13–3Mehrere Sprachdefinitionen laden (wird selten benötigt)

13.1.3Eingebaute Pipes für den sofortigen Einsatz

UpperCasePipe (uppercase) und LowerCasePipe (lowercase)

Listing 13–4UpperCasePipe und LowerCasePipe

Listing 13–5Ausgabe von Listing 13–4. TitleCasePipe (titlecase)

Listing 13–6TitleCasePipe

Listing 13–7Ausgabe von Listing 13–6. DatePipe (date)

Listing 13–8Verwendung der DatePipe

Achtung: Änderung nur bei neuer Referenz

DecimalPipe (number)

Listing 13–9Verwendung der DecimalPipe

Listing 13–10Aufbau der digitsInfo für die DecimalPipe

Listing 13–11DecimalPipe

Listing 13–12Ausgabe von Listing 13–11. PercentPipe (percent)

Listing 13–13Verwendung der PercentPipe

Listing 13–14PercentPipe

Listing 13–15Ausgabe von Listing 13–14. CurrencyPipe (currency)

Listing 13–16Verwendung der CurrencyPipe

Listing 13–17CurrencyPipe

Listing 13–18Ausgabe von Listing 13–17. SlicePipe (slice)

Listing 13–19Verwendung der SlicePipe

Listing 13–20SlicePipe

Listing 13–21Ausgabe von Listing 13–20

Listing 13–22 SlicePipe mit ngFor

Listing 13–23Ausgabe von Listing 13–22

KeyValuePipe (keyvalue)

Listing 13–24Eingabe: Objekt

Listing 13–25Ausgabe: Array

Listing 13–26KeyValuePipe mit ngFor

Listing 13–27Ausgabe von Listing 13–26. JsonPipe (json)

Listing 13–28 JsonPipe

Listing 13–29Ausgabe von Listing 13–28. AsyncPipe (async)

Achtung: Jeder Aufruf erstellt eine Subscription!

I18nSelectPipe (i18nSelect)

Listing 13–30I18nSelectPipe

Listing 13–31Ausgabe von Listing 13–30. I18nPluralPipe (i18nPlural)

Listing 13–32I18nPluralPipe

Listing 13–33Ausgabe von Listing 13–32. 13.1.4Eigene Pipes entwickeln

Listing 13–34Grundaufbau einer Custom Pipe. Pipe-Argumente als Array erhalten mit der Rest-Syntax

Listing 13–35Einsatz der neuen Pipe MyPipe. Pipes und das Attribut pure

13.1.5Pipes in Komponenten nutzen

Listing 13–36Pipes in Komponentenklassen nutzen

Listing 13–37Äquivalente Verwendung der Pipe im Template

Listing 13–38Format-Funktionen von Angular direkt nutzen

13.1.6Den BookMonkey erweitern: Datum formatieren mit der DatePipe. Story – DatePipe

Listing 13–39 DatePipe verwenden in der BookDetailsComponent (book-details.component.html)

Listing 13–40 LOCALE_ID im AppModule setzen, um deutsche Sprache einzustellen (app.module.ts)

13.1.7Den BookMonkey erweitern: Observable mit der AsyncPipe auflösen. Refactoring – AsyncPipe

Listing 13–41Bücher für die Buchliste abrufen: gewöhnlicher Weg mit Subscribe-Callback (stark vereinfacht) (book-list.component.ts)

Listing 13–42 BookListComponent ohne direkte Subscription auf das Observable (book-list.component.ts)

Exkurs: ngIf mit dem Schlüsselwort as

Template für die BookListComponent umbauen

Listing 13–43Template der BookListComponent mit AsyncPipe (book-list.component.html)

Weitere Komponenten umbauen

13.1.8Den BookMonkey erweitern: eigene Pipe für die ISBN implementieren. Story – Pipe für die ISBN

Listing 13–44Verwendung der IsbnPipe

Listing 13–45Erwartete Ausgabe

Listing 13–46Grundgerüst der IsbnPipe

Listing 13–47Komplette Implementierung der IsbnPipe

Listing 13–48Ausschnitt ausbook-details.component.htmlmit IsbnPipe

Listing 13–49Ausschnitt aus book-list-item.component.html mit IsbnPipe

Was haben wir gelernt?

13.2Direktiven: das Vokabular von HTML erweitern

13.2.1Was sind Direktiven?

13.2.2Eigene Direktiven entwickeln

Listing 13–50Grundgerüst einer Direktivenklasse

Listing 13–51 MyDirective im Template verwenden

Listing 13–52Direktive in das AppModule einbinden

Listing 13–53Werte an die Direktive übergeben

Listing 13–54Attributwerte in der Direktive auslesen

Listing 13–55Propertys auf dem Host-Element

Listing 13–56Propertys auslesen. 13.2.3Attributdirektiven

Mit Host Bindings auf Eigenschaften zugreifen

Listing 13–57Beispiele für Host Bindings. Direktzugriff auf das Element mit ElementRef

Listing 13–58Direktzugriff mit ElementRef. Vorsicht mit ElementRef

Mit dem Host Listener auf Events eines Host-Elements reagieren

Listing 13–59Host Listener verwenden, um auf Events auf dem Host-Element zu reagieren

Listing 13–60Grundgerüst für eine Highlight-Direktive

Listing 13–61Highlight-Direktive mit Host Binding

Listing 13–62Highlight-Direktive mit ElementRef und Renderer2

13.2.4Strukturdirektiven

Listing 13–63Alternativer Aufruf von ngIf

Der Unterschied zwischen Entfernen und Ausblenden

Eigene Strukturdirektiven entwickeln

Listing 13–64Die neue Strukturdirektive myIf

Mehrere Strukturdirektiven auf einem Element

Zusammenfassung

13.2.5Den BookMonkey erweitern: Attributdirektive für vergrößerte Darstellung. Story – Attributdirektiven

Listing 13–65Direktive anlegen mit der Angular CLI

Listing 13–66Die neue Direktive im AppModule bekannt machen (app.module.ts)

Listing 13–67Die Implementierung der ZoomDirective (zoom.directive.ts)

Listing 13–68Die Direktive ins Template einbinden (book-list-item.component.html)

13.2.6Den BookMonkey erweitern: Strukturdirektive für zeitverzögerte Sterne. Story – Strukturdirektiven

Listing 13–69Direktive anlegen mit der Angular CLI

Listing 13–70Die neue Direktive im AppModule deklarieren (app.module.ts) Die Direktive implementieren

Listing 13–71Input-Propertys verwenden

Listing 13–72Abhängigkeiten in die Direktive injizieren

Listing 13–73Das Template nach Ablauf der Zeit in den View Container einbetten

Listing 13–74Die gesamte Strukturdirektive (delay.directive.ts) Die Direktive im Template verwenden

Listing 13–75Strukturdirektive in der Detailansicht verwenden (book-details.component.html) Zusammenfassung

Was haben wir gelernt?

14Module & fortgeschrittenes Routing: Iteration VI

14.1Die Anwendung modularisieren: das Modulkonzept von Angular

14.1.1Module in Angular

Achtung: Modul ist nicht gleich Modul!

14.1.2Grundaufbau eines Moduls

Listing 14–1Grundaufbau eines Moduls. 14.1.3Bestandteile eines Moduls deklarieren

Listing 14–2Modulbestandteile deklarieren

Listing 14–3Provider im Modul definieren

Listing 14–4Bestandteile aus anderen Modulen importieren. Achtung: HttpClientModule nur einmal einbinden

14.1.4Anwendung in Feature-Module aufteilen

Listing 14–5Grundaufbau des Root-Moduls AppModule

Listing 14–6Grundaufbau eines Kind-Moduls

Listing 14–7Routing-Modul für ein Kind-Modul

Listing 14–8Beispiel: Routenkonfiguration für Feature-Module

14.1.5Aus Modulen exportieren: Shared Module

Listing 14–9Bestandteile aus Modulen exportieren

Listing 14–10Shared Module importieren. Tipp: Spread-Syntax verwenden

14.1.6Den BookMonkey erweitern. Refactoring – Feature-Module

Module anlegen

Listing 14–11Neue Module anlegen mit der Angular CLI

Bestandteile in die Module verschieben

Verweise anpassen

Listing 14–12 AppModule (app.module.ts)

Listing 14–13 BooksModule (books.module.ts)

Listing 14–14 AdminModule (admin.module.ts) Routing konfigurieren

Listing 14–15 app-routing.module.ts (Ausschnitt)

Listing 14–16 books/books-routing.module.ts (Ausschnitt)

Listing 14–17 admin/admin-routing.module.ts (Ausschnitt)

Module einbinden

Listing 14–18 app.module.ts (Ausschnitt)

Was haben wir gelernt?

14.2Lazy Loading: Angular-Module asynchron laden

14.2.1Warum Module asynchron laden?

14.2.2Lazy Loading verwenden

Listing 14–19Lazy Loading verwenden mit der Eigenschaft loadChildren

Lazy Loading mit Magic String

Achtung bei Lazy Loading und Shared Modules

14.2.3Module asynchron vorladen: Preloading

Listing 14–20Preloading in der Anwendung aktivieren (app-routing.module.ts)

14.2.4Den BookMonkey erweitern. Story – Lazy Loading

Lazy Loading in den Routen verwenden

Listing 14–21Lazy Loading aktivieren in der Datei app-routing.module.ts (Ausschnitt) Routenpfade in den Modulen anpassen

Listing 14–22 books/books-routing.module.ts (Ausschnitt)

Listing 14–23 admin/admin-routing.module.ts (Ausschnitt) Module Imports aus dem AppModule entfernen

Listing 14–24Keine Module importieren, die lazy geladen werden (app.module.ts , Ausschnitt) Preloading in der Anwendung aktivieren

Listing 14–25Preloading aktivieren in der Datei app-routing.module.ts (Ausschnitt)

Was haben wir gelernt?

14.3Guards: Routen absichern

14.3.1Grundlagen zu Guards

14.3.2Guards implementieren

CanActivate: Darf die Route aktiviert werden?

Listing 14–26Beispiel für einen CanActivate-Guard

Listing 14–27Beispiel für einen CanActivate-Guard mit UrlTree

Listing 14–28 createUrlTree() verwenden

CanDeactivate: Darf die aktive Route verlassen werden?

Listing 14–29Beispiel für einen CanDeactivate-Guard

14.3.3Guards verwenden

Listing 14–30Route mit einem CanActivate-Guard

14.3.4Den BookMonkey erweitern. Story – Guards

Guard-Klasse aufsetzen

Listing 14–31Guard-Klasse anlegen mit der Angular CLI

Listing 14–32Grundgerüst für den neuen Guard (can-navigate-to-admin.guard.ts)

Listing 14–33Guard mit Bestätigungsdialog (can-navigate-to-admin.guard.ts)

Listing 14–34Guard mit Bestätigungsdialog und persistiertem Zustand (can-navigate-to-admin.guard.ts) Guard verwenden

Listing 14–35Guard in der Routendefinition eintragen

Was haben wir gelernt?

14.4Routing: Wie geht’s weiter?

14.4.1Resolver: asynchrone Daten beim Routing vorladen

Resolver aufsetzen

Listing 14–36Resolver-Klasse erzeugen mit der Angular CLI

Listing 14–37Beispiel für einen Resolver

Listing 14–38Beispiel für einen Resolver mit Zugriff auf den Routen-Snapshot. Resolver in Routen verwenden

Listing 14–39Route mit Resolver. Daten in der Komponente abrufen

Listing 14–40Bereitgestellte Daten in der Komponente auslesen

Der Router wartet auf die Resolver!

Ausblick: Daten cachen mit Observables

Listing 14–41Caching mit dem Operator shareReplay()

14.4.2Mehrere Router-Outlets verwenden

Listing 14–42Template mit mehreren Router-Outlets

Listing 14–43Beispiel für eine Routendefinition mit zusätzlichem Outlet

Listing 14–44Beispiele für Links mit mehreren Outlets

Listing 14–45Beispiel für eine URL mit zusätzlichem Outlet. 14.4.3Erweiterte Konfigurationen für den Router

Listing 14–46 ExtraOptions für den Router

Debug-Modus aktivieren: enableTracing

Scrollposition merken: scrollPositionRestoration

15Internationalisierung: Iteration VII

15.1i18n: mehrere Sprachen und Kulturen anbieten

15.1.1Was bedeutet Internationalisierung?

15.1.2Eingebaute Pipes mehrsprachig verwenden

Listing 15–1 LOCALE_ID und Sprachdefinitionen entfernen (app.module.ts)

15.1.3Texte übersetzen: Vorgehen in fünf Schritten

15.1.4@angular/localize hinzufügen

15.1.5Nachrichten im HTML mit dem i18n-Attribut markieren

Listing 15–2Nachricht im Template markieren

Listing 15–3Weitere Metadaten zum i18n-Attribut

Listing 15–4 i18n-Attribut mit<ng-container>

Listing 15–5Nachrichten in Attributen markieren. 15.1.6Nachrichten im TypeScript-Code mit $localize markieren

Listing 15–6Nachrichten in TypeScript markieren

15.1.7Nachrichten extrahieren und übersetzen

15.1.8Feste IDs vergeben

Listing 15–7Erste generierte ID

Listing 15–8Zweite generierte ID

Listing 15–9 i18n-Attribut mit fester ID verwenden

Listing 15–10Feste ID

Listing 15–11 $localize mit fester ID verwenden. 15.1.9Die App mit Übersetzungen bauen

Listing 15–12Build-Konfiguration: sourceLocale festlegen (angular.json)

Listing 15–13Build-Konfiguration: Locales definieren (angular.json)

Listing 15–14Build-Konfiguration: Alle Übersetzungen aktivieren (angular.json)

Listing 15–15Anwendung bauen

Listing 15–16Webserver starten

Listing 15–17Auszug aus der Datei de/index.html

Listing 15–18Fehler beim Entwicklungswebserver

Listing 15–19Build-Konfiguration: Übersetzung für ein Locale aktivieren (angular.json)

15.1.10Übersetzte Apps mit unterschiedlichen Konfigurationen bauen

Listing 15–20Mehrere Build-Konfigurationen für verschiedene Sprachen (angular.json)

Listing 15–21Anwendung mit deutscher Sprache bauen

Listing 15–22Mehrere Serve-Konfigurationen definieren (angular.json)

Listing 15–23Deutsche Anwendung mit Entwicklungswebserver starten

Listing 15–24Mehrere Build-Konfigurationen ohne Redundanz (angular.json)

Listing 15–25Die deutsche Konfiguration aus dem vorherigen Beispiel testen

Listing 15–26Mehrere Build-Konfigurationen ohne Redundanz – alternative Schreibweise (angular.json)

Listing 15–27Die deutsche Konfiguration mit produktiven Einstellungen bauen

Technische Einschränkungen

15.1.11Ausblick: Übersetzungen dynamisch zur Startzeit bereitstellen

Achtung: Interne Schnittstelle!

Listing 15–28Dynamische Übersetzung mit loadTranslations() (main.ts)

Listing 15–29locl installieren

Listing 15–30Übersetzungen dynamisch aus JSON laden mit getTranslations() (main.ts)

Listing 15–31 @locl/cli installieren und verwenden

Listing 15–32Eine JSON-Datei im Format von getTranslations() (src/assets/messages.de.json)

Zusammenfassung

15.1.12Den BookMonkey erweitern. Story – Mehrsprachigkeit

Vorbereitung: @angular/localize hinzufügen und LOCALE_ID entfernen

Nachrichten mit i18n-Attribut markieren

Listing 15–33Das markierte Template der HomeComponent (home.component.html)

Listing 15–34Das markierte Template der BookFormComponent (Ausschnitt) (book-form.component.html)

Listing 15–35Guard mit markiertem Bestätigungsdialog (can-navigate-to-admin.guard.ts)

Nachrichten extrahieren

Listing 15–36Die Nachrichtendatei im XMB-Format (gekürzter Ausschnitt) (messages.xmb) Nachrichten übersetzen

Übersetzung abspeichern

Listing 15–37Die Übersetzungsdatei im XTB-Format (Ausschnitt) (messages.en.xtb)

Übersetztes Projekt bauen

Listing 15–38Den englischen BookMonkey konfigurieren (angular.json)

Listing 15–39NPM-Skripte definieren (package.json)

Listing 15–40NPM-Skripte ausführen

Was haben wir gelernt?

16Powertipp: POEditor

Neues Projekt anlegen

Nachrichtendatei (XMB) importieren

Inhalte verifizieren

Referenzsprache festlegen

Eine weitere Sprache anlegen und loslegen

Übersetzungen exportieren (XTB)

Zusammenfassung

17Qualität fördern mit Softwaretests

17.1Softwaretests

17.1.1Testabdeckung: Was sollte man testen?

Listing 17–1Report zur Code Coverage generieren

17.1.2Testart: Wie sollte man testen?

17.1.3Test-Framework Jasmine

Listing 17–2Test in natürlicher Sprache

Listing 17–3Ein erster Unit-Test mit Jasmine

17.1.4»Arrange, Act, Assert« mit Jasmine

Listing 17–4Ein alternativer Stil für Arrange, Act, Assert

Listing 17–5Jasmine: Variablen deklarieren

17.1.5Test-Runner Karma

17.1.6E2E-Test-Runner Protractor

17.1.7Weitere Frameworks

Jest

Cypress

17.2Unit- und Integrationstests mit Karma. 17.2.1TestBed: die Testbibliothek von Angular

17.2.2Isolierte Unit-Tests: Services testen

Listing 17–6Rückblick: BookStoreService aus Listing 8–20 (book-store.service.ts)

Listing 17–7Unit-Test für den BookStoreService (book-store.service.spec.ts)

17.2.3Isolierte Unit-Tests: Pipes testen

Listing 17–8Unit-Test für die IsbnPipe formulieren (isbn.pipe.spec.ts)

17.2.4Isolierte Unit-Tests: Komponenten testen

Listing 17–9Rückblick: BookListComponent aus Listing 6–46 (book-list.component.ts)

Listing 17–10Rückblick: Auszug aus dem Template der BookListComponent aus Listing 6–46 (book-list.component.html)

Listing 17–11Isolierter Test für die simple BookListComponent (mit fest einprogrammierten Büchern) (book-list.component.spec.ts)

17.2.5Shallow Unit-Tests: einzelne Komponenten testen

Listing 17–12Shallow Unit-Test für die simple BookListComponent (mit fest einprogrammierten Büchern) (book-list.component.shallow.spec.ts)

Listing 17–13Warnhinweise bei unbekannten Komponenten

17.2.6Integrationstests: mehrere Komponenten testen

Listing 17–14Ein Integrationstest mit zwei Komponenten (book-list.component.integration.spec.ts)

Listing 17–15Der DOM der Kindkomponente wird mit berücksichtigt

Listing 17–16Ein Integrationstest mit vollständigem Modul

17.2.7Abhängigkeiten durch Stubs ersetzen

Stubs und Mocks

Listing 17–17Rückblick: BookStoreService aus Listing 10–8 (book-store.service.ts)

Listing 17–18Unit-Test für den BookStoreService unter Verwendung eines Stubs (book-store.service.stub.spec.ts)

Testduplikate müssen nicht vollständig sein

Listing 17–19Dependency Injection für Tests – inject() einsetzen

Listing 17–20Dependency Injection für Tests – TestBed.inject() einsetzen

TestBed.get() vor Angular 9.0

17.2.8Abhängigkeiten durch Mocks ersetzen

Listing 17–21Unit-Test für den BookStoreService unter Verwendung eines Mocks (book-store.service.mock.spec.ts)

17.2.9Leere Komponenten als Stubs oder Mocks einsetzen

Listing 17–22Eine Komponente als Stub für den Unit-Test

Listing 17–23Den Stub einsetzen

Listing 17–24Testkomponenten schneller erstellen

17.2.10HTTP-Requests testen

Listing 17–25HTTP-Kommunikation mit HttpTestingController testen (book-store.service.spec.ts)

17.2.11Komponenten mit Routen testen

Listing 17–26Rückblick: BookListComponent mit Routing und HTTP aus Listing 10–12 (book-list.component.ts)

Listing 17–27Aktueller Stand: BookListComponent mit Routing, HTTP und AsyncPipe ab Listing 13–42 (book-list.component.ts)

Listing 17–28Auszug aus dem Template der BookListComponent ab Listing 13–42 (book-list.component.html)

Listing 17–29Unit-Test für die finale BookListComponent (book-list.component.spec.ts)

17.2.12Asynchronen Code testen

Listing 17–30Beispiel für die Verwendung von done()

Listing 17–31Beispiel für die Verwendung von async() Breaking Change in Angular 11.0: waitForAsync()

Listing 17–32Beispiel für die Verwendung von fakeAsync() und tick()

17.3Oberflächentests mit Protractor. Auf die Balance kommt es an

17.3.1Protractor verwenden

Listing 17–33Ein erster E2E-Test mit Protractor (dpunkt.e2e-spec.ts)

17.3.2Elemente selektieren: Locators

Listing 17–34Locators von Protractor. 17.3.3Aktionen durchführen

17.3.4Asynchron mit Warteschlange

Listing 17–35Auf die Erfüllung der Promise warten

17.3.5Redundanz durch Page Objects vermeiden

Listing 17–36Fluent Interface mit Page Objects

17.3.6Eine Angular-Anwendung testen

Listing 17–37Zwei Page Objects für Detailseite und Listenansicht implementieren (book-list.po.ts)

Listing 17–38E2E-Test für die Listenansicht mit Detailseite (book-list.e2e-spec.ts)

Fazit

18Build und Deployment mit der Angular CLI

18.1Build-Konfiguration

Listing 18–1Grundaufbau der Datei angular.json

Listing 18–2Builder mit Optionen (angular.json)

Listing 18–3Konfiguration für den Builder (angular.json) 18.2Build erzeugen

Sourcemaps

18.3Umgebungen konfigurieren

Listing 18–4 environment.prod.ts

Listing 18–5Beispiel für eine Umgebung mit weiteren Eigenschaften. Tipp: Umgebungseinstellungen typisieren

Listing 18–6Umgebungen beim Build ersetzen (angular.json)

Listing 18–7Einstellungen aus einer Umgebung auslesen. 18.3.1Abhängigkeit zur Umgebung vermeiden

Listing 18–8Provider für das Token registrieren (main.ts)

Listing 18–9Token im Service anfordern. 18.3.2Konfigurationen und Umgebungen am Beispiel: BookMonkey

Listing 18–10BookMonkey-API lokal installieren

Listing 18–11Standardumgebung (environment.ts)

Listing 18–12Umgebung production (environment.prod.ts)

Listing 18–13Token für die API-URL erzeugen (tokens.ts)

Listing 18–14Token für die Umgebungseinstellung registrieren (main.ts)

Listing 18–15 BookStoreService mit API-URL aus der Umgebung

18.4Produktivmodus aktivieren

Listing 18–16 enableProdMode() in der Datei main.ts

18.5Die Templates kompilieren

18.5.1Ahead-of-Time-Kompilierung (AOT)

18.5.2Just-in-Time-Kompilierung (JIT)

Tipp: Bundles manuell untersuchen

18.6Bundles analysieren mit source-map-explorer

18.7Webserver konfigurieren und die Anwendung ausliefern

Probieren Sie es aus!

Apache

Listing 18–17Apache. nginx

Listing 18–18nginx. Internet Information Server – IIS

Listing 18–19IIS. lighttpd

Listing 18–20lighttpd. Express.js

Listing 18–21Express.js. 18.7.1ng deploy: Deployment mit der Angular CLI

Listing 18–22Deployment Builder angular-cli-ghpages hinzufügen

Listing 18–23Konfiguration für den Deployment Builder (angular.json)

Listing 18–24Anwendung zu GitHub Pages deployen

18.7.2Ausblick: Deployment mit einem Build-Service

Was haben wir gelernt?

19Angular-Anwendungen mit Docker bereitstellen

Problemstellung

19.1Docker

19.2Docker Registry

19.3Lösungsskizze

19.4Eine Angular-App über Docker bereitstellen. Webserver konfigurieren

Listing 19–1Konfiguration von nginx (nginx/default.conf)

Das Dockerfile

Listing 19–2Inhalt der Datei Dockerfile

Listing 19–3Dateien von der Verarbeitung durch den Docker-Daemon ausschließen (.dockerignore) Das Build-Skript

Listing 19–4Docker-Image für die Anwendung erzeugen

Listing 19–5NPM-Skript docker:build anlegen (package.json)

Den Container starten

Listing 19–6Docker-Container erstellen und starten

Listing 19–7Docker-Container starten und stoppen

Listing 19–8Konfigurationsdatei docker-compose.yml

Listing 19–9Docker Compose: Container starten und stoppen

Listing 19–10NPM-Skript docker:re-deploy anlegen (package.json)

19.5Build Once, Run Anywhere: Konfiguration über Docker verwalten

Konfigurierbarkeit

Konfigurierbarkeit umsetzen

Listing 19–11Die Konfigurationsdatei settings.json

Listing 19–12Das Interface Settings (settings.ts)

Listing 19–13Der SettingsService (settings.service.ts)

Listing 19–14Ladeservice implementieren (settings-initializer.service.ts)

Die Konfiguration laden

Listing 19–15Konfiguration laden mit dem APP_INITIALIZER (app.module.ts)

Listing 19–16Konfiguration im BookStoreService nutzen (book-store.service.ts)

Umgebung mit Docker konfigurieren

Listing 19–17Die Template-Konfigurationsdatei anlegen (settings.template.json)

Listing 19–18Die Datei docker-compose.yml bearbeiten

Listing 19–19Die Docker-Umgebungsdatei docker.env

19.6Multi-Stage Builds

Externe Abhängigkeiten handhaben

Docker To The Rescue

Multi-Stage Builds

Listing 19–20Die Datei.dockerignore anpassen

Listing 19–21Headless Browser konfigurieren (karma.conf.js)

Listing 19–22 Dockerfile für Multi-Stage Build

Listing 19–23Das NPM-Skript docker:build anpassen (package.json) Das Image bauen

19.7Grenzen der vorgestellten Lösung

19.8Fazit

20Server-Side Rendering mit Angular Universal

20.1Single-Page-Anwendungen, Suchmaschinen und Start-Performance

Listing 20–1Ausgelieferte HTML-Seite des BookMonkey (vereinfacht)

20.2Dynamisches Server-Side Rendering

Ein neuer Einstiegspunkt für den Serverbuild

Server-Side Rendering aufsetzen

Listing 20–2Server-Side Rendering in die Anwendung integrieren

Server zum Rendern und Ausliefern der Anwendung

Listing 20–3Gerenderte Angular-Anwendung mit Express ausliefern (server.ts, gekürzt)

Listing 20–4Angular-Anwendung für den Browser statisch ausliefern

Lazy Loading und Server-Side Rendering

Die Anwendung bauen

Listing 20–5Angular-Anwendung für Client und Server bauen

Den Server starten

Fehler im Admin-Bereich: window is not defined

20.3Statisches Pre-Rendering

Listing 20–6Routen manuell festlegen (angular.json)

20.4Hinter den Kulissen von Angular Universal

Listing 20–7Signatur der Funktion renderModule()

renderModule() vs. renderModuleFactory()

Warten auf asynchrone Operationen

20.5Browser oder Server? Die Plattform bestimmen

Listing 20–8Plattform bestimmen

20.6Routen ausschließen

Listing 20–9Routen vom Server-Side Rendering ausschließen (server.ts) 20.7Wann setze ich serverseitiges Rendering ein?

20.8Ausblick: Pre-Rendering mit Scully

21State Management mit Redux und NgRx

21.1Ein Modell für zentrales State Management

Objekt in einem Service

Listing 21–1Service mit zentralem Zustand

Listing 21–2Zentralen Zustand in der Komponente verwenden

Listing 21–3Den Service im Template nutzen

Subject in einem Service

Listing 21–4Zentralen Zustand mit Subject verwenden

Listing 21–5Zustand vor der Verwendung transformieren

Listing 21–6Ergebnis mit der AsyncPipe anzeigen

Unveränderlichkeit

Listing 21–7Objekte unveränderlich behandeln

Nachrichten

Listing 21–8Nachricht in den Service senden

Berechnung des Zustands auslagern

Listing 21–9Zustand berechnen anhand einer Nachricht

Listing 21–10Berechnung des States auslagern

Deterministische Zustandsänderungen

Listing 21–11Addition mit Array.reduce()

Listing 21–12Nachrichten auf den Zustand reduzieren

Listing 21–13Nachrichten auf den Zustand reduzieren mit RxJS

Zusammenfassung aller Konzepte

21.2Das Architekturmodell Redux

Redux und Angular

21.3NgRx: Reactive Extensions for Angular

21.3.1Projekt vorbereiten

21.3.2Store einrichten

21.3.3Schematics nutzen

21.3.4Grundstruktur

Listing 21–14Imports für NgRx im AppModule (app.module.ts)

21.3.5Feature anlegen

Listing 21–15NgRx einrichten im BooksModule (books.module.ts)

21.3.6Struktur des Feature-States definieren

Listing 21–16Feature-State und initialer Zustand

Listing 21–17Aufbau des gesamten State-Objekts

21.3.7Actions: Kommunikation mit dem Store

Listing 21–18Grundaufbau einer Action

Listing 21–19Action ohne Payload

Listing 21–20Action mit Payload

Listing 21–21Struktur der Action

Listing 21–22Actions für das Feature book (book.actions.ts) 21.3.8Dispatch: Actions in den Store senden

Listing 21–23Action Creator verwenden

Listing 21–24Action dispatchen (book-list.component.ts)

21.3.9Reducer: den State aktualisieren

Listing 21–25Signatur eines Reducers

Listing 21–26Reducer für die Anwendung (book.reducer.ts) Reducer für mehrere Actions

21.3.10Selektoren: Daten aus dem State lesen

Listing 21–27State auswählen mit map()

Listing 21–28Operator select() verwenden

Listing 21–29Feature-Selektor erstellen (book.selectors.ts)

Listing 21–30Schematischer Aufbau eines Selektors

Listing 21–31Selektoren für die Anwendung (book.selectors.ts)

Listing 21–32Selektoren verwenden (book-list.component.ts)

Listing 21–33Daten anzeigen (book-list.component.html)

21.3.11Effects: Seiteneffekte ausführen

Listing 21–34Effect in der Anwendung registrieren (books.module.ts)

Listing 21–35Service in den Effect injizieren (book.effects.ts)

Listing 21–36Effect zum Laden der Buchliste (book.effects.ts)

Listing 21–37Effect mit Endlosschleife

Listing 21–38Dispatchen von Actions deaktivieren

Geschafft!

21.4Redux und NgRx: Wie geht’s weiter?

21.4.1Routing

Listing 21–39Router-Store installieren

21.4.2Entity Management

Listing 21–40Entity installieren

Listing 21–41 EntityState implementieren

Listing 21–42Struktur des EntityState

Listing 21–43 EntityAdapter erzeugen

Listing 21–44Initialzustand erzeugen

Listing 21–45Reducer mit Adapter-Funktionen

Listing 21–46Selektoren mit getSelectors() 21.4.3Testing

Actions

Reducer

Listing 21–47Reducer testen (book.reducer.spec.ts) Selektoren

Listing 21–48Einfache Selektoren testen (book.selectors.spec.ts)

Listing 21–49Projektionsfunktion testen (book.selectors.spec.ts) Effects

Listing 21–50Grundgerüst zum Testen von Effects (book.effects.spec.ts)

Listing 21–51Vollständiger Test für einen Effect (book.effects.spec.ts)

Listing 21–52Effects testen mit Marbles (book.effects.spec.ts) Store

Listing 21–53Effect zum Laden der Buchliste mit Filter (book.effects.spec.ts)

Listing 21–54Effects testen mit dem MockStore (book.effects.spec.ts)

Listing 21–55Selektoren mocken mit dem MockStore (book-list.component.spec.ts)

21.4.4Hilfsmittel für Komponenten: @ngrx/component

Listing 21–56AsyncPipe verwenden

ngrxLet: Observables auflösen mit falsy Werten

Listing 21–57Direktive ngrxLet verwenden. PushPipe: Observables auflösen ohne Zone.js

Listing 21–58Pipe ngrxPush verwenden. Fazit

21.5Ausblick: Lokaler State mit RxAngular

@rx-angular/state: Lokale Zustände

@rx-angular/template: Erweitertes Template Rendering

22Powertipp: Redux DevTools

Die DevTools installieren

Die DevTools in der Anwendung registrieren

Listing 22–1DevTools in der Anwendung installieren

Listing 22–2 StoreDevtoolsModule im AppModule registrieren (app.module.ts)

Die DevTools nutzen

23Der Begriff App und die verschiedenen Arten von Apps

23.1Plattformspezifische Apps. Desktop-Apps

Mobile Apps

Website, Web-App und Single-Page-Anwendung

23.2Apps nach ihrer Umsetzungsart

Native Apps

Cross-Platform Apps

Progressive Web App (PWA)

Hybride Apps

Die richtige Wahl treffen

24Progressive Web Apps (PWA)

24.1Die Charakteristiken einer PWA

24.2Service Worker

24.3Eine bestehende Angular-Anwendung in eine PWA verwandeln

Listing 24–1Den BookMonkey als Grundlage für eine PWA nutzen

Listing 24–2PWA einrichten

Listing 24–3Erstellen des Produktiv-Builds

Listing 24–4Den angular-http-server zur Auslieferung des Projekts nutzen. Die Besonderheit des angular-http-server

24.4Add to Homescreen

Das Web App Manifest: manifest.json

Spezielle Anpassungen für iOS

Listing 24–5Anpassen der Datei index.html

Listing 24–6Anpassen der Datei index.html für iOS-Geräte

Listing 24–7Statusbar unter iOS anpassen (index.html)

PWAs im App Store

24.5Offline-Funktionalität

Konfiguration für Angular Service Worker anpassen

Listing 24–8Die Datei ngsw-config.json

Den Cache bei der Entwicklung bedenken

Die PWA updaten

Listing 24–9Versionsupdate der Datei ngsw-config.json. Die Versionsnummer als Nutzerinformation

Listing 24–10Auf Updates prüfen (app.component.ts)

Listing 24–11Versionsnummer des Service Workers ändern (ngsw-config.json)

24.6Push-Benachrichtigungen

Listing 24–12 WebNotificationService anlegen

Listing 24–13 WebNotificationService implementieren (web-notification.service.ts)

Listing 24–14 WebNotificationService nutzen (app.component.ts)

Listing 24–15Benachrichtigungsfunktion in der AppComponent anzeigen (app.component.html)

Auf die Push-Benachrichtigungen reagieren

Listing 24–16Auf Push-Benachrichtigungen reagieren (web-notification.service.ts)

Ein Blick unter die Haube von Push-Benachrichtigungen

Listing 24–17Der Inhalt einer PushSubscription

Wie geht es weiter?

Zusammenfassung

25NativeScript: mobile Anwendungen entwickeln

25.1Mobile Apps entwickeln

25.2Was ist NativeScript?

25.3Warum NativeScript?

Wiederverwendung von bestehenden Skills

Wiederverwendung von bestehendem Code

Listing 25–1Verwendung eines NPM-Pakets

Direkter Zugriff auf native APIs

Open Source

Nahtlose Integration in Angular und die Angular CLI

25.4Hinter den Kulissen

25.5Plattformspezifischer Code

Listing 25–2Zugriff auf das Datum der letzten Modifikation unter iOS

Listing 25–3Zugriff auf das Datum der letzten Modifikation unter Android

UI-Abstraktion

Listing 25–4Eine einfache Seite mit Text und Button

25.6Komponenten und Layouts

25.7Styling

Listing 25–5Hintergrundfarbe und Schriftgröße mit CSS anpassen

Listing 25–6Einen Button mit CSS animieren

25.8NativeScript und Angular

25.9Angular als Native App

25.10NativeScript installieren

25.11Ein Shared Project erstellen mit der Angular CLI

Listing 25–7Die NativeScript Schematics als globales NPM-Modul hinzufügen. Ein neues Shared Project mit NativeScript-Unterstützung anlegen

Listing 25–8Neues Angular-Projekt mit NativeScript-Funktionalität anlegen

NativeScript in ein bestehendes Projekt einfügen

Listing 25–9Ein bestehendes Projekt um die NativeScript-Funktionalitäten erweitern

Unterscheidung von plattformspezifischem und plattformunabhängigem Code

Der Build-Prozess

25.12Den BookMonkey mit NativeScript umsetzen

25.12.1Das Projekt mit den NativeScript Schematics erweitern

Listing 25–10Den BookMonkey aus der Iteration 3 klonen

Listing 25–11NativeScript in das Projekt einfügen. 25.12.2Die Anwendung starten

Listing 25–12Anwendung auf einer Mobilplattform ausführen

Probleme beim Starten des Emulators

Listing 25–13QR-Code für NativeScript Playground erzeugen

Android-Geräte mit dem AVD Manager verwalten

Den iOS-Simulator starten

25.12.3Das angepasste Bootstrapping für NativeScript

Listing 25–14Bootstrapping mit NativeScript durchführen (main.tns.ts) 25.12.4Das Root-Modul anpassen

Listing 25–15Das migrierte Root-Modul (app.module.ts)

Listing 25–16Datei mit exportierten Bestandteilen (app.common.ts)

Listing 25–17Das migrierte Root-Modul (app.module.ts und app.module.tns.ts) Komponenten mehrfach deklarieren?

25.12.5Das Routing anpassen

Listing 25–18Routen in eine separate Datei auslagern (app.routes.ts)

Listing 25–19Routing-Modul für die Webanwendung (app-routing.module.ts)

Listing 25–20Routing-Modul für die NativeScript-Anwendung (app-routing.module.tns.ts) 25.12.6Die Templates der Komponenten für NativeScript anlegen

Listing 25–21NativeScript-Template für die AppComponent (app.component.tns.html) Zur Dateiendung .html

Der Style der Komponenten

Listing 25–22Styles für die App definieren (app.css)

Die Startseite

Listing 25–23Template der HomeComponent mit NativeScript (home.component.tns.html)

Die Buchliste

Listing 25–24Die Navigation für die BookListComponent (book-list.component.tns.html)

Listing 25–25Die Liste für die BookListComponent (book-list.component.tns.html) Bessere Performance mit der ListView

Listing 25–26NativeScript-Template für die BookListItemComponent (book-list-item.component.tns.html)

DNS-Einstellungen anpassen

Die Detailansicht

Listing 25–27Die Detailansicht zu einem Buch (book-details.component.tns.html)

Confirm-Dialog anpassen

Listing 25–28Der Confirm-Dialog unter NativeScript (confirm.tns.ts)

Listing 25–29Der Confirm-Dialog für den Browser (confirm.ts)

Listing 25–30Den abstrahierten Confirm-Dialog verwenden (book-details.component.ts)

Das Template für die Suche anlegen

Listing 25–31NativeScript-Template für die SearchComponent (search.component.tns.html)

Listing 25–32Die Suche einbinden (home.component.tns.html)

Zusammenfassung

Was haben wir gelernt?

26Powertipp: Android-Emulator Genymotion

27Fortgeschrittene Konzepte der Angular CLI

27.1Workspace und Monorepo: Heimat für Apps und Bibliotheken

Listing 27–1Projekte in der Datei angular.json

27.1.1Applikationen: Angular-Apps im Workspace

27.1.2Bibliotheken: Code zwischen Anwendungen teilen

Listing 27–2Eine Bibliothek in einer Applikation innerhalb des Workspace nutzen

Eine Bibliothek als NPM-Paket bereitstellen

27.2Schematics: Codegenerierung mit der Angular CLI

Listing 27–3Angular PWA in ein Projekt integrieren

28Wissenswertes

28.1Web Components mit Angular Elements

Web Components

Web Components mit Angular

Eine Angular-Komponente in eine Web Component verwandeln

Listing 28–1Komponente als Custom Element registrieren (app.module.ts)

Listing 28–2 outputHashing für Web Components deaktivieren

Listing 28–3Web Component verwenden

Listing 28–4String die Komponente übergeben

Listing 28–5Funktioniert nicht: Objekt im Attribut übergeben. Propertys mit JavaScript setzen

Listing 28–6Property setzen mit JavaScript

Auf Events reagieren

Listing 28–7Event abonnieren

Eine kleine Schicht Angular bleibt

28.2Container und Presentational Components

Presentational Components

Container Components

Listing 28–8Observable auflösen im Container. Gegenüberstellung

28.3Else-Block für die Direktive ngIf

Listing 28–9 ngIf nutzen

Listing 28–10 ngIf in Langschreibweise mit<ng-template>

Listing 28–11 ngIf mit else-Block nutzen

28.4TrackBy-Funktion für die Direktive ngFor

Listing 28–12 trackBy auf der Direktive ngFor nutzen

Listing 28–13TrackBy-Funktion definieren

28.5Angular-Anwendungen dokumentieren und analysieren

Compodoc

Listing 28–14Compodoc installieren

Listing 28–15Eine Dokumentation mit Compodoc erzeugen

AngularDoc und Angular Copilot

Listing 28–16AngularDoc in Visual Studio Code installieren

ngRev

28.6Angular Material und weitere UI-Komponentensammlungen

Angular Material

Listing 28–17Angular Material in die Anwendung integrieren

ng-bootstrap & ngx-bootstrap

PrimeNG

Kendo UI

28.7Content Projection: Inhalt des Host-Elements verwenden

Listing 28–18Host-Element mit Content

Listing 28–19Der Platzhalter NgContent im Einsatz

Listing 28–20Host-Element mit Inhalt

Listing 28–21 NgContent mit Selektor

28.8Lifecycle-Hooks

Die Abarbeitung der Lifecycle-Hooks

Lifecycle-Hooks verwenden

Listing 28–22Implementierung eines Lifecycle-Hooks

Die Methoden und deren Verwendungszweck

28.9Change Detection

Die Change Detection am Beispiel

Listing 28–23Auslösen der Change Detection über ein Event. Views und Bindings

ExpressionChangedAfterItHasBeenCheckedError

Den Fehler verhindern

Listing 28–24Zeit asynchron aktualisieren

Automatische Change Detection in Zonen

Aus der NgZone ausbrechen

Listing 28–25Ausbrechen aus der NgZone

Lifecycle Hooks und die Change Detection

Listing 28–26Property in AfterViewChecked aktualisieren

Strategien für die Change Detection

Listing 28–27Strategie festlegen

Listing 28–28Die OnPush-Strategie

Listing 28–29Das Template der Komponente ChildComponent

Listing 28–30Vergleich: Eigenschaft aktualisieren vs. Objektreferenz aktualisieren

Listing 28–31Das Template der Komponente AppComponent

Change Detection ohne Zone.js

Listing 28–32 NgZone deaktivieren (main.ts)

Listing 28–33Change Detection manuell triggern

Weiterführendes zur Change Detection

28.10Plattformen und Renderer

28.11Angular updaten

Update mit der Angular CLI und ng update

Listing 28–34Neue Versionen prüfen mit ng update

Angular Update Guide

Auf dem Laufenden bleiben: Begleitwebsite zum Buch

28.12Upgrade von AngularJS

Allgemeine Vorbereitungen für die Migration

Den Styleguide befolgen

JavaScript-Bootstrapping

Listing 28–35Bootstrapping der AngularJS-Anwendung im Template

Listing 28–36Bootstrapping der AngularJS-Anwendung im JavaScript

Komponentendirektiven bzw. Components nutzen

Verwenden eines Module Loaders

Migration zu TypeScript

Unterstützung bei der Migration

ngMigration Assistant

Listing 28–37ngMigration Assistant global installieren

Listing 28–38ngMigration Assistant zur Analyse der AngularJS-Anwendung nutzen

ngMigration Forum

Fazit und Ausblick

ABefehle der Angular CLI

BOperatoren von RxJS

CMatcher von Jasmine

Listing C–1Beispiel: Einen String per Regex prüfen

DAbkürzungsverzeichnis

ELinkliste

Index. A

B

C

D

E

F

G

H

I

J

K

L

M

N

O

P

Q

R

S

T

U

V

W

X

Z

Weiterführende Literatur

Nachwort

Fußnoten. Vorwort

2 Haben Sie alles, was Sie benötigen?

3 Angular CLI: der Codegenerator für unser Projekt

4 Einführung in TypeScript

5 Projekt- und Prozessvorstellung

6 Komponenten & Template-Syntax: Iteration I

7 Powertipp: Styleguide

8 Services & Routing: Iteration II

9 Powertipp: Chrome Developer Tools

10 HTTP & reaktive Programmierung: Iteration III

11 Powertipp: Komponenten untersuchen mit Augury

12 Formularverarbeitung & Validierung: Iteration IV

13 Pipes & Direktiven: Iteration V

14 Module & fortgeschrittenes Routing: Iteration VI

15 Internationalisierung: Iteration VII

16 Powertipp: POEditor

17 Qualität fördern mit Softwaretests

18 Build und Deployment mit der Angular CLI

19 Angular-Anwendungen mit Docker bereitstellen

20 Server-Side Rendering mit Angular Universal

21 State Management mit Redux und NgRx

22 Powertipp: Redux DevTools

23 Der Begriff App und die verschiedenen Arten von Apps

24 Progressive Web Apps (PWA)

25 NativeScript: mobile Anwendungen entwickeln

26 Powertipp: Android-Emulator Genymotion

27 Fortgeschrittene Konzepte der Angular CLI

28 Wissenswertes

A Befehle der Angular CLI

Отрывок из книги

Liebe Leserin, lieber Leser,

das Angular-Ökosystem wird kontinuierlich verbessert. Bitte haben Sie Verständnis dafür, dass sich seit dem Druck dieses Buchs unter Umständen Schnittstellen und Aspekte von Angular weiterentwickelt haben können. Die GitHub-Repositorys mit den Codebeispielen werden wir bei Bedarf entsprechend aktualisieren.

.....

lastname: string;

age?: number;

.....