Angular

Geleitwort des Fachgutachters zur zweiten Auflage ... 25
Einleitung ... 27
1. Angular-Kickstart: Ihre erste Angular-Webapplikation ... 29

1.1 ... Installation der benötigen Software ... 29
1.2 ... Hallo Angular ... 31
1.3 ... Die Blogging-Anwendung ... 41
1.4 ... Zusammenfassung und Ausblick ... 56

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

2.1 ... Das Angular-CLI installieren ... 60
2.2 ... ng new: ein Grundgerüst für die Applikation erstellen ... 60
2.3 ... ng serve: die Anwendung starten ... 67
2.4 ... npm start: Start über die lokale CLI-Version ... 71
2.5 ... ng generate: Komponenten generieren ... 72
2.6 ... ng update: Angular und weitere Abhängigkeiten auf die neueste Version updaten ... 76
2.7 ... ng lint: Linting und der Angular-Style-Guide ... 78
2.8 ... Komponenten- und Ende-zu-Ende-Tests ausführen ... 80
2.9 ... CSS-Präprozessoren verwenden ... 83
2.10 ... Drittanbieter-Bibliotheken einbinden ... 84
2.11 ... ng add: Angular-spezifische Abhängigkeiten zu Ihrer Anwendung hinzufügen ... 86
2.12 ... ng build: deploybare Builds erstellen ... 88
2.13 ... Configurations: Konfiguration unterschiedlicher Build- und Ausführungsumgebungen ... 90
2.14 ... Der AOT-Modus ... 96
2.15 ... Zusammenfassung und Ausblick ... 97

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

3.1 ... Etwas Theorie: der Angular-Komponentenbaum ... 99
3.2 ... Selektoren: vom DOM-Element zur Angular-Komponente ... 103
3.3 ... Die Templating-Syntax: Verbindung zwischen Applikationslogik und Darstellung ... 106
3.4 ... Komponentenschnittstellen definieren: von der einzelnen Komponente zur vollständigen Applikation ... 126
3.5 ... ViewChildren: Zugriff auf Kind-Elemente aus der Komponentenklasse ... 137
3.6 ... Content-Insertion: dynamische Komponentenhierarchien erstellen ... 140
3.7 ... Der Lebenszyklus einer Komponente ... 150
3.8 ... Zusammenfassung und Ausblick ... 161

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

4.1 ... ElementRef und Renderer2: Manipulation von DOM-Eigenschaften eines Elements ... 164
4.2 ... HostBinding und HostListener: Auslesen und Verändern von Host-Eigenschaften und -Events ... 168
4.3 ... Anwendungsfall: Einbinden von Drittanbieter-Bibliotheken ... 171
4.4 ... Anwendungsfall: Accordion-Direktive - mehrere Kind-Komponenten steuern ... 176
4.5 ... exportAs: Zugriff auf die Schnittstelle einer Direktive ... 179
4.6 ... Zusammenfassung und Ausblick ... 181

5. Fortgeschrittene Komponentenkonzepte ... 183

5.1 ... Styling von Angular-Komponenten ... 183
5.2 ... TemplateRef und NgTemplateOutlet: dynamisches Austauschen von Komponenten-Templates ... 195
5.3 ... ViewContainerRef und ComponentFactory: Komponenten zur Laufzeit hinzufügen ... 202
5.4 ... NgComponentOutlet: dynamisch erzeugte Komponenten noch einfacher verwalten ... 213
5.5 ... ChangeDetection-Strategien: Performance-Boost für Ihre Applikation ... 218
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 ... 271

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 ... Injection by Type: Vereinfachungen für TypeScript-Nutzer ... 281
7.5 ... Weitere Provider-Formen ... 284
7.6 ... Der hierarchische Injector-Baum: volle Flexibilität bei der Definition Ihrer Abhängigkeiten ... 288
7.7 ... Treeshakable-Providers: der DI-Mechanimus auf den Kopf gestellt ... 297
7.8 ... Sichtbarkeit und Lookup von Dependencys ... 298
7.9 ... Zusammenfassung und Ausblick ... 305

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 ... 346
8.9 ... updateOn: steuern, wann Änderungen übernommen werden ... 350
8.10 ... Zusammenfassung und Ausblick ... 351

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

9.1 ... Aktivierung von Reactive Forms für Ihre Applikation ... 354
9.2 ... Das Task-Formular im reaktiven Ansatz ... 354
9.3 ... Formulare und Kontrollelemente auf Änderungen überwachen ... 376
9.4 ... Fallbeispiel: Umfragebogen - Formulare komplett dynamisch definieren ... 377
9.5 ... ControlValueAccessor: eigene Eingabeelemente für die Forms-API implementieren ... 384
9.6 ... Die Forms-API im Überblick ... 390
9.7 ... 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 ... 415
10.7 ... Aus der Anwendungslogik heraus navigieren ... 426
10.8 ... Routing-Guards: Routen absichern und die Navigation generisch beeinflussen ... 428
10.9 ... Redirects und Wildcard-URLs ... 434
10.10 ... Data: statische Metadaten an Routen hinterlegen ... 436
10.11 ... Resolve: dynamische Daten über den Router injizieren ... 437
10.12 ... Der Title-Service: den Seitentitel verändern ... 441
10.13 ... Router-Tree und Router-Events: generisch auf Seitenwechsel reagieren ... 442
10.14 ... Location: direkte Interaktion mit der Adresszeile des Browsers ... 445
10.15 ... Mehrere RouterOutlets: maximale Flexibilität beim Routing ... 448
10.16 ... Zusammenfassung und Ausblick ... 454

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

11.1 ... Die Server-Applikation ... 456
11.2 ... Das Angular-HTTP-Modul verwenden ... 460
11.3 ... Der erste GET-Request: Grundlagen zur HTTP-API ... 460
11.4 ... Asynchrone Service-Schnittstellen modellieren: Anpassung des TaskService ... 464
11.5 ... Die AsyncPipe: noch eleganter mit asynchronen Daten arbeiten ... 466
11.6 ... HttpParams: elegant dynamische Suchen definieren ... 467
11.7 ... Die observe-Eigenschaft: die komplette HttpResponse auswerten ... 470
11.8 ... POST, PUT, DELETE, PATCH und HEAD: Verwendung der weiteren HTTP-Methoden ... 471
11.9 ... JSONP ... 479
11.10 ... Zusammenfassung und Ausblick ... 483

12. Reaktive Architekturen mit RxJS ... 485

12.1 ... Kurzeinführung in RxJS ... 486
12.2 ... Implementierung einer Typeahead-Suche ... 493
12.3 ... Reaktive Datenarchitekturen in Angular-Applikationen ... 502
12.4 ... Anbindung von Websockets zur Implementierung einer Echtzeitanwendung ... 519
12.5 ... ChangeDetectionStrategy.OnPush: Performance-Schub durch die reaktive Architektur ... 525
12.6 ... Zusammenfassung und Ausblick ... 526

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

13.1 ... Karma und Jasmine: Grundlagen zu Unit- und Komponententests in Angular-Anwendungen ... 530
13.2 ... Der erste Unit-Test: einfache Klassen und Funktionen testen ... 534
13.3 ... Isolierte Komponenten testen: Grundlagen zu Komponententests mit dem Angular-Testing-Framework ... 539
13.4 ... Mocks und Spies: Komponenten mit Abhängigkeiten testen ... 544
13.5 ... Services und HTTP-Backends testen ... 552
13.6 ... Formulare testen ... 557
13.7 ... Direktiven und ngContent-Komponenten testen ... 563
13.8 ... async und fakeAsync: mehr Kontrolle über asynchrone Tests ... 566
13.9 ... Routing-Funktionalität testen ... 568
13.10 ... Zusammenfassung und Ausblick ... 572

14. Integrationstests mit Protractor ... 575

14.1 ... Start der Tests und Konfiguration von Protractor ... 576
14.2 ... Anpassung der Applikationskonfiguration über die angular.json ... 578
14.3 ... Das browser-Objekt und Locators: Übersicht über die Kernbestandteile von Protractor ... 581
14.4 ... Page-Objects: Trennung von Testlogik und technischen Details ... 587
14.5 ... Formulare und Alert-Boxen testen: der Edit-Task-Test ... 590
14.6 ... Seitenübergreifende Workflows testen ... 593
14.7 ... Debugging von Protractor-Tests ... 597
14.8 ... Screenshots anfertigen ... 599
14.9 ... Zusammenfassung ... 602

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

15.1 ... Feature-Modules: Teilbereiche der Applikation kapseln ... 606
15.2 ... Shared-Modules: gemeinsam genutzte Funktionalität kapseln ... 614
15.3 ... Services und Modularisierung ... 618
15.4 ... Lazy-Loading von Applikationsbestandteilen ... 622
15.5 ... entryComponents: dynamisch geladene Komponenten registrieren ... 626
15.6 ... Zusammenfassung und Ausblick ... 627

16. Der Angular-Template-Compiler, Ahead-of-time Compilation und Tree-Shaking ... 629

16.1 ... Grundlagen zum Angular-Template-Compiler ... 630
16.2 ... Der Ahead-of-time-Compilation-Modus: Leistungsschub für Ihre Anwendung ... 632
16.3 ... Tree-Shaking der Anwendung mit Rollup ... 634
16.4 ... Implementierungsregeln beim Einsatz von AOT ... 637
16.5 ... Zusammenfassung und Ausblick ... 640

17. Internationalisierung: mehrsprachige Angular-Anwendungen implementieren ... 643

17.1 ... Die Grundlagen des i18n-Frameworks ... 644
17.2 ... ng-xi18n: automatische Generierung der Message-Datei ... 648
17.3 ... Description und Meaning: Metadaten für Übersetzer übergeben ... 652
17.4 ... Weitere Übersetzungstechniken ... 653
17.5 ... Pluralisierung und geschlechterspezifische Texte ... 655
17.6 ... Statisch übersetzte Applikationen im AOT-Modus generieren ... 662
17.7 ... Zusammenfassung und Ausblick ... 666

18. Das Animation-Framework: Angular-Anwendungen animieren ... 669

18.1 ... Die erste Animation: Grundlagen zum Animation-Framework ... 670
18.2 ... void und *: spezielle States zum Hinzufügen und Entfernen von DOM-Elementen ... 674
18.3 ... Animationen in Verbindung mit automatisch berechneten Eigenschaften ... 677
18.4 ... Animation-Lifecycles: auf den Start und das Ende von Animationen reagieren ... 679
18.5 ... Keyframes: Definition von komplexen, mehrstufigen Animationen ... 680
18.6 ... Styling von Komponenten, die in Animationen verwendet werden ... 682
18.7 ... Groups und Sequences: mehrere Animationen kombinieren ... 683
18.8 ... Querying: komplexe Komponenten animieren ... 686
18.9 ... Staggering: ausgefeilte Listenanimationen definieren ... 690
18.10 ... Animation von Routing-Vorgängen ... 692
18.11 ... Zusammenfassung und Ausblick ... 697

19. Vollendet in Form und Funktion: Material Design und Angular Material ... 699

19.1 ... Material Design ... 700
19.2 ... Angular Material ... 716
19.3 ... Zusammenfassung ... 762

20. NPM-Libraries und Mono-Repos: Funktionalität in Bibliotheken auslagern und per NPM veröffentlichen ... 765

20.1 ... Das Angular-CLI Projekt einrichten ... 766
20.2 ... Die generierte Bibliothek im Detail ... 769
20.3 ... Die Bibliothek kompilieren und im Demo-Projekt einbinden ... 773
20.4 ... Der Mono-Repo-Ansatz für die Entwicklung von mehreren Webapplikationen ... 776
20.5 ... Die Bibliothek über npm veröffentlichen ... 780
20.6 ... Best Practices für die Implementierung von stylebaren Komponenten ... 787
20.7 ... Zusammenfassung und Ausblick ... 792

21. Angular-Elements: Angular-Komponenten als WebComponent bereitstellen ... 795

21.1 ... Einführung in Custom-Elements und Angular-Elements ... 796
21.2 ... Angular-Komponenten als WebComponents bereitstellen ... 797
21.3 ... Zoneless-Applications: Angular-Anwendungen unabhängig von Zone.js machen ... 806
21.4 ... Den Build für die WebComponent-Auslieferung optimieren ... 808
21.5 ... Die WebComponent in einem Angular-Projekt verwenden ... 810
21.6 ... Die WebComponent in einem Vue-Projekt verwenden ... 812
21.7 ... Zusammenfassung und Ausblick ... 816

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

22.1 ... Einführung in Server-Side Rendering (SSR): Grundlagen und Vorteile ... 819
22.2 ... Das Angular-Projekt für das Server-Side Rendering vorbereiten ... 822
22.3 ... isPlatformServer und isPlatformBrowser: Wo bin ich gerade? ... 833
22.4 ... Die State-Transfer-API: geladene Daten vom Server auf den Client transferieren ... 834
22.5 ... Title-Service und Meta-Service: Suchmaschinen-Optimierung und Einbindung in Social-Media-Seiten leicht gemacht ... 838
22.6 ... Notwendige Anpassungen am Project-Manager-Code: Stolperfallen und alternative Lösungsansätze beim Server-Side Rendering ... 842
22.7 ... Die Anwendung in der Cloud deployen ... 846
22.8 ... Zusammenfassung ... 856
22.9 ... Schlusswort ... 857

Anhang ... 859

A ... ECMAScript 2015 (and beyond) ... 859
B ... Typsicheres JavaScript mit TypeScript ... 917

Index ... 967