Angular Grundlagen, fortgeschrittene Themen und Best Practices - inklusive NativeScript und NgRx

Vorwort
Aktualisierungen in der dritten Auflage
I Einführung
	Schnellstart
		Das HTML-Grundgerüst
		Die Startdatei für das Bootstrapping
		Das zentrale Angular-Modul
		Die erste Komponente
	Haben Sie alles, was Sie benötigen?
		Visual Studio Code
		Google Chrome
		Paketverwaltung mit Node.js und NPM
		Codebeispiele in diesem Buch
	Angular CLI: der Codegenerator für unser Projekt
		Das offizielle Tool für Angular
		Installation
		Die wichtigsten Befehle
II TypeScript
	Einführung in TypeScript
		Was ist TypeScript und wie setzen wir es ein?
		Variablen: const, let und var
		Die wichtigsten Basistypen
		Klassen
		Interfaces
		Template-Strings
		Arrow-Funktionen/Lambda-Ausdrücke
		Spread-Operator und Rest-Syntax
		Union Types
		Destrukturierende Zuweisungen
		Decorators
		Optional Chaining
		Nullish Coalescing
III BookMonkey 4: Schritt für Schritt zur App
	Projekt- und Prozessvorstellung
		Unser Projekt: BookMonkey
		Projekt mit Angular CLI initialisieren
		Style-Framework Semantic UI einbinden
	Komponenten & Template-Syntax: Iteration I
		Komponenten: die Grundbausteine der Anwendung
			Komponenten
			Komponenten in der Anwendung verwenden
			Template-Syntax
			Den BookMonkey erstellen
		Property Bindings: mit Komponenten kommunizieren
			Komponenten verschachteln
			Eingehender Datenfluss mit Property Bindings
			Andere Arten von Property Bindings
			DOM-Propertys in Komponenten auslesen
			Den BookMonkey erweitern
		Event Bindings: auf Ereignisse in Komponenten reagieren
			Native DOM-Events
			Eigene Events definieren
			Den BookMonkey erweitern
	Powertipp: Styleguide
	Services & Routing: Iteration II
		Dependency Injection: Code in Services auslagern
			Abhängigkeiten anfordern
			Services in Angular
			Abhängigkeiten registrieren
			Abhängigkeiten ersetzen
			Eigene Tokens definieren mit InjectionToken
			Abhängigkeiten anfordern mit @Inject()
			Multiprovider: mehrere Abhängigkeiten im selben Token
			Zirkuläre Abhängigkeiten auflösen mit forwardRef
			Provider in Komponenten registrieren
			Den BookMonkey erweitern
		Routing: durch die Anwendung navigieren
			Routen konfigurieren
			Routing-Modul einbauen
			Komponenten anzeigen
			Root-Route
			Routen verlinken
			Routenparameter
			Verschachtelung von Routen
			Routenweiterleitung
			Wildcard-Route
			Aktive Links stylen
			Route programmatisch wechseln
			Den BookMonkey erweitern
	Powertipp: Chrome Developer Tools
	HTTP & reaktive Programmierung: Iteration III
		HTTP-Kommunikation: ein Server-Backend anbinden
			Modul einbinden
			Requests mit dem HttpClient durchführen
			Optionen für den HttpClient
			Den BookMonkey erweitern
		Reaktive Programmierung mit RxJS
			Alles ist ein Datenstrom
			Observables sind Funktionen
			Das Observable aus RxJS
			Observables abonnieren
			Observables erzeugen
			Operatoren: Datenströme modellieren
			Heiße Observables, Multicasting und Subjects
			Subscriptions verwalten & Memory Leaks vermeiden
			Flattening-Strategien für Higher-Order Observables
			Den BookMonkey erweitern: Daten vom Server typisieren und umwandeln
			Den BookMonkey erweitern: Fehlerbehandlung
			Den BookMonkey erweitern: Typeahead-Suche
		Interceptoren: HTTP-Requests abfangen und transformieren
			Warum HTTP-Interceptoren nutzen?
			Funktionsweise der Interceptoren
			Interceptoren anlegen
			Interceptoren einbinden
			OAuth 2 und OpenID Connect
			Den BookMonkey erweitern
	Powertipp: Komponenten untersuchen mit Augury
	Formularverarbeitung & Validierung: Iteration IV
		Angulars Ansätze für Formulare
		Template-Driven Forms
			FormsModule einbinden
			Datenmodell in der Komponente
			Template mit Two-Way Binding und ngModel
			Formularzustand verarbeiten
			Eingaben validieren
			Formular abschicken
			Formular zurücksetzen
			Den BookMonkey erweitern
		Reactive Forms
			Warum ein zweiter Ansatz für Formulare?
			Modul einbinden
			Formularmodell in der Komponente
			Template mit dem Modell verknüpfen
			Formularzustand verarbeiten
			Eingebaute Validatoren nutzen
			Formular abschicken
			Formular zurücksetzen
			Formularwerte setzen
			FormBuilder verwenden
			Änderungen überwachen
			Den BookMonkey erweitern
		Eigene Validatoren entwickeln
			Validatoren für einzelne Formularfelder
			Validatoren für Formulargruppen und -Arrays
			Asynchrone Validatoren
			Den BookMonkey erweitern
		Welcher Ansatz ist der richtige?
	Pipes & Direktiven: Iteration V
		Pipes: Daten im Template formatieren
			Pipes verwenden
			Die Sprache fest einstellen
			Eingebaute Pipes für den sofortigen Einsatz
			Eigene Pipes entwickeln
			Pipes in Komponenten nutzen
			Den BookMonkey erweitern: Datum formatieren mit der DatePipe
			Den BookMonkey erweitern: Observable mit der AsyncPipe auflösen
			Den BookMonkey erweitern: eigene Pipe für die ISBN implementieren
		Direktiven: das Vokabular von HTML erweitern
			Was sind Direktiven?
			Eigene Direktiven entwickeln
			Attributdirektiven
			Strukturdirektiven
			Den BookMonkey erweitern: Attributdirektive für vergrößerte Darstellung
			Den BookMonkey erweitern: Strukturdirektive für zeitverzögerte Sterne
	Module & fortgeschrittenes Routing: Iteration VI
		Die Anwendung modularisieren: das Modulkonzept von Angular
			Module in Angular
			Grundaufbau eines Moduls
			Bestandteile eines Moduls deklarieren
			Anwendung in Feature-Module aufteilen
			Aus Modulen exportieren: Shared Module
			Den BookMonkey erweitern
		Lazy Loading: Angular-Module asynchron laden
			Warum Module asynchron laden?
			Lazy Loading verwenden
			Module asynchron vorladen: Preloading
			Den BookMonkey erweitern
		Guards: Routen absichern
			Grundlagen zu Guards
			Guards implementieren
			Guards verwenden
			Den BookMonkey erweitern
		Routing: Wie geht's weiter?
			Resolver: asynchrone Daten beim Routing vorladen
			Mehrere Router-Outlets verwenden
			Erweiterte Konfigurationen für den Router
	Internationalisierung: Iteration VII
		i18n: mehrere Sprachen und Kulturen anbieten
			Was bedeutet Internationalisierung?
			Eingebaute Pipes mehrsprachig verwenden
			Texte übersetzen: Vorgehen in fünf Schritten
			@angular/localize hinzufügen
			Nachrichten im HTML mit dem i18n-Attribut markieren
			Nachrichten im TypeScript-Code mit $localize markieren
			Nachrichten extrahieren und übersetzen
			Feste IDs vergeben
			Die App mit Übersetzungen bauen
			Übersetzte Apps mit unterschiedlichen Konfigurationen bauen
			Ausblick: Übersetzungen dynamisch zur Startzeit bereitstellen
			Den BookMonkey erweitern
	Powertipp: POEditor
	Qualität fördern mit Softwaretests
		Softwaretests
			Testabdeckung: Was sollte man testen?
			Testart: Wie sollte man testen?
			Test-Framework Jasmine
			„Arrange, Act, Assert“ mit Jasmine
			Test-Runner Karma
			E2E-Test-Runner Protractor
			Weitere Frameworks
		Unit- und Integrationstests mit Karma
			TestBed: die Testbibliothek von Angular
			Isolierte Unit-Tests: Services testen
			Isolierte Unit-Tests: Pipes testen
			Isolierte Unit-Tests: Komponenten testen
			Shallow Unit-Tests: einzelne Komponenten testen
			Integrationstests: mehrere Komponenten testen
			Abhängigkeiten durch Stubs ersetzen
			Abhängigkeiten durch Mocks ersetzen
			Leere Komponenten als Stubs oder Mocks einsetzen
			HTTP-Requests testen
			Komponenten mit Routen testen
			Asynchronen Code testen
		Oberflächentests mit Protractor
			Protractor verwenden
			Elemente selektieren: Locators
			Aktionen durchführen
			Asynchron mit Warteschlange
			Redundanz durch Page Objects vermeiden
			Eine Angular-Anwendung testen
IV Das Projekt ausliefern: Deployment
	Build und Deployment mit der Angular CLI
		Build-Konfiguration
		Build erzeugen
		Umgebungen konfigurieren
			Abhängigkeit zur Umgebung vermeiden
			Konfigurationen und Umgebungen am Beispiel: BookMonkey
		Produktivmodus aktivieren
		Die Templates kompilieren
			Ahead-of-Time-Kompilierung (AOT)
			Just-in-Time-Kompilierung (JIT)
		Bundles analysieren mit source-map-explorer
		Webserver konfigurieren und die Anwendung ausliefern
			ng deploy: Deployment mit der Angular CLI
			Ausblick: Deployment mit einem Build-Service
	Angular-Anwendungen mit Docker bereitstellen
		Docker
		Docker Registry
		Lösungsskizze
		Eine Angular-App über Docker bereitstellen
		Build Once, Run Anywhere: Konfiguration über Docker verwalten
		Multi-Stage Builds
		Grenzen der vorgestellten Lösung
		Fazit
V Fortgeschrittene Themen
	Server-Side Rendering mit Angular Universal
		Single-Page-Anwendungen, Suchmaschinen und Start-Performance
		Dynamisches Server-Side Rendering
		Statisches Pre-Rendering
		Hinter den Kulissen von Angular Universal
		Browser oder Server? Die Plattform bestimmen
		Routen ausschließen
		Wann setze ich serverseitiges Rendering ein?
		Ausblick: Pre-Rendering mit Scully
	State Management mit Redux und NgRx
		Ein Modell für zentrales State Management
		Das Architekturmodell Redux
		NgRx: Reactive Extensions for Angular
			Projekt vorbereiten
			Store einrichten
			Schematics nutzen
			Grundstruktur
			Feature anlegen
			Struktur des Feature-States definieren
			Actions: Kommunikation mit dem Store
			Dispatch: Actions in den Store senden
			Reducer: den State aktualisieren
			Selektoren: Daten aus dem State lesen
			Effects: Seiteneffekte ausführen
		Redux und NgRx: Wie geht's weiter?
			Routing
			Entity Management
			Testing
			Hilfsmittel für Komponenten: @ngrx/component
		Ausblick: Lokaler State mit RxAngular
	Powertipp: Redux DevTools
VI Angular-Anwendungen für Mobilgeräte
	Der Begriff App und die verschiedenen Arten von Apps
		Plattformspezifische Apps
		Apps nach ihrer Umsetzungsart
	Progressive Web Apps (PWA)
		Die Charakteristiken einer PWA
		Service Worker
		Eine bestehende Angular-Anwendung in eine PWA verwandeln
		Add to Homescreen
		Offline-Funktionalität
		Push-Benachrichtigungen
	NativeScript: mobile Anwendungen entwickeln
		Mobile Apps entwickeln
		Was ist NativeScript?
		Warum NativeScript?
		Hinter den Kulissen
		Plattformspezifischer Code
		Komponenten und Layouts
		Styling
		NativeScript und Angular
		Angular als Native App
		NativeScript installieren
		Ein Shared Project erstellen mit der Angular CLI
		Den BookMonkey mit NativeScript umsetzen
			Das Projekt mit den NativeScript Schematics erweitern
			Die Anwendung starten
			Das angepasste Bootstrapping für NativeScript
			Das Root-Modul anpassen
			Das Routing anpassen
			Die Templates der Komponenten für NativeScript anlegen
	Powertipp: Android-Emulator Genymotion
VII Weiterführende Themen
	Fortgeschrittene Konzepte der Angular CLI
		Workspace und Monorepo: Heimat für Apps und Bibliotheken
			Applikationen: Angular-Apps im Workspace
			Bibliotheken: Code zwischen Anwendungen teilen
		Schematics: Codegenerierung mit der Angular CLI
	Wissenswertes
		Web Components mit Angular Elements
		Container und Presentational Components
		Else-Block für die Direktive ngIf
		TrackBy-Funktion für die Direktive ngFor
		Angular-Anwendungen dokumentieren und analysieren
		Angular Material und weitere UI-Komponentensammlungen
		Content Projection: Inhalt des Host-Elements verwenden
		Lifecycle-Hooks
		Change Detection
		Plattformen und Renderer
		Angular updaten
		Upgrade von AngularJS
VIII Anhang
	Befehle der Angular CLI
	Operatoren von RxJS
	Matcher von Jasmine
	Abkürzungsverzeichnis
	Linkliste
	Index
	Weiterführende Literatur
	Nachwort