Angular, 2nd Edition

Angular, 2nd Edition

by Ferdinand Malcher, Danny Koppenhagen, Johannes Hoppe
Released June 2019
Publisher(s): dpunkt
ISBN: 9783864906466

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Lernen Sie die Grundlagen von Angular mit diesem Praxisbuch!

Die Autoren führen Sie mit einem anspruchsvollen Beispielprojekt durch die Welt von Angular. Lernen Sie Schritt für Schritt, wie Sie strukturierte und modulare Single-Page-Anwendungen entwickeln.Nach der erfolgreichen ersten Auflage wurde dieses Buch grundlegend aktualisiert und erweitert:

• Durchgängig aktualisiert auf Angular 7 und neuere Versionen• Redux mit Reactive Extensions for Angular (NgRx)• Ausführliches Kapitel zu RxJS und Observables• Server-Side Rendering mit Angular Universal• HTTP-Interceptoren• Kompakter Schnelleinstieg in Angular mit Stackblitz

Praktisch: Der Programmcode zu jeder einzelnen Entwicklungsphase ist auf GitHub verfügbar. So können Sie alle Schritte gut nachvollziehen und auch Teile überspringen.

Die Autoren Ferdinand Malcher, Johannes Hoppe und Danny Koppenhagen sind erfahrene Workshopleiter und internationale Konferenzsprecher. In diesem praxisorientierten Buch vermitteln sie die Erkenntnisse und Best Practices aus über 3 Jahren täglicher Arbeit mit Angular. Neben den Grundlagen werden auch fortgeschrittene Themen abgedeckt.

Weitere behandelte Themen sind unter anderem:• Testing mit Jasmine, Karma und Protractor• Angular CLI• Komponenten, Pipes und Direktiven• Modulsystem• Routing• Formularverarbeitung• Dependency Injection und Services• Ahead-of-Time-Kompilierung (AOT)• Deployment• Internationalisierung (i18n)• Mobile Anwendungen mit NativeScript

Das Buch setzt lediglich Vorkenntnisse in JavaScript, HTML und CSS voraus. Wer noch nicht mit TypeScript vertraut ist, findet in diesem Buch eine kompakte Einführung.

Nach der Lektüre sind Sie für den Projektalltag mit Angular gewappnet und können robuste Webanwendungen mit dem Framework entwickeln. Auf der Website zum Buch werden außerdem regelmäßig Aktualisierungen und Neuigkeiten rund um Angular veröffentlicht.

Table of contents

  1. Cover
  2. Über den Autor
  3. Titel
  4. Impressum
  5. Vorwort
  6. Aktualisierungen in der zweiten Auflage
  7. Inhaltsverzeichnis
  8. I Einführung
    1. 1 Schnellstart
    2. 1.1 Das HTML-Grundgerüst
    3. 1.2 Die Startdatei für das Bootstrapping
    4. 1.3 Das zentrale Angular-Modul
    5. 1.4 Die erste Komponente
    6. 2 Haben Sie alles, was Sie benötigen?
    7. 2.1 Visual Studio Code
    8. 2.2 Google Chrome mit Augury
    9. 2.3 Paketverwaltung mit Node.js und NPM
    10. 2.4 Codebeispiele in diesem Buch
    11. 3 Angular CLI: der Codegenerator für unser Projekt
    12. 3.1 Das offizielle Tool für Angular
    13. 3.2 Installation
    14. 3.3 Die wichtigsten Befehle
  9. II TypeScript
    1. 4 Einführung in TypeScript
    2. 4.1 Was ist TypeScript und wie setzen wir es ein?
    3. 4.2 Variablen: const, let und var
    4. 4.3 Die wichtigsten Basistypen
    5. 4.4 Klassen
    6. 4.5 Interfaces
    7. 4.6 Weitere Features von TypeScript und ES2015
    8. 4.6.1 Template-Strings
    9. 4.6.2 Arrow-Funktionen/Lambda-Ausdrücke
    10. 4.6.3 Spread-Operator und Rest-Syntax
    11. 4.6.4 Union Types
    12. 4.6.5 Destrukturierende Zuweisungen
    13. 4.7 Decorators
  10. III BookMonkey 3: Schritt für Schritt zur App
    1. 5 Projekt- und Prozessvorstellung
    2. 5.1 Unser Projekt: BookMonkey
    3. 5.2 Projekt mit Angular CLI initialisieren
    4. 5.3 Style-Framework Semantic UI einbinden
    5. 6 Komponenten & Template-Syntax: Iteration I
    6. 6.1 Komponenten: die Grundbausteine der Anwendung
    7. 6.1.1 Komponenten
    8. 6.1.2 Komponenten in der Anwendung verwenden
    9. 6.1.3 Template-Syntax
    10. 6.1.4 Den BookMonkey erstellen
    11. 6.2 Property Bindings: mit Komponenten kommunizieren
    12. 6.2.1 Komponenten verschachteln
    13. 6.2.2 Eingehender Datenfluss mit Property Bindings
    14. 6.2.3 Andere Arten von Property Bindings
    15. 6.2.4 DOM-Propertys in Komponenten auslesen
    16. 6.2.5 Den BookMonkey erweitern
    17. 6.3 Event Bindings: auf Ereignisse in Komponenten reagieren
    18. 6.3.1 Native DOM-Events
    19. 6.3.2 Eigene Events definieren
    20. 6.3.3 Den BookMonkey erweitern
    21. 7 Powertipp: Styleguide
    22. 8 Services & Routing: Iteration II
    23. 8.1 Dependency Injection: Code in Services auslagern
    24. 8.1.1 Abhängigkeiten anfordern
    25. 8.1.2 Services in Angular
    26. 8.1.3 Abhängigkeiten registrieren
    27. 8.1.4 Abhängigkeiten ersetzen
    28. 8.1.5 Abhängigkeiten anfordern mit @Inject()
    29. 8.1.6 Eigene Tokens definieren mit InjectionToken
    30. 8.1.7 Multiprovider: mehrere Abhängigkeiten im selben Token
    31. 8.1.8 Zirkuläre Abhängigkeiten auflösen mit forwardRef
    32. 8.1.9 Provider in Komponenten registrieren
    33. 8.1.10 Den BookMonkey erweitern
    34. 8.2 Routing: durch die Anwendung navigieren
    35. 8.2.1 Routen konfigurieren
    36. 8.2.2 Routing-Modul einbauen
    37. 8.2.3 Komponenten anzeigen
    38. 8.2.4 Root-Route
    39. 8.2.5 Routen verlinken
    40. 8.2.6 Routenparameter
    41. 8.2.7 Verschachtelung von Routen
    42. 8.2.8 Routenweiterleitung
    43. 8.2.9 Aktive Links stylen
    44. 8.2.10 Route programmatisch wechseln
    45. 8.2.11 Den BookMonkey erweitern
    46. 9 Powertipp: Chrome Developer Tools
    47. 10 HTTP & reaktive Programmierung: Iteration III
    48. 10.1 HTTP-Kommunikation: ein Server-Backend anbinden
    49. 10.1.1 Modul einbinden
    50. 10.1.2 Requests mit dem HttpClient durchführen
    51. 10.1.3 Optionen für den HttpClient
    52. 10.1.4 Den BookMonkey erweitern
    53. 10.2 Reaktive Programmierung mit RxJS
    54. 10.2.1 Alles ist ein Datenstrom
    55. 10.2.2 Observables sind Funktionen
    56. 10.2.3 Das Observable aus RxJS
    57. 10.2.4 Observables abonnieren
    58. 10.2.5 Observables erzeugen
    59. 10.2.6 Operatoren: Datenströme modellieren
    60. 10.2.7 Heiße Observables, Multicasting und Subjects
    61. 10.2.8 Subscriptions verwalten & Memory Leaks vermeiden
    62. 10.2.9 Flattening-Strategien für Higher-Order Observables
    63. 10.2.10 Den BookMonkey erweitern: Daten vom Server typisieren und umwandeln
    64. 10.2.11 Den BookMonkey erweitern: Fehlerbehandlung
    65. 10.2.12 Den BookMonkey erweitern: Typeahead-Suche
    66. 10.3 Interceptoren: HTTP-Requests abfangen und transformieren
    67. 10.3.1 Warum HTTP-Interceptoren nutzen?
    68. 10.3.2 Funktionsweise der Interceptoren
    69. 10.3.3 Interceptoren anlegen
    70. 10.3.4 Interceptoren einbinden
    71. 10.3.5 Den BookMonkey erweitern
    72. 11 Powertipp: Augury
    73. 12 Formularverarbeitung & Validierung: Iteration IV
    74. 12.1 Angulars Ansätze für Formulare
    75. 12.2 Template-Driven Forms
    76. 12.2.1 FormsModule einbinden
    77. 12.2.2 Datenmodell in der Komponente
    78. 12.2.3 Template mit Two-Way Binding und ngModel
    79. 12.2.4 Formularzustand verarbeiten
    80. 12.2.5 Eingaben validieren
    81. 12.2.6 Formular abschicken
    82. 12.2.7 Formular zurücksetzen
    83. 12.2.8 Den BookMonkey erweitern
    84. 12.3 Reactive Forms
    85. 12.3.1 Warum ein zweiter Ansatz für Formulare?
    86. 12.3.2 Modul einbinden
    87. 12.3.3 Formularmodell in der Komponente
    88. 12.3.4 Template mit dem Modell verknüpfen
    89. 12.3.5 Formularzustand verarbeiten
    90. 12.3.6 Eingebaute Validatoren nutzen
    91. 12.3.7 Formular abschicken
    92. 12.3.8 Formular zurücksetzen
    93. 12.3.9 Formularwerte setzen
    94. 12.3.10 FormBuilder verwenden
    95. 12.3.11 Änderungen überwachen
    96. 12.3.12 Den BookMonkey erweitern
    97. 12.4 Eigene Validatoren entwickeln
    98. 12.4.1 Validatoren für einzelne Formularfelder
    99. 12.4.2 Validatoren für Formulargruppen und -Arrays
    100. 12.4.3 Asynchrone Validatoren
    101. 12.4.4 Den BookMonkey erweitern
    102. 12.5 Welcher Ansatz ist der richtige?
    103. 13 Pipes & Direktiven: Iteration V
    104. 13.1 Pipes: Daten im Template formatieren
    105. 13.1.1 Pipes verwenden
    106. 13.1.2 Die Sprache fest einstellen
    107. 13.1.3 Eingebaute Pipes für den sofortigen Einsatz
    108. 13.1.4 Eigene Pipes entwickeln
    109. 13.1.5 Pipes in Komponenten nutzen
    110. 13.1.6 Den BookMonkey erweitern: Datum formatieren mit der DatePipe
    111. 13.1.7 Den BookMonkey erweitern: Observable mit der AsyncPipe auflösen
    112. 13.1.8 Den BookMonkey erweitern: eigene Pipe für die ISBN implementieren
    113. 13.2 Direktiven: das Vokabular von HTML erweitern
    114. 13.2.1 Was sind Direktiven?
    115. 13.2.2 Eigene Direktiven entwickeln
    116. 13.2.3 Attributdirektiven
    117. 13.2.4 Strukturdirektiven
    118. 13.2.5 Den BookMonkey erweitern: Attributdirektive für vergrößerte Darstellung
    119. 13.2.6 Den BookMonkey erweitern: Strukturdirektive für zeitverzögerte Sterne
    120. 14 Module & fortgeschrittenes Routing: Iteration VI
    121. 14.1 Die Anwendung modularisieren: Das Modulkonzept von Angular
    122. 14.1.1 Module in Angular
    123. 14.1.2 Grundaufbau eines Moduls
    124. 14.1.3 Bestandteile eines Moduls deklarieren
    125. 14.1.4 Anwendung in Feature-Module aufteilen
    126. 14.1.5 Aus Modulen exportieren: Shared Module
    127. 14.1.6 Den BookMonkey erweitern
    128. 14.2 Lazy Loading: Angular-Module asynchron laden
    129. 14.2.1 Warum Module asynchron laden?
    130. 14.2.2 Lazy Loading verwenden
    131. 14.2.3 Module asynchron vorladen: Preloading
    132. 14.2.4 Den BookMonkey erweitern
    133. 14.3 Guards: Routen absichern
    134. 14.3.1 Grundlagen zu Guards
    135. 14.3.2 Guards implementieren
    136. 14.3.3 Guards verwenden
    137. 14.3.4 Den BookMonkey erweitern
    138. 14.4 Routing: Wie geht’s weiter?
    139. 14.4.1 Resolver: asynchrone Daten beim Routing vorladen
    140. 14.4.2 Mehrere RouterOutlets verwenden
    141. 15 Internationalisierung: Iteration VII
    142. 15.1 i18n: mehrere Sprachen und Kulturen anbieten
    143. 15.1.1 Was bedeutet Internationalisierung?
    144. 15.1.2 Eingebaute Pipes mehrsprachig verwenden
    145. 15.1.3 Texte in den Templates übersetzen
    146. 15.1.4 Nachrichten mit dem i18n-Attribut markieren
    147. 15.1.5 Nachrichten extrahieren und übersetzen
    148. 15.1.6 Feste IDs vergeben
    149. 15.1.7 Die App für Übersetzungen konfigurieren
    150. 15.1.8 Den BookMonkey erweitern
    151. 16 Powertipp: POEditor
    152. 17 Qualität fördern mit Softwaretests
    153. 17.1 Softwaretests
    154. 17.1.1 Testabdeckung: Was sollte man testen?
    155. 17.1.2 Testart: Wie sollte man testen?
    156. 17.1.3 Test-Framework Jasmine
    157. 17.1.4 »Arrange, Act, Assert« mit Jasmine
    158. 17.1.5 Test-Runner Karma
    159. 17.1.6 E2E-Test-Runner Protractor
    160. 17.1.7 Weitere Frameworks
    161. 17.2 Tests mit Karma
    162. 17.2.1 TestBed: die Testbibliothek von Angular
    163. 17.2.2 Isolierte Unit-Tests: Services testen
    164. 17.2.3 Isolierte Unit-Tests: Pipes testen
    165. 17.2.4 Isolierte Unit-Tests: Komponenten testen
    166. 17.2.5 Shallow Unit-Tests: einzelne Komponenten testen
    167. 17.2.6 Integrationstests: mehrere Komponenten testen
    168. 17.2.7 Abhängigkeiten durch Stubs ersetzen
    169. 17.2.8 Abhängigkeiten durch Mocks ersetzen
    170. 17.2.9 Leere Komponenten als Stubs oder Mocks einsetzen
    171. 17.2.10 HTTP-Requests testen
    172. 17.2.11 Komponenten mit Routen testen
    173. 17.2.12 Asynchronen Code testen
    174. 17.3 Tests mit Protractor
    175. 17.3.1 Auf die Balance kommt es an
    176. 17.3.2 Protractor verwenden
    177. 17.3.3 Elemente selektieren: Locators
    178. 17.3.4 Aktionen durchführen
    179. 17.3.5 Asynchron mit Warteschlange
    180. 17.3.6 Redundanz durch Page Objects vermeiden
    181. 17.3.7 Eine Angular-Anwendung testen
  11. IV Das Projekt ausliefern: Deployment
    1. 18 Das Projekt ausliefern: Deployment
    2. 18.1 Umgebungen konfigurieren
    3. 18.1.1 Abhängigkeit zur Umgebung vermeiden
    4. 18.1.2 Konfigurationen und Umgebungen am Beispiel: BookMonkey
    5. 18.2 Produktivmodus aktivieren
    6. 18.3 Build erzeugen
    7. 18.4 Die Templates kompilieren
    8. 18.4.1 Just-in-Time-Kompilierung (JIT)
    9. 18.4.2 Ahead-of-Time-Kompilierung (AOT)
    10. 18.5 Webserver konfigurieren und die Anwendung ausliefern
    11. 18.6 Ausblick: Automatisches Deployment
    12. 18.7 Ausblick: Deployment mit Docker
  12. V Weiterführende Themen
    1. 19 Server-Side Rendering mit Angular Universal
    2. 19.1 Single-Page-Anwendungen, Suchmaschinen und Start-Performance
    3. 19.2 Dynamisches Server-Side Rendering
    4. 19.3 Statisches Pre-Rendering
    5. 19.4 Wann setze ich serverseitiges Rendering ein?
    6. 20 State Management mit Redux
    7. 20.1 Ein Modell für zentrales State Management
    8. 20.2 Das Architekturmodell Redux
    9. 20.3 Redux mit NgRx
    10. 20.3.1 Projekt vorbereiten
    11. 20.3.2 Store einrichten
    12. 20.3.3 Schematics nutzen
    13. 20.3.4 Grundstruktur des Stores
    14. 20.3.5 Feature anlegen
    15. 20.3.6 Struktur des Feature-States definieren
    16. 20.3.7 Actions: Kommunikation mit dem Store
    17. 20.3.8 Dispatch: Actions in den Store senden
    18. 20.3.9 Reducer: den State aktualisieren
    19. 20.3.10 Selektoren: Daten aus dem State lesen
    20. 20.3.11 Effects: Seiteneffekte ausführen
    21. 20.4 Redux und NgRx: Wie geht’s weiter?
    22. 20.4.1 Routing
    23. 20.4.2 Entity Management
    24. 20.4.3 Testing
    25. 21 Powertipp: Redux DevTools
    26. 22 NativeScript: mobile Anwendungen entwickeln
    27. 22.1 Mobile Apps entwickeln
    28. 22.2 Was ist NativeScript?
    29. 22.3 Warum NativeScript?
    30. 22.4 Hinter den Kulissen
    31. 22.5 Plattformspezifischer Code
    32. 22.6 Widgets und Layouts
    33. 22.7 Styling
    34. 22.8 NativeScript und Angular
    35. 22.9 Angular als Native App
    36. 22.10 NativeScript installieren
    37. 22.11 Ein Shared Project erstellen mit der Angular CLI
    38. 22.12 Den BookMonkey mit NativeScript umsetzen
    39. 22.12.1 Das Projekt mit den NativeScript Schematics erweitern
    40. 22.12.2 Die Anwendung starten
    41. 22.12.3 Das angepasste Bootstrapping für NativeScript
    42. 22.12.4 Das Root-Modul anpassen
    43. 22.12.5 Das Routing anpassen
    44. 22.12.6 Die Templates der Komponenten für NativeScript anlegen
    45. 23 Powertipp: Android-Emulator Genymotion
    46. 24 Wissenswertes
    47. 24.1 Container und Presentational Components
    48. 24.2 Else-Block für die Direktive ngIf
    49. 24.3 TrackBy-Funktion für die Direktive ngFor
    50. 24.4 Schematics: Codegenerierung mit der Angular CLI
    51. 24.5 Angular-Anwendungen dokumentieren und analysieren
    52. 24.6 Angular Material und weitere UI-Komponentensammlungen
    53. 24.6.1 Angular Material
    54. 24.6.2 ng-bootstrap & ngx-bootstrap
    55. 24.6.3 PrimeNG
    56. 24.6.4 Kendo UI
    57. 24.7 Lifecycle-Hooks
    58. 24.8 Content Projection: Inhalt des Host-Elements verwenden
    59. 24.9 Change Detection
    60. 24.10 Plattformen und Renderer
    61. 24.11 Angular updaten
    62. 24.12 Upgrade von AngularJS
  13. VI Anhang
    1. A Befehle der Angular CLI
    2. B Operatoren von RxJS
    3. C Matcher von Jasmine
    4. D Abkürzungsverzeichnis
    5. E Linkliste
  14. Fußnoten
  15. Index
  16. Weiterführende Literatur
  17. Nachwort

Product information

  • Title: Angular, 2nd Edition
  • Author(s): Ferdinand Malcher, Danny Koppenhagen, Johannes Hoppe
  • Release date: June 2019
  • Publisher(s): dpunkt
  • ISBN: 9783864906466