Angular, 3rd Edition
Dieses sehr erfolgreiche Buch zeigt Schritt für Schritt, wie man Single-Page-Anwendungen mit dem aktuellen Angular 10 entwickeln - von den Grundlagen bis hin zu fortgeschrittenen Themen Die Autoren sind erfahrene Workshopleiter und internationale Konferenzsprecher. In diesem praxisorientierten Buch...
| Main Authors: | , , |
|---|---|
| Format: | eBook |
| Language: | German |
| Published: |
[Place of publication not identified]
dpunkt
2020
|
| Edition: | 3rd edition |
| Online Access: | |
| Collection: | O'Reilly - Collection details see MPG.ReNa |
Table of Contents:
- 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
- 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
- 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
- Intro
- 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