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.

Formulare, Routing, HTTP-Anbindungen, Animationen, i18n, reaktive Anwendungen, Performance-Tuning

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 ......