Angular

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

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