Angular

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.

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

»Das Buch bietet Expertenwissen in einer fast unglaublichen Tiefe.« - iX