Читать книгу Angular - Ferdinand Malcher - Страница 18

Vorwort

Aktualisierungen in der dritten Auflage

IEinführung

1Schnellstart

1.1Das HTML-Grundgerüst

1.2Die Startdatei für das Bootstrapping

1.3Das zentrale Angular-Modul

1.4Die erste Komponente

2Haben Sie alles, was Sie benötigen?

2.1Visual Studio Code

2.2Google Chrome

2.3Paketverwaltung mit Node.js und NPM

2.4Codebeispiele in diesem Buch

3Angular CLI: der Codegenerator für unser Projekt

3.1Das offizielle Tool für Angular

3.2Installation

3.3Die wichtigsten Befehle

IITypeScript

4Einführung in TypeScript

4.1Was ist TypeScript und wie setzen wir es ein?

4.2Variablen: const, let und var

4.3Die wichtigsten Basistypen

4.4Klassen

4.5Interfaces

4.6Template-Strings

4.7Arrow-Funktionen/Lambda-Ausdrücke

4.8Spread-Operator und Rest-Syntax

4.9Union Types

4.10Destrukturierende Zuweisungen

4.11Decorators

4.12Optional Chaining

4.13Nullish Coalescing

IIIBookMonkey 4: Schritt für Schritt zur App

5Projekt- und Prozessvorstellung

5.1Unser Projekt: BookMonkey

5.2Projekt mit Angular CLI initialisieren

5.3Style-Framework Semantic UI einbinden

6Komponenten & Template-Syntax: Iteration I

6.1Komponenten: die Grundbausteine der Anwendung

6.1.1Komponenten

6.1.2Komponenten in der Anwendung verwenden

6.1.3Template-Syntax

6.1.4Den BookMonkey erstellen

6.2Property Bindings: mit Komponenten kommunizieren

6.2.1Komponenten verschachteln

6.2.2Eingehender Datenfluss mit Property Bindings

6.2.3Andere Arten von Property Bindings

6.2.4DOM-Propertys in Komponenten auslesen

6.2.5Den BookMonkey erweitern

6.3Event Bindings: auf Ereignisse in Komponenten reagieren

6.3.1Native DOM-Events

6.3.2Eigene Events definieren

6.3.3Den BookMonkey erweitern

7Powertipp: Styleguide

8Services & Routing: Iteration II

8.1Dependency Injection: Code in Services auslagern

8.1.1Abhängigkeiten anfordern

8.1.2Services in Angular

8.1.3Abhängigkeiten registrieren

8.1.4Abhängigkeiten ersetzen

8.1.5Eigene Tokens definieren mit InjectionToken

8.1.6Abhängigkeiten anfordern mit @Inject()

8.1.7Multiprovider: mehrere Abhängigkeiten im selben Token

8.1.8Zirkuläre Abhängigkeiten auflösen mit forwardRef

8.1.9Provider in Komponenten registrieren

8.1.10Den BookMonkey erweitern

8.2Routing: durch die Anwendung navigieren

8.2.1Routen konfigurieren

8.2.2Routing-Modul einbauen

8.2.3Komponenten anzeigen

8.2.4Root-Route

8.2.5Routen verlinken

8.2.6Routenparameter

8.2.7Verschachtelung von Routen

8.2.8Routenweiterleitung

8.2.9Wildcard-Route

8.2.10Aktive Links stylen

8.2.11Route programmatisch wechseln

8.2.12Den BookMonkey erweitern

9Powertipp: Chrome Developer Tools

10HTTP & reaktive Programmierung: Iteration III

10.1HTTP-Kommunikation: ein Server-Backend anbinden

10.1.1Modul einbinden

10.1.2Requests mit dem HttpClient durchführen

10.1.3Optionen für den HttpClient

10.1.4Den BookMonkey erweitern

10.2Reaktive Programmierung mit RxJS

10.2.1Alles ist ein Datenstrom

10.2.2Observables sind Funktionen

10.2.3Das Observable aus RxJS

10.2.4Observables abonnieren

10.2.5Observables erzeugen

10.2.6Operatoren: Datenströme modellieren

10.2.7Heiße Observables, Multicasting und Subjects

10.2.8Subscriptions verwalten & Memory Leaks vermeiden

10.2.9Flattening-Strategien für Higher-Order Observables

10.2.10Den BookMonkey erweitern: Daten vom Server typisieren und umwandeln

10.2.11Den BookMonkey erweitern: Fehlerbehandlung

10.2.12Den BookMonkey erweitern: Typeahead-Suche

10.3Interceptoren: HTTP-Requests abfangen und transformieren

10.3.1Warum HTTP-Interceptoren nutzen?

10.3.2Funktionsweise der Interceptoren

10.3.3Interceptoren anlegen

10.3.4Interceptoren einbinden

10.3.5OAuth 2 und OpenID Connect

10.3.6Den BookMonkey erweitern

11Powertipp: Komponenten untersuchen mit Augury

12Formularverarbeitung & Validierung: Iteration IV

12.1Angulars Ansätze für Formulare

12.2Template-Driven Forms

12.2.1FormsModule einbinden

12.2.2Datenmodell in der Komponente

12.2.3Template mit Two-Way Binding und ngModel

12.2.4Formularzustand verarbeiten

12.2.5Eingaben validieren

12.2.6Formular abschicken

12.2.7Formular zurücksetzen

12.2.8Den BookMonkey erweitern

12.3Reactive Forms

12.3.1Warum ein zweiter Ansatz für Formulare?

12.3.2Modul einbinden

12.3.3Formularmodell in der Komponente

12.3.4Template mit dem Modell verknüpfen

12.3.5Formularzustand verarbeiten

12.3.6Eingebaute Validatoren nutzen

12.3.7Formular abschicken

12.3.8Formular zurücksetzen

12.3.9Formularwerte setzen

12.3.10FormBuilder verwenden

12.3.11Änderungen überwachen

12.3.12Den BookMonkey erweitern

12.4Eigene Validatoren entwickeln

12.4.1Validatoren für einzelne Formularfelder

12.4.2Validatoren für Formulargruppen und -Arrays

12.4.3Asynchrone Validatoren

12.4.4Den BookMonkey erweitern

12.5Welcher Ansatz ist der richtige?

13Pipes & Direktiven: Iteration V

13.1Pipes: Daten im Template formatieren

13.1.1Pipes verwenden

13.1.2Die Sprache fest einstellen

13.1.3Eingebaute Pipes für den sofortigen Einsatz

13.1.4Eigene Pipes entwickeln

13.1.5Pipes in Komponenten nutzen

13.1.6Den BookMonkey erweitern: Datum formatieren mit der DatePipe

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

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

13.2Direktiven: das Vokabular von HTML erweitern

13.2.1Was sind Direktiven?

13.2.2Eigene Direktiven entwickeln

13.2.3Attributdirektiven

13.2.4Strukturdirektiven

13.2.5Den BookMonkey erweitern: Attributdirektive für vergrößerte Darstellung

13.2.6Den BookMonkey erweitern: Strukturdirektive für zeitverzögerte Sterne

14Module & fortgeschrittenes Routing: Iteration VI

14.1Die Anwendung modularisieren: das Modulkonzept von Angular

14.1.1Module in Angular

14.1.2Grundaufbau eines Moduls

14.1.3Bestandteile eines Moduls deklarieren

14.1.4Anwendung in Feature-Module aufteilen

14.1.5Aus Modulen exportieren: Shared Module

14.1.6Den BookMonkey erweitern

14.2Lazy Loading: Angular-Module asynchron laden

14.2.1Warum Module asynchron laden?

14.2.2Lazy Loading verwenden

14.2.3Module asynchron vorladen: Preloading

14.2.4Den BookMonkey erweitern

14.3Guards: Routen absichern

14.3.1Grundlagen zu Guards

14.3.2Guards implementieren

14.3.3Guards verwenden

14.3.4Den BookMonkey erweitern

14.4Routing: Wie geht’s weiter?

14.4.1Resolver: asynchrone Daten beim Routing vorladen

14.4.2Mehrere Router-Outlets verwenden

14.4.3Erweiterte Konfigurationen für den Router

15Internationalisierung: Iteration VII

15.1i18n: mehrere Sprachen und Kulturen anbieten

15.1.1Was bedeutet Internationalisierung?

15.1.2Eingebaute Pipes mehrsprachig verwenden

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

15.1.6Nachrichten im TypeScript-Code mit $localize markieren

15.1.7Nachrichten extrahieren und übersetzen

15.1.8Feste IDs vergeben

15.1.9Die App mit Übersetzungen bauen

15.1.10Übersetzte Apps mit unterschiedlichen Konfigurationen bauen

15.1.11Ausblick: Übersetzungen dynamisch zur Startzeit bereitstellen

15.1.12Den BookMonkey erweitern

16Powertipp: POEditor

17Qualität fördern mit Softwaretests

17.1Softwaretests

17.1.1Testabdeckung: Was sollte man testen?

17.1.2Testart: Wie sollte man testen?

17.1.3Test-Framework Jasmine

17.1.4»Arrange, Act, Assert« mit Jasmine

17.1.5Test-Runner Karma

17.1.6E2E-Test-Runner Protractor

17.1.7Weitere Frameworks

17.2Unit- und Integrationstests mit Karma

17.2.1TestBed: die Testbibliothek von Angular

17.2.2Isolierte Unit-Tests: Services testen

17.2.3Isolierte Unit-Tests: Pipes testen

17.2.4Isolierte Unit-Tests: Komponenten testen

17.2.5Shallow Unit-Tests: einzelne Komponenten testen

17.2.6Integrationstests: mehrere Komponenten testen

17.2.7Abhängigkeiten durch Stubs ersetzen

17.2.8Abhängigkeiten durch Mocks ersetzen

17.2.9Leere Komponenten als Stubs oder Mocks einsetzen

17.2.10HTTP-Requests testen

17.2.11Komponenten mit Routen testen

17.2.12Asynchronen Code testen

17.3Oberflächentests mit Protractor

17.3.1Protractor verwenden

17.3.2Elemente selektieren: Locators

17.3.3Aktionen durchführen

17.3.4Asynchron mit Warteschlange

17.3.5Redundanz durch Page Objects vermeiden

17.3.6Eine Angular-Anwendung testen

IVDas Projekt ausliefern: Deployment

18Build und Deployment mit der Angular CLI

18.1Build-Konfiguration

18.2Build erzeugen

18.3Umgebungen konfigurieren

18.3.1Abhängigkeit zur Umgebung vermeiden

18.3.2Konfigurationen und Umgebungen am Beispiel: BookMonkey

18.4Produktivmodus aktivieren

18.5Die Templates kompilieren

18.5.1Ahead-of-Time-Kompilierung (AOT)

18.5.2Just-in-Time-Kompilierung (JIT)

18.6Bundles analysieren mit source-map-explorer

18.7Webserver konfigurieren und die Anwendung ausliefern

18.7.1ng deploy: Deployment mit der Angular CLI

18.7.2Ausblick: Deployment mit einem Build-Service

19Angular-Anwendungen mit Docker bereitstellen

19.1Docker

19.2Docker Registry

19.3Lösungsskizze

19.4Eine Angular-App über Docker bereitstellen

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

19.6Multi-Stage Builds

19.7Grenzen der vorgestellten Lösung

19.8Fazit

VFortgeschrittene Themen

20Server-Side Rendering mit Angular Universal

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

20.2Dynamisches Server-Side Rendering

20.3Statisches Pre-Rendering

20.4Hinter den Kulissen von Angular Universal

20.5Browser oder Server? Die Plattform bestimmen

20.6Routen ausschließen

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

21.2Das Architekturmodell Redux

21.3NgRx: Reactive Extensions for Angular

21.3.1Projekt vorbereiten

21.3.2Store einrichten

21.3.3Schematics nutzen

21.3.4Grundstruktur

21.3.5Feature anlegen

21.3.6Struktur des Feature-States definieren

21.3.7Actions: Kommunikation mit dem Store

21.3.8Dispatch: Actions in den Store senden

21.3.9Reducer: den State aktualisieren

21.3.10Selektoren: Daten aus dem State lesen

21.3.11Effects: Seiteneffekte ausführen

21.4Redux und NgRx: Wie geht’s weiter?

21.4.1Routing

21.4.2Entity Management

21.4.3Testing

21.4.4Hilfsmittel für Komponenten: @ngrx/component

21.5Ausblick: Lokaler State mit RxAngular

22Powertipp: Redux DevTools

VIAngular-Anwendungen für Mobilgeräte

23Der Begriff App und die verschiedenen Arten von Apps

23.1Plattformspezifische Apps

23.2Apps nach ihrer Umsetzungsart

24Progressive Web Apps (PWA)

24.1Die Charakteristiken einer PWA

24.2Service Worker

24.3Eine bestehende Angular-Anwendung in eine PWA verwandeln

24.4Add to Homescreen

24.5Offline-Funktionalität

24.6Push-Benachrichtigungen

25NativeScript: mobile Anwendungen entwickeln

25.1Mobile Apps entwickeln

25.2Was ist NativeScript?

25.3Warum NativeScript?

25.4Hinter den Kulissen

25.5Plattformspezifischer Code

25.6Komponenten und Layouts

25.7Styling

25.8NativeScript und Angular

25.9Angular als Native App

25.10NativeScript installieren

25.11Ein Shared Project erstellen mit der Angular CLI

25.12Den BookMonkey mit NativeScript umsetzen

25.12.1Das Projekt mit den NativeScript Schematics erweitern

25.12.2Die Anwendung starten

25.12.3Das angepasste Bootstrapping für NativeScript

25.12.4Das Root-Modul anpassen

25.12.5Das Routing anpassen

25.12.6Die Templates der Komponenten für NativeScript anlegen

26Powertipp: Android-Emulator Genymotion

VIIWeiterführende Themen

27Fortgeschrittene Konzepte der Angular CLI

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

27.1.1Applikationen: Angular-Apps im Workspace

27.1.2Bibliotheken: Code zwischen Anwendungen teilen

27.2Schematics: Codegenerierung mit der Angular CLI

28Wissenswertes

28.1Web Components mit Angular Elements

28.2Container und Presentational Components

28.3Else-Block für die Direktive ngIf

28.4TrackBy-Funktion für die Direktive ngFor

28.5Angular-Anwendungen dokumentieren und analysieren

28.6Angular Material und weitere UI-Komponentensammlungen

28.7Content Projection: Inhalt des Host-Elements verwenden

28.8Lifecycle-Hooks

28.9Change Detection

28.10Plattformen und Renderer

28.11Angular updaten

28.12Upgrade von AngularJS

VIIIAnhang

ABefehle der Angular CLI

BOperatoren von RxJS

CMatcher von Jasmine

DAbkürzungsverzeichnis

ELinkliste

Index

Weiterführende Literatur

Nachwort