Angular

Inhaltsverzeichnis



  Materialien zum Buch ... 25

  Vorwort ... 27

  1.  Angular-Kickstart: Ihre erste Angular-Webapplikation ... 31

       1.1 ... Installation der benötigten Software ... 31

       1.2 ... Hallo Angular ... 33

       1.3 ... Die Blogging-Anwendung ... 43

       1.4 ... Zusammenfassung und Ausblick ... 59

  2.  Das Angular-CLI: professionelle Projektorganisation für Angular-Projekte ... 61

       2.1 ... Das Angular-CLI installieren ... 62

       2.2 ... ng new: ein Grundgerüst für die Applikation erstellen ... 62

       2.3 ... ng serve: die Anwendung starten ... 69

       2.4 ... npm start: Start über die lokale CLI-Version ... 73

       2.5 ... ng generate: Komponenten generieren ... 74

       2.6 ... ng update: Angular und weitere Abhängigkeiten auf die neueste Version updaten ... 78

       2.7 ... ng lint: Linting und der Angular-Style-Guide ... 80

       2.8 ... Komponenten- und Ende-zu-Ende-Tests ausführen ... 82

       2.9 ... CSS-Präprozessoren verwenden ... 85

       2.10 ... Drittanbieter-Bibliotheken einbinden ... 86

       2.11 ... ng add: Angular-spezifische Abhängigkeiten zu Ihrer Anwendung hinzufügen ... 87

       2.12 ... ng build: deploybare Builds erstellen ... 90

       2.13 ... Configurations: Konfiguration unterschiedlicher Build- und Ausführungsumgebungen ... 92

       2.14 ... ng deploy: die Anwendung im Web deployen ... 97

       2.15 ... Zusammenfassung und Ausblick ... 101

  3.  Komponenten und Templating: der Angular-Sprachkern ... 103

       3.1 ... Etwas Theorie: der Angular-Komponenten-Baum ... 103

       3.2 ... Selektoren: vom DOM-Element zur Angular-Komponente ... 107

       3.3 ... Die Templating-Syntax: Verbindung zwischen Applikationslogik und Darstellung ... 110

       3.4 ... Komponenten-Schnittstellen definieren: von der einzelnen Komponente zur vollständigen Applikation ... 129

       3.5 ... ViewChildren: Zugriff auf Kind-Elemente aus der Komponenten-Klasse ... 140

       3.6 ... Content-Insertion: dynamische Komponenten-Hierarchien erstellen ... 143

       3.7 ... Der Lebenszyklus einer Komponente ... 153

       3.8 ... Zusammenfassung und Ausblick ... 164

  4.  Direktiven: Komponenten ohne eigenes Template ... 167

       4.1 ... ElementRef und Renderer2: Manipulation von DOM-Eigenschaften eines Elements ... 168

       4.2 ... HostBinding und HostListener: Auslesen und Verändern von Host-Eigenschaften und -Events ... 172

       4.3 ... Anwendungsfall: Einbinden von Drittanbieter-Bibliotheken ... 174

       4.4 ... Anwendungsfall: Accordion-Direktive -- mehrere Kind-Komponenten steuern ... 178

       4.5 ... exportAs: Zugriff auf die Schnittstelle einer Direktive ... 181

       4.6 ... Zusammenfassung und Ausblick ... 183

  5.  Fortgeschrittene Komponenten-Konzepte ... 185

       5.1 ... Styling von Angular-Komponenten ... 185

       5.2 ... TemplateRef und NgTemplateOutlet: dynamisches Austauschen von Komponenten-Templates ... 196

       5.3 ... ViewContainerRef: Komponenten zur Laufzeit hinzufügen ... 204

       5.4 ... NgComponentOutlet: dynamisch erzeugte Komponenten noch einfacher verwalten ... 213

       5.5 ... ChangeDetection-Strategien: Performance-Boost für Ihre Applikation ... 217

       5.6 ... Zusammenfassung und Ausblick ... 230

  6.  Standarddirektiven und Pipes: wissen, was das Framework an Bord hat ... 233

       6.1 ... Standarddirektiven ... 234

       6.2 ... Pipes: Werte vor dem Rendern transformieren ... 247

       6.3 ... Zusammenfassung und Ausblick ... 270

  7.  Services und Dependency-Injection: lose Kopplung für Ihre Business-Logik ... 273

       7.1 ... Grundlagen der Dependency-Injection ... 274

       7.2 ... Services in Angular-Applikationen ... 276

       7.3 ... Das Angular-Dependency-Injection-Framework ... 277

       7.4 ... Weitere Provider-Formen ... 284

       7.5 ... Der hierarchische Injector-Baum: volle Flexibilität bei der Definition Ihrer Abhängigkeiten ... 288

       7.6 ... Treeshakable-Providers: der DI-Mechanimus auf den Kopf gestellt ... 296

       7.7 ... Sichtbarkeit und Lookup von Dependencys ... 297

       7.8 ... Zusammenfassung und Ausblick ... 304

  8.  Template-driven Forms: einfache Formulare auf Basis von HTML ... 307

       8.1 ... Grundlagen zu Formularen: template-driven oder reaktiv? ... 308

       8.2 ... Das erste Formular: Übersicht über die Forms-API ... 309

       8.3 ... NgModel im Detail: Two-Way-Data-Binding oder nicht? ... 315

       8.4 ... Kurzexkurs: Verwendung von Interfaces für die Definition des Applikationsmodells ... 319

       8.5 ... Weitere Eingabeelemente ... 322

       8.6 ... Verschachtelte Eigenschaften definieren ... 328

       8.7 ... Validierungen ... 330

       8.8 ... Implementierung der Tags-Liste: wiederholbare Strukturen mit Template-driven Forms ... 347

       8.9 ... updateOn: steuern, wann Änderungen übernommen werden ... 351

       8.10 ... Zusammenfassung und Ausblick ... 352

  9.  Reactive Forms: Formulare dynamisch in der Applikationslogik definieren ... 355

       9.1 ... Aktivierung von Reactive Forms für Ihre Applikation ... 356

       9.2 ... Das Task-Formular im reaktiven Ansatz ... 356

       9.3 ... Formulare und Kontrollelemente auf Änderungen überwachen ... 377

       9.4 ... Fallbeispiel: Umfragebogen -- Formulare komplett dynamisch definieren ... 378

       9.5 ... ControlValueAccessor: eigene Eingabeelemente für die Forms-API implementieren ... 385

       9.6 ... Zusammenfassung und Ausblick ... 394

10.  Routing: Navigation innerhalb der Anwendung ... 397

       10.1 ... Project-Manager: die Beispielanwendung ... 398

       10.2 ... Die erste Routenkonfiguration: das Routing-Framework einrichten ... 399

       10.3 ... Location-Strategien: »schöne URLs« vs. »Routing ohne Server-Konfiguration« ... 404

       10.4 ... ChildRoutes: verschachtelte Routenkonfigurationen erstellen ... 407

       10.5 ... RouterLinkActive: Styling des aktiven Links ... 413

       10.6 ... Routing-Parameter: dynamische Adresszeilenparameter auswerten ... 416

       10.7 ... Aus der Anwendungslogik heraus navigieren ... 427

       10.8 ... Routing-Guards: Routen absichern und die Navigation generisch beeinflussen ... 429

       10.9 ... Redirects und Wildcard-URLs ... 436

       10.10 ... Data: statische Metadaten an Routen hinterlegen ... 439

       10.11 ... Resolve: dynamische Daten über den Router injizieren ... 439

       10.12 ... Der Title-Service: den Seitentitel verändern ... 442

       10.13 ... Router-Tree und Router-Events: generisch auf Seitenwechsel reagieren ... 444

       10.14 ... Location: direkte Interaktion mit der Adresszeile des Browsers ... 447

       10.15 ... Mehrere RouterOutlets: maximale Flexibilität beim Routing ... 449

       10.16 ... Zusammenfassung und Ausblick ... 455

11.  HTTP: Anbindung von Angular-Applikationen an einen Webserver ... 457

       11.1 ... Die Server-Applikation ... 458

       11.2 ... Das Angular-HTTP-Modul verwenden ... 462

       11.3 ... Der erste GET-Request: Grundlagen zur HTTP-API ... 462

       11.4 ... Asynchrone Service-Schnittstellen modellieren: Anpassung des TaskService ... 466

       11.5 ... Die AsyncPipe: noch eleganter mit asynchronen Daten arbeiten ... 468

       11.6 ... HttpParams: elegant dynamische Suchen definieren ... 469

       11.7 ... Die observe-Eigenschaft: die komplette HttpResponse auswerten ... 472

       11.8 ... POST, PUT, DELETE, PATCH und HEAD: Verwendung der weiteren HTTP-Methoden ... 474

       11.9 ... JSONP ... 482

       11.10 ... Zusammenfassung und Ausblick ... 486

12.  Reaktive Architekturen mit RxJS ... 489

       12.1 ... Kurzeinführung in RxJS ... 490

       12.2 ... Implementierung einer Typeahead-Suche ... 498

       12.3 ... Reaktive Datenarchitekturen in Angular-Applikationen ... 507

       12.4 ... Anbindung von Websockets zur Implementierung einer Echtzeitanwendung ... 524

       12.5 ... ChangeDetectionStrategy.OnPush: Performance-Schub durch die reaktive Architektur ... 530

       12.6 ... Zusammenfassung und Ausblick ... 531

13.  Komponenten- und Unit-Tests: das Angular-Testing-Framework ... 533

       13.1 ... Karma und Jasmine: Grundlagen zu Unit- und Komponenten-Tests in Angular-Anwendungen ... 534

       13.2 ... Der erste Unit-Test: einfache Klassen und Funktionen testen ... 537

       13.3 ... Isolierte Komponenten testen: Grundlagen zu Komponenten-Tests mit dem Angular-Testing-Framework ... 543

       13.4 ... Mocks und Spies: Komponenten mit Abhängigkeiten testen ... 549

       13.5 ... Services und HTTP-Backends testen ... 555

       13.6 ... Formulare testen ... 560

       13.7 ... Direktiven und ngContent-Komponenten testen ... 566

       13.8 ... waitForAsync und fakeAsync: mehr Kontrolle über asynchrone Tests ... 569

       13.9 ... Routing-Funktionalität testen ... 572

       13.10 ... Die Tests auf Ihrem Build-Server ausführen ... 576

       13.11 ... Zusammenfassung und Ausblick ... 577

14.  Cypress: komfortable Integrationstests für Ihre Anwendung ... 581

       14.1 ... Cypress zum Projekt hinzufügen und ausführen ... 582

       14.2 ... Cypress lokal und auf Ihrem Build-Server ausführen ... 583

       14.3 ... Cypress konfigurieren ... 587

       14.4 ... Cypress-Grundlagen: Ihre ersten eigenen Cypress-Tests ... 590

       14.5 ... Selektoren, Interaktion mit Elementen und weitere Assertion-Typen: den Tasks-Bereich testen ... 594

       14.6 ... cy.on: auf Browser-Events reagieren ... 601

       14.7 ... Intercept: REST-Requests untersuchen und manipulieren ... 602

       14.8 ... Custom Commands: Den Funktionsumfang von Cypress mit eigenen Kommandos dynamisch erweitern ... 609

       14.9 ... Screenshots und Video-Recordings: sehen, was schiefläuft ... 612

       14.10 ... Debugging von Cypress-Tests ... 615

       14.11 ... Die Cypress-Beispiele als Dokumentation nutzen ... 619

       14.12 ... Zusammenfassung und Ausblick ... 621

15.  NgModule und Lazy-Loading: Modularisierung Ihrer Anwendungen ... 625

       15.1 ... Feature-Module: Teilbereiche der Applikation kapseln ... 626

       15.2 ... Shared-Modules: gemeinsam genutzte Funktionalität kapseln ... 634

       15.3 ... Module per Component: das höchste Level an Modularisierung ... 638

       15.4 ... Services und Modularisierung ... 640

       15.5 ... Lazy-Loading von Applikationsbestandteilen ... 647

       15.6 ... Zusammenfassung und Ausblick ... 651

16.  Internationalisierung: mehrsprachige Angular-Anwendungen implementieren ... 653

       16.1 ... Einrichtung des i18n-Frameworks ... 654

       16.2 ... ng extract-i18n: automatische Generierung der Message-Datei ... 662

       16.3 ... Eigene Übersetzungsschlüssel definieren ... 664

       16.4 ... Description und Meaning: Metadaten für Übersetzer übergeben ... 665

       16.5 ... Weitere Übersetzungstechniken ... 666

       16.6 ... $localize: Texte aus dem TypeScript-Code heraus übersetzen ... 668

       16.7 ... Pluralisierung und geschlechtsspezifische Texte ... 670

       16.8 ... Zusammenfassung und Ausblick ... 677

17.  Das Animation-Framework: Angular-Anwendungen animieren ... 679

       17.1 ... Die erste Animation: Grundlagen zum Animation-Framework ... 680

       17.2 ... void und *: spezielle States zum Hinzufügen und Entfernen von DOM-Elementen ... 684

       17.3 ... Animationen in Verbindung mit automatisch berechneten Eigenschaften ... 687

       17.4 ... Animation-Lifecycles: auf den Start und das Ende von Animationen reagieren ... 689

       17.5 ... Keyframes: Definition von komplexen, mehrstufigen Animationen ... 690

       17.6 ... Styling von Komponenten, die in Animationen verwendet werden ... 691

       17.7 ... Groups und Sequences: mehrere Animationen kombinieren ... 693

       17.8 ... Querying: komplexe Komponenten animieren ... 696

       17.9 ... Staggering: ausgefeilte Listenanimationen definieren ... 700

       17.10 ... Animation von Routing-Vorgängen ... 702

       17.11 ... Zusammenfassung und Ausblick ... 707

18.  Vollendet in Form und Funktion: Material Design und Angular Material ... 709

       18.1 ... Material Design ... 710

       18.2 ... Angular Material ... 725

       18.3 ... Zusammenfassung ... 771

19.  NPM-Librarys und Mono-Repos: Funktionalität in Bibliotheken auslagern und per NPM veröffentlichen ... 773

       19.1 ... Das Angular-CLI-Projekt einrichten ... 774

       19.2 ... Die generierte Bibliothek im Detail ... 777

       19.3 ... Die Bibliothek kompilieren und im Demo-Projekt einbinden ... 781

       19.4 ... Der Mono-Repo-Ansatz für die Entwicklung von mehreren Webapplikationen ... 784

       19.5 ... Die Bibliothek über npm veröffentlichen ... 788

       19.6 ... Best Practices für die Implementierung von stylebaren Komponenten ... 794

       19.7 ... Zusammenfassung und Ausblick ... 802

20.  Angular Elements: Angular-Komponenten als WebComponents bereitstellen ... 805

       20.1 ... Einführung in Custom Elements und Angular Elements ... 806

       20.2 ... Angular-Komponenten als WebComponents bereitstellen ... 807

       20.3 ... Zoneless-Applications: Angular-Anwendungen unabhängig von Zone.js machen ... 816

       20.4 ... Den Build für die WebComponent-Auslieferung optimieren ... 818

       20.5 ... Die WebComponent in einem Angular-Projekt verwenden ... 819

       20.6 ... Die WebComponent in einem Vue-Projekt verwenden ... 822

       20.7 ... Zusammenfassung und Ausblick ... 826

21.  Docker: Die Anwendung im Container deployen ... 829

       21.1 ... Deployment über nginx: das Docker-Image erstellen und als Container starten ... 830

       21.2 ... Multi-Stage Builds ... 835

       21.3 ... Die Anwendung über Umgebungsvariablen konfigurieren ... 840

       21.4 ... Zusammenfassung und Ausblick ... 848

22.  Server-Side Rendering: Angular-Anwendungen auf dem Server rendern ... 851

       22.1 ... Einführung in Server-Side Rendering (SSR): Grundlagen und Vorteile ... 851

       22.2 ... Das Angular-Projekt für das Server-Side Rendering vorbereiten ... 854

       22.3 ... isPlatformServer und isPlatformBrowser: Wo bin ich gerade? ... 862

       22.4 ... Die State-Transfer-API: geladene Daten vom Server auf den Client transferieren ... 862

       22.5 ... Title-Service und Meta-Service: Suchmaschinen-Optimierung und Einbindung in Social-Media-Seiten leicht gemacht ... 867

       22.6 ... Notwendige Anpassungen am Project-Manager-Code: Stolperfallen und alternative Lösungsansätze beim Server-Side Rendering ... 870

       22.7 ... Die Anwendung in der Cloud deployen ... 876

       22.8 ... Zusammenfassung ... 889

  Anhang ... 891

       A ... ECMAScript 2015 (and beyond) ... 891

       B ... Typsicheres JavaScript mit TypeScript ... 947

  Index ... 1007

Angular

Das große Handbuch zum JavaScript-Framework. Einführung und fortgeschrittene TypeScript-Techniken. Inkl. Angular Material

Buch (Gebundene Ausgabe)

39,90 €

inkl. gesetzl. MwSt.

Angular

Ebenfalls verfügbar als:

Gebundenes Buch

Gebundenes Buch

ab 39,90 €
eBook

eBook

ab 39,90 €

Beschreibung

Alles, was Sie über die Angular-Entwicklung wissen sollten – zum Lernen und Nachschlagen. Christoph Höller macht Sie mit allen relevanten Technologien, Standards und Kernbestandteilen des Angular-Frameworks vertraut. Ein durchgehendes Anwendungsbeispiel führt Ihnen die Komponenten praxisnah vor und zeigt, wie Sie Angular für eigene Projekte professionell einsetzen. Inkl. Material Design sowie aller neuen Features und Komponenten.

Aus dem Inhalt:

Angular-Kickstart
Komponenten & Direktiven
Pipes, Services, Dependency-Injection
Angular-CLI
Modularisierung
Formulare
HTTP-Anbindung
Echtzeitunterstützung
Internationalisierung
Animationen
Performance-Optimierung
ECMAScript, TypeScript, RxJS
Material Design
NPM-Libraries und Mono-Repos
WebComponents
Server-Side Rendering

Christoph Höller ist selbstständiger IT-Consultant. Seine fachlichen Schwerpunkte sind die Konzeption und Implementierung hochverfügbarer Unternehmensapplikationen auf Basis des Java-EE-Stacks, die Entwicklung von responsiven Webapplikationen mit JavaScript, AngularJS und Big-Data-Speichern sowie UML-Modellierung und objektorientierte Softwareentwicklung.

Details

Einband

Gebundene Ausgabe

Erscheinungsdatum

03.03.2022

Verlag

Rheinwerk

Seitenzahl

1016

Maße (L/B/H)

24,6/18/6,1 cm

Beschreibung

Details

Einband

Gebundene Ausgabe

Erscheinungsdatum

03.03.2022

Verlag

Rheinwerk

Seitenzahl

1016

Maße (L/B/H)

24,6/18/6,1 cm

Gewicht

1988 g

Auflage

3. Auflage

Reihe

Rheinwerk Computing

Sprache

Deutsch

ISBN

978-3-8362-8243-7

Das meinen unsere Kund*innen

0.0

0 Bewertungen

Informationen zu Bewertungen

Zur Abgabe einer Bewertung ist eine Anmeldung im Kund*innenkonto notwendig. Die Authentizität der Bewertungen wird von uns nicht überprüft. Wir behalten uns vor, Bewertungstexte, die unseren Richtlinien widersprechen, entsprechend zu kürzen oder zu löschen.

Verfassen Sie die erste Bewertung zu diesem Artikel

Helfen Sie anderen Kund*innen durch Ihre Meinung

Erste Bewertung verfassen

Unsere Kund*innen meinen

0.0

0 Bewertungen filtern

Weitere Artikel finden Sie in

Die Leseprobe wird geladen.
  • Angular


  •   Materialien zum Buch ... 25

      Vorwort ... 27

      1.  Angular-Kickstart: Ihre erste Angular-Webapplikation ... 31

           1.1 ... Installation der benötigten Software ... 31

           1.2 ... Hallo Angular ... 33

           1.3 ... Die Blogging-Anwendung ... 43

           1.4 ... Zusammenfassung und Ausblick ... 59

      2.  Das Angular-CLI: professionelle Projektorganisation für Angular-Projekte ... 61

           2.1 ... Das Angular-CLI installieren ... 62

           2.2 ... ng new: ein Grundgerüst für die Applikation erstellen ... 62

           2.3 ... ng serve: die Anwendung starten ... 69

           2.4 ... npm start: Start über die lokale CLI-Version ... 73

           2.5 ... ng generate: Komponenten generieren ... 74

           2.6 ... ng update: Angular und weitere Abhängigkeiten auf die neueste Version updaten ... 78

           2.7 ... ng lint: Linting und der Angular-Style-Guide ... 80

           2.8 ... Komponenten- und Ende-zu-Ende-Tests ausführen ... 82

           2.9 ... CSS-Präprozessoren verwenden ... 85

           2.10 ... Drittanbieter-Bibliotheken einbinden ... 86

           2.11 ... ng add: Angular-spezifische Abhängigkeiten zu Ihrer Anwendung hinzufügen ... 87

           2.12 ... ng build: deploybare Builds erstellen ... 90

           2.13 ... Configurations: Konfiguration unterschiedlicher Build- und Ausführungsumgebungen ... 92

           2.14 ... ng deploy: die Anwendung im Web deployen ... 97

           2.15 ... Zusammenfassung und Ausblick ... 101

      3.  Komponenten und Templating: der Angular-Sprachkern ... 103

           3.1 ... Etwas Theorie: der Angular-Komponenten-Baum ... 103

           3.2 ... Selektoren: vom DOM-Element zur Angular-Komponente ... 107

           3.3 ... Die Templating-Syntax: Verbindung zwischen Applikationslogik und Darstellung ... 110

           3.4 ... Komponenten-Schnittstellen definieren: von der einzelnen Komponente zur vollständigen Applikation ... 129

           3.5 ... ViewChildren: Zugriff auf Kind-Elemente aus der Komponenten-Klasse ... 140

           3.6 ... Content-Insertion: dynamische Komponenten-Hierarchien erstellen ... 143

           3.7 ... Der Lebenszyklus einer Komponente ... 153

           3.8 ... Zusammenfassung und Ausblick ... 164

      4.  Direktiven: Komponenten ohne eigenes Template ... 167

           4.1 ... ElementRef und Renderer2: Manipulation von DOM-Eigenschaften eines Elements ... 168

           4.2 ... HostBinding und HostListener: Auslesen und Verändern von Host-Eigenschaften und -Events ... 172

           4.3 ... Anwendungsfall: Einbinden von Drittanbieter-Bibliotheken ... 174

           4.4 ... Anwendungsfall: Accordion-Direktive -- mehrere Kind-Komponenten steuern ... 178

           4.5 ... exportAs: Zugriff auf die Schnittstelle einer Direktive ... 181

           4.6 ... Zusammenfassung und Ausblick ... 183

      5.  Fortgeschrittene Komponenten-Konzepte ... 185

           5.1 ... Styling von Angular-Komponenten ... 185

           5.2 ... TemplateRef und NgTemplateOutlet: dynamisches Austauschen von Komponenten-Templates ... 196

           5.3 ... ViewContainerRef: Komponenten zur Laufzeit hinzufügen ... 204

           5.4 ... NgComponentOutlet: dynamisch erzeugte Komponenten noch einfacher verwalten ... 213

           5.5 ... ChangeDetection-Strategien: Performance-Boost für Ihre Applikation ... 217

           5.6 ... Zusammenfassung und Ausblick ... 230

      6.  Standarddirektiven und Pipes: wissen, was das Framework an Bord hat ... 233

           6.1 ... Standarddirektiven ... 234

           6.2 ... Pipes: Werte vor dem Rendern transformieren ... 247

           6.3 ... Zusammenfassung und Ausblick ... 270

      7.  Services und Dependency-Injection: lose Kopplung für Ihre Business-Logik ... 273

           7.1 ... Grundlagen der Dependency-Injection ... 274

           7.2 ... Services in Angular-Applikationen ... 276

           7.3 ... Das Angular-Dependency-Injection-Framework ... 277

           7.4 ... Weitere Provider-Formen ... 284

           7.5 ... Der hierarchische Injector-Baum: volle Flexibilität bei der Definition Ihrer Abhängigkeiten ... 288

           7.6 ... Treeshakable-Providers: der DI-Mechanimus auf den Kopf gestellt ... 296

           7.7 ... Sichtbarkeit und Lookup von Dependencys ... 297

           7.8 ... Zusammenfassung und Ausblick ... 304

      8.  Template-driven Forms: einfache Formulare auf Basis von HTML ... 307

           8.1 ... Grundlagen zu Formularen: template-driven oder reaktiv? ... 308

           8.2 ... Das erste Formular: Übersicht über die Forms-API ... 309

           8.3 ... NgModel im Detail: Two-Way-Data-Binding oder nicht? ... 315

           8.4 ... Kurzexkurs: Verwendung von Interfaces für die Definition des Applikationsmodells ... 319

           8.5 ... Weitere Eingabeelemente ... 322

           8.6 ... Verschachtelte Eigenschaften definieren ... 328

           8.7 ... Validierungen ... 330

           8.8 ... Implementierung der Tags-Liste: wiederholbare Strukturen mit Template-driven Forms ... 347

           8.9 ... updateOn: steuern, wann Änderungen übernommen werden ... 351

           8.10 ... Zusammenfassung und Ausblick ... 352

      9.  Reactive Forms: Formulare dynamisch in der Applikationslogik definieren ... 355

           9.1 ... Aktivierung von Reactive Forms für Ihre Applikation ... 356

           9.2 ... Das Task-Formular im reaktiven Ansatz ... 356

           9.3 ... Formulare und Kontrollelemente auf Änderungen überwachen ... 377

           9.4 ... Fallbeispiel: Umfragebogen -- Formulare komplett dynamisch definieren ... 378

           9.5 ... ControlValueAccessor: eigene Eingabeelemente für die Forms-API implementieren ... 385

           9.6 ... Zusammenfassung und Ausblick ... 394

    10.  Routing: Navigation innerhalb der Anwendung ... 397

           10.1 ... Project-Manager: die Beispielanwendung ... 398

           10.2 ... Die erste Routenkonfiguration: das Routing-Framework einrichten ... 399

           10.3 ... Location-Strategien: »schöne URLs« vs. »Routing ohne Server-Konfiguration« ... 404

           10.4 ... ChildRoutes: verschachtelte Routenkonfigurationen erstellen ... 407

           10.5 ... RouterLinkActive: Styling des aktiven Links ... 413

           10.6 ... Routing-Parameter: dynamische Adresszeilenparameter auswerten ... 416

           10.7 ... Aus der Anwendungslogik heraus navigieren ... 427

           10.8 ... Routing-Guards: Routen absichern und die Navigation generisch beeinflussen ... 429

           10.9 ... Redirects und Wildcard-URLs ... 436

           10.10 ... Data: statische Metadaten an Routen hinterlegen ... 439

           10.11 ... Resolve: dynamische Daten über den Router injizieren ... 439

           10.12 ... Der Title-Service: den Seitentitel verändern ... 442

           10.13 ... Router-Tree und Router-Events: generisch auf Seitenwechsel reagieren ... 444

           10.14 ... Location: direkte Interaktion mit der Adresszeile des Browsers ... 447

           10.15 ... Mehrere RouterOutlets: maximale Flexibilität beim Routing ... 449

           10.16 ... Zusammenfassung und Ausblick ... 455

    11.  HTTP: Anbindung von Angular-Applikationen an einen Webserver ... 457

           11.1 ... Die Server-Applikation ... 458

           11.2 ... Das Angular-HTTP-Modul verwenden ... 462

           11.3 ... Der erste GET-Request: Grundlagen zur HTTP-API ... 462

           11.4 ... Asynchrone Service-Schnittstellen modellieren: Anpassung des TaskService ... 466

           11.5 ... Die AsyncPipe: noch eleganter mit asynchronen Daten arbeiten ... 468

           11.6 ... HttpParams: elegant dynamische Suchen definieren ... 469

           11.7 ... Die observe-Eigenschaft: die komplette HttpResponse auswerten ... 472

           11.8 ... POST, PUT, DELETE, PATCH und HEAD: Verwendung der weiteren HTTP-Methoden ... 474

           11.9 ... JSONP ... 482

           11.10 ... Zusammenfassung und Ausblick ... 486

    12.  Reaktive Architekturen mit RxJS ... 489

           12.1 ... Kurzeinführung in RxJS ... 490

           12.2 ... Implementierung einer Typeahead-Suche ... 498

           12.3 ... Reaktive Datenarchitekturen in Angular-Applikationen ... 507

           12.4 ... Anbindung von Websockets zur Implementierung einer Echtzeitanwendung ... 524

           12.5 ... ChangeDetectionStrategy.OnPush: Performance-Schub durch die reaktive Architektur ... 530

           12.6 ... Zusammenfassung und Ausblick ... 531

    13.  Komponenten- und Unit-Tests: das Angular-Testing-Framework ... 533

           13.1 ... Karma und Jasmine: Grundlagen zu Unit- und Komponenten-Tests in Angular-Anwendungen ... 534

           13.2 ... Der erste Unit-Test: einfache Klassen und Funktionen testen ... 537

           13.3 ... Isolierte Komponenten testen: Grundlagen zu Komponenten-Tests mit dem Angular-Testing-Framework ... 543

           13.4 ... Mocks und Spies: Komponenten mit Abhängigkeiten testen ... 549

           13.5 ... Services und HTTP-Backends testen ... 555

           13.6 ... Formulare testen ... 560

           13.7 ... Direktiven und ngContent-Komponenten testen ... 566

           13.8 ... waitForAsync und fakeAsync: mehr Kontrolle über asynchrone Tests ... 569

           13.9 ... Routing-Funktionalität testen ... 572

           13.10 ... Die Tests auf Ihrem Build-Server ausführen ... 576

           13.11 ... Zusammenfassung und Ausblick ... 577

    14.  Cypress: komfortable Integrationstests für Ihre Anwendung ... 581

           14.1 ... Cypress zum Projekt hinzufügen und ausführen ... 582

           14.2 ... Cypress lokal und auf Ihrem Build-Server ausführen ... 583

           14.3 ... Cypress konfigurieren ... 587

           14.4 ... Cypress-Grundlagen: Ihre ersten eigenen Cypress-Tests ... 590

           14.5 ... Selektoren, Interaktion mit Elementen und weitere Assertion-Typen: den Tasks-Bereich testen ... 594

           14.6 ... cy.on: auf Browser-Events reagieren ... 601

           14.7 ... Intercept: REST-Requests untersuchen und manipulieren ... 602

           14.8 ... Custom Commands: Den Funktionsumfang von Cypress mit eigenen Kommandos dynamisch erweitern ... 609

           14.9 ... Screenshots und Video-Recordings: sehen, was schiefläuft ... 612

           14.10 ... Debugging von Cypress-Tests ... 615

           14.11 ... Die Cypress-Beispiele als Dokumentation nutzen ... 619

           14.12 ... Zusammenfassung und Ausblick ... 621

    15.  NgModule und Lazy-Loading: Modularisierung Ihrer Anwendungen ... 625

           15.1 ... Feature-Module: Teilbereiche der Applikation kapseln ... 626

           15.2 ... Shared-Modules: gemeinsam genutzte Funktionalität kapseln ... 634

           15.3 ... Module per Component: das höchste Level an Modularisierung ... 638

           15.4 ... Services und Modularisierung ... 640

           15.5 ... Lazy-Loading von Applikationsbestandteilen ... 647

           15.6 ... Zusammenfassung und Ausblick ... 651

    16.  Internationalisierung: mehrsprachige Angular-Anwendungen implementieren ... 653

           16.1 ... Einrichtung des i18n-Frameworks ... 654

           16.2 ... ng extract-i18n: automatische Generierung der Message-Datei ... 662

           16.3 ... Eigene Übersetzungsschlüssel definieren ... 664

           16.4 ... Description und Meaning: Metadaten für Übersetzer übergeben ... 665

           16.5 ... Weitere Übersetzungstechniken ... 666

           16.6 ... $localize: Texte aus dem TypeScript-Code heraus übersetzen ... 668

           16.7 ... Pluralisierung und geschlechtsspezifische Texte ... 670

           16.8 ... Zusammenfassung und Ausblick ... 677

    17.  Das Animation-Framework: Angular-Anwendungen animieren ... 679

           17.1 ... Die erste Animation: Grundlagen zum Animation-Framework ... 680

           17.2 ... void und *: spezielle States zum Hinzufügen und Entfernen von DOM-Elementen ... 684

           17.3 ... Animationen in Verbindung mit automatisch berechneten Eigenschaften ... 687

           17.4 ... Animation-Lifecycles: auf den Start und das Ende von Animationen reagieren ... 689

           17.5 ... Keyframes: Definition von komplexen, mehrstufigen Animationen ... 690

           17.6 ... Styling von Komponenten, die in Animationen verwendet werden ... 691

           17.7 ... Groups und Sequences: mehrere Animationen kombinieren ... 693

           17.8 ... Querying: komplexe Komponenten animieren ... 696

           17.9 ... Staggering: ausgefeilte Listenanimationen definieren ... 700

           17.10 ... Animation von Routing-Vorgängen ... 702

           17.11 ... Zusammenfassung und Ausblick ... 707

    18.  Vollendet in Form und Funktion: Material Design und Angular Material ... 709

           18.1 ... Material Design ... 710

           18.2 ... Angular Material ... 725

           18.3 ... Zusammenfassung ... 771

    19.  NPM-Librarys und Mono-Repos: Funktionalität in Bibliotheken auslagern und per NPM veröffentlichen ... 773

           19.1 ... Das Angular-CLI-Projekt einrichten ... 774

           19.2 ... Die generierte Bibliothek im Detail ... 777

           19.3 ... Die Bibliothek kompilieren und im Demo-Projekt einbinden ... 781

           19.4 ... Der Mono-Repo-Ansatz für die Entwicklung von mehreren Webapplikationen ... 784

           19.5 ... Die Bibliothek über npm veröffentlichen ... 788

           19.6 ... Best Practices für die Implementierung von stylebaren Komponenten ... 794

           19.7 ... Zusammenfassung und Ausblick ... 802

    20.  Angular Elements: Angular-Komponenten als WebComponents bereitstellen ... 805

           20.1 ... Einführung in Custom Elements und Angular Elements ... 806

           20.2 ... Angular-Komponenten als WebComponents bereitstellen ... 807

           20.3 ... Zoneless-Applications: Angular-Anwendungen unabhängig von Zone.js machen ... 816

           20.4 ... Den Build für die WebComponent-Auslieferung optimieren ... 818

           20.5 ... Die WebComponent in einem Angular-Projekt verwenden ... 819

           20.6 ... Die WebComponent in einem Vue-Projekt verwenden ... 822

           20.7 ... Zusammenfassung und Ausblick ... 826

    21.  Docker: Die Anwendung im Container deployen ... 829

           21.1 ... Deployment über nginx: das Docker-Image erstellen und als Container starten ... 830

           21.2 ... Multi-Stage Builds ... 835

           21.3 ... Die Anwendung über Umgebungsvariablen konfigurieren ... 840

           21.4 ... Zusammenfassung und Ausblick ... 848

    22.  Server-Side Rendering: Angular-Anwendungen auf dem Server rendern ... 851

           22.1 ... Einführung in Server-Side Rendering (SSR): Grundlagen und Vorteile ... 851

           22.2 ... Das Angular-Projekt für das Server-Side Rendering vorbereiten ... 854

           22.3 ... isPlatformServer und isPlatformBrowser: Wo bin ich gerade? ... 862

           22.4 ... Die State-Transfer-API: geladene Daten vom Server auf den Client transferieren ... 862

           22.5 ... Title-Service und Meta-Service: Suchmaschinen-Optimierung und Einbindung in Social-Media-Seiten leicht gemacht ... 867

           22.6 ... Notwendige Anpassungen am Project-Manager-Code: Stolperfallen und alternative Lösungsansätze beim Server-Side Rendering ... 870

           22.7 ... Die Anwendung in der Cloud deployen ... 876

           22.8 ... Zusammenfassung ... 889

      Anhang ... 891

           A ... ECMAScript 2015 (and beyond) ... 891

           B ... Typsicheres JavaScript mit TypeScript ... 947

      Index ... 1007