Angular für Dummies

Nikolas Poniros ist Berater und Trainer für Webtechnologien in Darmstadt. Er arbeitet meistens im Frontend mit Angular und hin und wieder im Backend mit Node.js. In seiner Freizeit beschäftigt er sich mit neuen (Web-)Technologien.

• Über den Autor 7Einleitung 19Konventionen in diesem Buch 19Was Sie nicht lesenmüssen 19Törichte Annahmen über die Leser 20Wie dieses Buch aufgebaut ist 20Teil I: Die ersten Schritte 20Teil II: Mit dem Nutzer interagieren 20Teil III: Mit dem Server kommunizieren 20Teil IV: Routing 20Teil V: Die Anwendung testen 21Teil VI: Der Top-Ten-Teil 21Symbole, die in diesem Buch verwendet werden 21Wie es weitergeht 21Teil I Die Ersten Schritte 23Kapitel 1 Die Werkzeuge 25Die Entwicklungsumgebung 25Node.js und npm 26Texteditoren 28Der TypeScript-Compiler 29Kompilierfehler 30Compiler-Optionen 31TSLint, codelyzer und Prettier 33Das Hauptwerkzeug: Angular CLI 34Features von Angular CLI 34Projekt initialisieren 36Die Verzeichnisstruktur von Angular CLI 36Die Konfigurationsdatei von Angular CLI 39Die Anwendung bauen 41Die Beispielanwendung tritt auf 44Beispielanwendung: Umgebung einrichten 46Kapitel 2 Die erste Angular-Anwendung 49Die Bausteine einer Angular-Anwendung 49Angular-Module 50Angular-Module definieren 51Der NgModule-Decorator 52Arten von Angular-Modulen 53Hauptmodul 53Feature-Module 54Routing-Module 54Service-Module 55Widget-Module 55Komponenten 55Komponenten definieren 55Der Component-Decorator 57Das Template der Komponente 57Die Styles der Komponente 59Komponenten deklarieren 60Services – Ein Ort für die Logik 61Einen Service definieren 61Einen Service registrieren 62Einen Service nutzen 63Dependency Injection und Providers 64Hierarchische Injektoren 64Die Hauptdatei der Anwendung 66Beispielanwendung: Erste Schritte 68Service implementieren und registrieren 68Service nutzen 69Kapitel 3 Modularer Aufbau 71Der Komponentenbaum 71Komponenten und ihre Kinder 72Komponenten in ein Template einfügen 73Interaktion zwischen Komponenten 74Der Lebenszyklus einer Komponente 82Lifecycle-Hooks definieren 83Konstruktor 83ngOnChanges 83ngOnInit 85ngDoCheck 85ngAfterContentInit 85ngAfterContentChecked 85ngAfterViewInit 86ngAfterViewChecked 86ngOnDestroy 86Dumme und kluge Komponenten 86Dumme Komponenten 86Kluge Komponenten 87Vorteile dieser Aufteilung 87Beispielanwendung: Neue Komponenten 87Teil II Mit Dem Nutzer Interagieren 93Kapitel 4 Der Nutzer und was er sieht 95Daten anzeigen 95Listen anzeigen 95Daten vor dem Anzeigen transformieren 100Auf Ereignisse reagieren 104Parameter übergeben 105Pseudo-Ereignisse 107Das Aussehen verändern 107Die NgStyle-Direktive 107Die NgClass-Direktive 108Teile der Ansicht bedingt anzeigen 110Die NgIf-Direktive 110Die NgSwitch-Direktive 111Beispielanwendung: Daten anzeigen 112Kontaktlisten anzeigen 112Kontakte anzeigen 113Die Ansicht aufräumen 115Kapitel 5 Daten vom Nutzer bekommen 117Formulare in Angular 117Formulararten 118Voraussetzungen für die Nutzung von Formularen 119Ein einfaches Formular implementieren 119Template-gesteuerte Formulare implementieren 120Textfelder in Template-gesteuerte Formularen 121Zahlenfelder in Template-gesteuerten Formularen 123Kontrollkästchen in Template-gesteuerten Formularen 124Optionsschaltflächen in Template-gesteuerten Formularen 125Auswahlfelder in Template-gesteuerte Formularen 126Komplexere Formulare implementieren 127Modell-gesteuerte Formulare implementieren 128Eingabefelder in Modell-gesteuerten Formularen 129Auf Datenänderungen im Formular reagieren 131Dynamische Formulare 134Beispielanwendung: Daten bekommen 136Formular für die Kontaktlisten 137Das Formular nutzen 138Das Formular anzeigen 139Kapitel 6 Nutzereingaben validieren 141Grundlagen 141Validierungsfunktionen 142Validierungsdirektiven 143Zustände von Eingabefeldern 144Zustände von Gruppen 146Validierung in Template-gesteuerten Formularen 147Validierungsdirektiven nutzen 147Den Zustand von Template-gesteuerten Formularen abfragen 148Validierung in Modell-gesteuerten Formularen 149Validierungsfunktionen nutzen 149Den Zustand von Modell-gesteuerten Formularen abfragen 151Validierungsfehler anzeigen 153Eigene Validierungsfunktionen 155Synchrone Validierungsfunktionen 155Asynchrone Validierungsfunktionen 156Gruppenvalidierung 158Beispielanwendung: Eingabe validieren 159Teil III Mit Dem Server Kommunizieren 161Kapitel 7 Grundlagen der Server-Kommunikation 163Webserver 163Reaktive Programmierung mit RxJS 165Observables 165Signale von Observables 166Observables erzeugen 167Methoden von Observables 168Operatoren für Observables 171Fehlerbehandlung 174Das HTTP-Modul 177Angular-Module im HTTP-Modul 177Hilfsklassen im HTTP-Modul 178Der HttpClient-Service 179Methoden des HttpClient-Services 179Optionen des HttpClient-Services 179Weitere Features des HttpClient-Services 180Beispielanwendung: API-Server 180Mit dem API-Server arbeiten 181API-Beschreibung 182Kapitel 8 Datenaustausch mit einem REST-Server 187Voraussetzungen 187Daten vom Server anfordern 188JSON-Daten anfordern 188Daten in einem anderen Format anfordern 190Daten an den Server schicken 191Daten hinzufügen 192Daten aktualisieren 193Daten löschen 195Anfrageparameter 195Auf die HttpResponse-Instanz zugreifen 196Eigene Headers definieren 198Fehlerbehandlung 199Fehlerarten 200Fehler in einem Service behandeln 201Fehler in einer Komponente behandeln 203Beispielanwendung: Datenaustausch 203Kontaktlisten anfordern 204Kontaktlisten hinzufügen 205Kontaktlisten aktualisieren 206Kontaktlisten löschen 207Fehlerbehandlung 208Teil IV Routing 209Kapitel 9 Routing: Grundlagen 211Was ist Routing? 211Der Angular-Router 212Das Angular-Router-Paket 212Routerkonfiguration 214Routingbaum und Zustand 216Routing-Module 217Routing-Modul für ein Feature-Modul 218Haupt-Routing-Modul 219Komponenten anzeigen 220Navigierenmit dem Angular-Router 221Absolute und relative Pfade 221Navigation im Template 223Navigation in der Klasse 224Parametrisierte Pfade 225Routing in der Beispielanwendung 227In Angular-Module aufteilen 227Routing implementieren 229Kapitel 10 Weitere Router-Features 231Verschachtelte Routes 231Verschachtelte Routes und RouterOutlets 232Vorteile von verschachtelten Routes 234Angular-Module nachladen 235Module zum Nachladen definieren 235Preloading 236Bedingte Navigation 237Guards definieren 238Guards nutzen 238canLoad-Guard 239canActivate-Guard 240canActivateChild-Guard 240canDeactivate-Guard 240Datenmit dem Router übergeben 241Statische Daten übergeben 241Dynamische Daten übergeben 243Navigationsereignisse 245Überblick über die Navigationsereignisse 245Auf Navigationsereignisse reagieren 246Umleitungen 247Umleitungen definieren 248Absolute und relative Umleitungen 248Beispielanwendung: Login 249Teil V Die Anwendung Testen 251Kapitel 11 Unit-Tests 253Was sind Unit-Tests? 253Jasmine 254Testaufbau 254Erwartungen definieren 256Test-Spione 257Asynchrone Tests 259Unit-Tests ausführen 260Angular-Test-Module definieren 262Services testen 264Bausteine mit Abhängigkeiten testen 266Tests mit dem HttpClient 268Komponenten testen 270Das DOM einer Komponente testen 271Verschachtelte Komponenten 274Die Beispielanwendung Unit-testen 275Kapitel 12 End-to-End-Tests 279Was sind End-to-End-Tests? 279Protractor 281Die Funktionsweise von Protractor 282Browserunterstützung 283Tests mit Protractor schreiben 283Das browser-Objekt 284Das by-Objekt 285Das element-Objekt 286Beispiel für einen End-to-End-Test 287Seitenobjekte 289End-to-End-Tests ausführen 290Timeouts 292Die Beispielanwendung testen 293Teil VI Der Top-Ten-Teil 295Kapitel 13 Zehn Angular-Bibliotheken 297Angular Material 297ng-bootstrap 297ngx-bootstrap 298PrimeNG 298NgRx 298ag-Grid 299NGX-Translate 300Augury 300Angular Universal 300Ionic 301Kapitel 14 (Nicht ganz) Zehn Angular-Informationsquellen 303Angular-Dokumentations-Webseite 303Angular-Blog 304Angular GitHub-Repository 304Gitter 304Stack Overflow 305Angular in Depth 305AngularJS.DE 305Angular University 306Awesome Angular 306Anhang A Einführung in TypeScript 307Basistypen 308Boolean 308Number 309String 309Arrays 310null und undefined 310Any 310Funktionen 311Optionale und Default-Parameter 312Pfeilfunktionen 313Interfaces 313Interfaces erweitern 314Optionale Eigenschaften/Methoden 315Klassen 315Klassen und Interfaces 316Sichtbarkeit von Eigenschaften und Methoden 317Statische Methoden 318Generische Typdefinitionen 319Stichwortverzeichnis 321