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
- Cover
- Über den Autor
- Titel
- Impressum
- Vorwort
- Aktualisierungen in der zweiten Auflage
- Inhaltsverzeichnis
-
I Einführung
- 1 Schnellstart
- 1.1 Das HTML-Grundgerüst
- 1.2 Die Startdatei für das Bootstrapping
- 1.3 Das zentrale Angular-Modul
- 1.4 Die erste Komponente
- 2 Haben Sie alles, was Sie benötigen?
- 2.1 Visual Studio Code
- 2.2 Google Chrome mit Augury
- 2.3 Paketverwaltung mit Node.js und NPM
- 2.4 Codebeispiele in diesem Buch
- 3 Angular CLI: der Codegenerator für unser Projekt
- 3.1 Das offizielle Tool für Angular
- 3.2 Installation
- 3.3 Die wichtigsten Befehle
-
II TypeScript
- 4 Einführung in TypeScript
- 4.1 Was ist TypeScript und wie setzen wir es ein?
- 4.2 Variablen: const, let und var
- 4.3 Die wichtigsten Basistypen
- 4.4 Klassen
- 4.5 Interfaces
- 4.6 Weitere Features von TypeScript und ES2015
- 4.6.1 Template-Strings
- 4.6.2 Arrow-Funktionen/Lambda-Ausdrücke
- 4.6.3 Spread-Operator und Rest-Syntax
- 4.6.4 Union Types
- 4.6.5 Destrukturierende Zuweisungen
- 4.7 Decorators
-
III BookMonkey 3: Schritt für Schritt zur App
- 5 Projekt- und Prozessvorstellung
- 5.1 Unser Projekt: BookMonkey
- 5.2 Projekt mit Angular CLI initialisieren
- 5.3 Style-Framework Semantic UI einbinden
- 6 Komponenten & Template-Syntax: Iteration I
- 6.1 Komponenten: die Grundbausteine der Anwendung
- 6.1.1 Komponenten
- 6.1.2 Komponenten in der Anwendung verwenden
- 6.1.3 Template-Syntax
- 6.1.4 Den BookMonkey erstellen
- 6.2 Property Bindings: mit Komponenten kommunizieren
- 6.2.1 Komponenten verschachteln
- 6.2.2 Eingehender Datenfluss mit Property Bindings
- 6.2.3 Andere Arten von Property Bindings
- 6.2.4 DOM-Propertys in Komponenten auslesen
- 6.2.5 Den BookMonkey erweitern
- 6.3 Event Bindings: auf Ereignisse in Komponenten reagieren
- 6.3.1 Native DOM-Events
- 6.3.2 Eigene Events definieren
- 6.3.3 Den BookMonkey erweitern
- 7 Powertipp: Styleguide
- 8 Services & Routing: Iteration II
- 8.1 Dependency Injection: Code in Services auslagern
- 8.1.1 Abhängigkeiten anfordern
- 8.1.2 Services in Angular
- 8.1.3 Abhängigkeiten registrieren
- 8.1.4 Abhängigkeiten ersetzen
- 8.1.5 Abhängigkeiten anfordern mit @Inject()
- 8.1.6 Eigene Tokens definieren mit InjectionToken
- 8.1.7 Multiprovider: mehrere Abhängigkeiten im selben Token
- 8.1.8 Zirkuläre Abhängigkeiten auflösen mit forwardRef
- 8.1.9 Provider in Komponenten registrieren
- 8.1.10 Den BookMonkey erweitern
- 8.2 Routing: durch die Anwendung navigieren
- 8.2.1 Routen konfigurieren
- 8.2.2 Routing-Modul einbauen
- 8.2.3 Komponenten anzeigen
- 8.2.4 Root-Route
- 8.2.5 Routen verlinken
- 8.2.6 Routenparameter
- 8.2.7 Verschachtelung von Routen
- 8.2.8 Routenweiterleitung
- 8.2.9 Aktive Links stylen
- 8.2.10 Route programmatisch wechseln
- 8.2.11 Den BookMonkey erweitern
- 9 Powertipp: Chrome Developer Tools
- 10 HTTP & reaktive Programmierung: Iteration III
- 10.1 HTTP-Kommunikation: ein Server-Backend anbinden
- 10.1.1 Modul einbinden
- 10.1.2 Requests mit dem HttpClient durchführen
- 10.1.3 Optionen für den HttpClient
- 10.1.4 Den BookMonkey erweitern
- 10.2 Reaktive Programmierung mit RxJS
- 10.2.1 Alles ist ein Datenstrom
- 10.2.2 Observables sind Funktionen
- 10.2.3 Das Observable aus RxJS
- 10.2.4 Observables abonnieren
- 10.2.5 Observables erzeugen
- 10.2.6 Operatoren: Datenströme modellieren
- 10.2.7 Heiße Observables, Multicasting und Subjects
- 10.2.8 Subscriptions verwalten & Memory Leaks vermeiden
- 10.2.9 Flattening-Strategien für Higher-Order Observables
- 10.2.10 Den BookMonkey erweitern: Daten vom Server typisieren und umwandeln
- 10.2.11 Den BookMonkey erweitern: Fehlerbehandlung
- 10.2.12 Den BookMonkey erweitern: Typeahead-Suche
- 10.3 Interceptoren: HTTP-Requests abfangen und transformieren
- 10.3.1 Warum HTTP-Interceptoren nutzen?
- 10.3.2 Funktionsweise der Interceptoren
- 10.3.3 Interceptoren anlegen
- 10.3.4 Interceptoren einbinden
- 10.3.5 Den BookMonkey erweitern
- 11 Powertipp: Augury
- 12 Formularverarbeitung & Validierung: Iteration IV
- 12.1 Angulars Ansätze für Formulare
- 12.2 Template-Driven Forms
- 12.2.1 FormsModule einbinden
- 12.2.2 Datenmodell in der Komponente
- 12.2.3 Template mit Two-Way Binding und ngModel
- 12.2.4 Formularzustand verarbeiten
- 12.2.5 Eingaben validieren
- 12.2.6 Formular abschicken
- 12.2.7 Formular zurücksetzen
- 12.2.8 Den BookMonkey erweitern
- 12.3 Reactive Forms
- 12.3.1 Warum ein zweiter Ansatz für Formulare?
- 12.3.2 Modul einbinden
- 12.3.3 Formularmodell in der Komponente
- 12.3.4 Template mit dem Modell verknüpfen
- 12.3.5 Formularzustand verarbeiten
- 12.3.6 Eingebaute Validatoren nutzen
- 12.3.7 Formular abschicken
- 12.3.8 Formular zurücksetzen
- 12.3.9 Formularwerte setzen
- 12.3.10 FormBuilder verwenden
- 12.3.11 Änderungen überwachen
- 12.3.12 Den BookMonkey erweitern
- 12.4 Eigene Validatoren entwickeln
- 12.4.1 Validatoren für einzelne Formularfelder
- 12.4.2 Validatoren für Formulargruppen und -Arrays
- 12.4.3 Asynchrone Validatoren
- 12.4.4 Den BookMonkey erweitern
- 12.5 Welcher Ansatz ist der richtige?
- 13 Pipes & Direktiven: Iteration V
- 13.1 Pipes: Daten im Template formatieren
- 13.1.1 Pipes verwenden
- 13.1.2 Die Sprache fest einstellen
- 13.1.3 Eingebaute Pipes für den sofortigen Einsatz
- 13.1.4 Eigene Pipes entwickeln
- 13.1.5 Pipes in Komponenten nutzen
- 13.1.6 Den BookMonkey erweitern: Datum formatieren mit der DatePipe
- 13.1.7 Den BookMonkey erweitern: Observable mit der AsyncPipe auflösen
- 13.1.8 Den BookMonkey erweitern: eigene Pipe für die ISBN implementieren
- 13.2 Direktiven: das Vokabular von HTML erweitern
- 13.2.1 Was sind Direktiven?
- 13.2.2 Eigene Direktiven entwickeln
- 13.2.3 Attributdirektiven
- 13.2.4 Strukturdirektiven
- 13.2.5 Den BookMonkey erweitern: Attributdirektive für vergrößerte Darstellung
- 13.2.6 Den BookMonkey erweitern: Strukturdirektive für zeitverzögerte Sterne
- 14 Module & fortgeschrittenes Routing: Iteration VI
- 14.1 Die Anwendung modularisieren: Das Modulkonzept von Angular
- 14.1.1 Module in Angular
- 14.1.2 Grundaufbau eines Moduls
- 14.1.3 Bestandteile eines Moduls deklarieren
- 14.1.4 Anwendung in Feature-Module aufteilen
- 14.1.5 Aus Modulen exportieren: Shared Module
- 14.1.6 Den BookMonkey erweitern
- 14.2 Lazy Loading: Angular-Module asynchron laden
- 14.2.1 Warum Module asynchron laden?
- 14.2.2 Lazy Loading verwenden
- 14.2.3 Module asynchron vorladen: Preloading
- 14.2.4 Den BookMonkey erweitern
- 14.3 Guards: Routen absichern
- 14.3.1 Grundlagen zu Guards
- 14.3.2 Guards implementieren
- 14.3.3 Guards verwenden
- 14.3.4 Den BookMonkey erweitern
- 14.4 Routing: Wie geht’s weiter?
- 14.4.1 Resolver: asynchrone Daten beim Routing vorladen
- 14.4.2 Mehrere RouterOutlets verwenden
- 15 Internationalisierung: Iteration VII
- 15.1 i18n: mehrere Sprachen und Kulturen anbieten
- 15.1.1 Was bedeutet Internationalisierung?
- 15.1.2 Eingebaute Pipes mehrsprachig verwenden
- 15.1.3 Texte in den Templates übersetzen
- 15.1.4 Nachrichten mit dem i18n-Attribut markieren
- 15.1.5 Nachrichten extrahieren und übersetzen
- 15.1.6 Feste IDs vergeben
- 15.1.7 Die App für Übersetzungen konfigurieren
- 15.1.8 Den BookMonkey erweitern
- 16 Powertipp: POEditor
- 17 Qualität fördern mit Softwaretests
- 17.1 Softwaretests
- 17.1.1 Testabdeckung: Was sollte man testen?
- 17.1.2 Testart: Wie sollte man testen?
- 17.1.3 Test-Framework Jasmine
- 17.1.4 »Arrange, Act, Assert« mit Jasmine
- 17.1.5 Test-Runner Karma
- 17.1.6 E2E-Test-Runner Protractor
- 17.1.7 Weitere Frameworks
- 17.2 Tests mit Karma
- 17.2.1 TestBed: die Testbibliothek von Angular
- 17.2.2 Isolierte Unit-Tests: Services testen
- 17.2.3 Isolierte Unit-Tests: Pipes testen
- 17.2.4 Isolierte Unit-Tests: Komponenten testen
- 17.2.5 Shallow Unit-Tests: einzelne Komponenten testen
- 17.2.6 Integrationstests: mehrere Komponenten testen
- 17.2.7 Abhängigkeiten durch Stubs ersetzen
- 17.2.8 Abhängigkeiten durch Mocks ersetzen
- 17.2.9 Leere Komponenten als Stubs oder Mocks einsetzen
- 17.2.10 HTTP-Requests testen
- 17.2.11 Komponenten mit Routen testen
- 17.2.12 Asynchronen Code testen
- 17.3 Tests mit Protractor
- 17.3.1 Auf die Balance kommt es an
- 17.3.2 Protractor verwenden
- 17.3.3 Elemente selektieren: Locators
- 17.3.4 Aktionen durchführen
- 17.3.5 Asynchron mit Warteschlange
- 17.3.6 Redundanz durch Page Objects vermeiden
- 17.3.7 Eine Angular-Anwendung testen
-
IV Das Projekt ausliefern: Deployment
- 18 Das Projekt ausliefern: Deployment
- 18.1 Umgebungen konfigurieren
- 18.1.1 Abhängigkeit zur Umgebung vermeiden
- 18.1.2 Konfigurationen und Umgebungen am Beispiel: BookMonkey
- 18.2 Produktivmodus aktivieren
- 18.3 Build erzeugen
- 18.4 Die Templates kompilieren
- 18.4.1 Just-in-Time-Kompilierung (JIT)
- 18.4.2 Ahead-of-Time-Kompilierung (AOT)
- 18.5 Webserver konfigurieren und die Anwendung ausliefern
- 18.6 Ausblick: Automatisches Deployment
- 18.7 Ausblick: Deployment mit Docker
-
V Weiterführende Themen
- 19 Server-Side Rendering mit Angular Universal
- 19.1 Single-Page-Anwendungen, Suchmaschinen und Start-Performance
- 19.2 Dynamisches Server-Side Rendering
- 19.3 Statisches Pre-Rendering
- 19.4 Wann setze ich serverseitiges Rendering ein?
- 20 State Management mit Redux
- 20.1 Ein Modell für zentrales State Management
- 20.2 Das Architekturmodell Redux
- 20.3 Redux mit NgRx
- 20.3.1 Projekt vorbereiten
- 20.3.2 Store einrichten
- 20.3.3 Schematics nutzen
- 20.3.4 Grundstruktur des Stores
- 20.3.5 Feature anlegen
- 20.3.6 Struktur des Feature-States definieren
- 20.3.7 Actions: Kommunikation mit dem Store
- 20.3.8 Dispatch: Actions in den Store senden
- 20.3.9 Reducer: den State aktualisieren
- 20.3.10 Selektoren: Daten aus dem State lesen
- 20.3.11 Effects: Seiteneffekte ausführen
- 20.4 Redux und NgRx: Wie geht’s weiter?
- 20.4.1 Routing
- 20.4.2 Entity Management
- 20.4.3 Testing
- 21 Powertipp: Redux DevTools
- 22 NativeScript: mobile Anwendungen entwickeln
- 22.1 Mobile Apps entwickeln
- 22.2 Was ist NativeScript?
- 22.3 Warum NativeScript?
- 22.4 Hinter den Kulissen
- 22.5 Plattformspezifischer Code
- 22.6 Widgets und Layouts
- 22.7 Styling
- 22.8 NativeScript und Angular
- 22.9 Angular als Native App
- 22.10 NativeScript installieren
- 22.11 Ein Shared Project erstellen mit der Angular CLI
- 22.12 Den BookMonkey mit NativeScript umsetzen
- 22.12.1 Das Projekt mit den NativeScript Schematics erweitern
- 22.12.2 Die Anwendung starten
- 22.12.3 Das angepasste Bootstrapping für NativeScript
- 22.12.4 Das Root-Modul anpassen
- 22.12.5 Das Routing anpassen
- 22.12.6 Die Templates der Komponenten für NativeScript anlegen
- 23 Powertipp: Android-Emulator Genymotion
- 24 Wissenswertes
- 24.1 Container und Presentational Components
- 24.2 Else-Block für die Direktive ngIf
- 24.3 TrackBy-Funktion für die Direktive ngFor
- 24.4 Schematics: Codegenerierung mit der Angular CLI
- 24.5 Angular-Anwendungen dokumentieren und analysieren
- 24.6 Angular Material und weitere UI-Komponentensammlungen
- 24.6.1 Angular Material
- 24.6.2 ng-bootstrap & ngx-bootstrap
- 24.6.3 PrimeNG
- 24.6.4 Kendo UI
- 24.7 Lifecycle-Hooks
- 24.8 Content Projection: Inhalt des Host-Elements verwenden
- 24.9 Change Detection
- 24.10 Plattformen und Renderer
- 24.11 Angular updaten
- 24.12 Upgrade von AngularJS
- VI Anhang
- Fußnoten
- Index
- Weiterführende Literatur
- Nachwort
Product information
- Title: Angular, 2nd Edition
- Author(s):
- Release date: June 2019
- Publisher(s): dpunkt
- ISBN: 9783864906466
You might also like
book
Angular , 2nd Edition
Angular ist ein äußerst populäres Open-Source-Framework von Google, das Webentwickler wirkungsvoll dabei unterstützt, die Komplexität moderner …
book
Angular, 4th Edition
Das groÃ??e Praxisbuch zu Angular!Mit einem anspruchsvollen Beispielprojekt fÃ?¼hren die Autoren Sie durch die Welt von …
book
Angular
Dieses Buch vermittelt einen Schnelleinstieg in Angular ab Version 4 und führt Sie anhand eines anspruchsvollen …
book
Angular 2 Components
A quick and concise guide to Angular 2 Components About This Book First look to the …