Angular E-Book

Ferdinand Malcher

• Herausgeber: dpunkt.verlag
• Kategorie: Wissenschaft und neue Technologien
• Serie: iX Edition
• Sprache: Deutsch
• Veröffentlichungsjahr: 2023

Seitenzahl: 1052

Beschreibung

Der bewährte Einstieg in Angular – gut erklärt und praxisnah Lernen Sie Angular mit diesem Praxisbuch! Sie werden von Ferdinand Malcher, Johannes Hoppe und Danny Koppenhagen anhand eines anspruchsvollen Beispielprojekts durch die Welt von Angular geführt und entwickeln Schritt für Schritt Ihre erste modulare Single-Page-Anwendung. Praktisch: Der Programmcode zu jeder einzelnen Entwicklungsphase ist online auf GitHub verfügbar. So können Sie alle Schritte gut nachvollziehen und in Ihrem eigenen Tempo bearbeiten. Die Autoren sind erfahrene Workshopleiter, Entwickler und internationale Konferenzsprecher. In diesem praktischen Nachschlagewerk vermitteln sie die Best Practices aus ihrer täglichen Arbeit mit Angular. Aufgrund ihres Engagements rund um das Buch und Angular wurden Ferdinand und Johannes als Google Developer Experts (GDE) ausgezeichnet. Aus dem Inhalt: - Reaktive Programmierung mit RxJS - State Management mit Redux und NgRx - Testing mit Jasmine und Karma - Routing, Guards und Modulsystem - HTTP und Interceptoren - Formularverarbeitung - Dependency Injection und Services - Internationalisierung (i18n) - Server-Side Rendering - Progressive Web Apps (PWA) - Web Components mit Angular Elements Das Buch setzt Vorkenntnisse in JavaScript, HTML und CSS voraus. Wer nicht mit TypeScript vertraut ist, findet hier eine kompakte Einführung. Auf der Website zum Buch werden außerdem regelmäßig Aktualisierungen und Neuigkeiten rund um Angular veröffentlicht. Neu in dieser Auflage - Vollständig überarbeitete und neu strukturierte Codebeispiele - Durchgängig aktualisiert auf Angular 14 und neuere Versionen - Viele Ergänzungen und Korrekturen Behandelt die neuesten Funktionalitäten aus der Angular-Welt: - Standalone Components - Reactive Forms mit Typisierung

Leseprobe

Liebe Leserin, lieber Leser,

das Angular-Ökosystem wird kontinuierlich verbessert. Bitte haben Sie Verständnis dafür, dass sich seit dem Druck dieses Buchs unter Umständen Schnittstellen und Aspekte von Angular weiterentwickelt haben können. Die GitHub-Repositorys mit den Codebeispielen werden wir bei Bedarf entsprechend aktualisieren.

Unter https://angular-buch.com/updates informieren wir Sie ausführlich über Breaking Changes und neue Funktionen. Wir freuen uns auf Ihren Besuch.

Sollten Sie einen Fehler vermuten oder einen Breaking Change entdeckt haben, so bitten wir Sie um Ihre Mithilfe! Bitte kontaktieren Sie uns unter [email protected] mit einer Beschreibung des Problems.

Wir wünschen Ihnen viel Spaß mit Angular!

Alles GuteFerdinand, Danny und Johannes

Ferdinand Malcher ist Google Developer Expert (GDE) und arbeitet als selbständiger Entwickler, Berater und Mediengestalter mit Schwerpunkt auf Angular, RxJS und TypeScript. Gemeinsam mit Johannes Hoppe hat er die Angular.Schule gegründet und bietet Schulungen zu Angular an.

Danny Koppenhagen arbeitet als Softwarearchitekt und Entwickler. Sein Schwerpunkt liegt in der Frontend-Architektur und der Entwicklung von Enterprise Webanwendungen auf Basis von Node.js, TypeScript, Angular und Vue. Neben der beruflichen Tätigkeit ist Danny als Autor mehrerer Open-Source-Projekte aktiv.

Johannes Hoppe ist Google Developer Expert (GDE) und arbeitet als selbständiger Trainer und Berater für Angular, .NET und Node.js. Zusammen mit Ferdinand Malcher hat er die Angular.Schule gegründet und bietet Workshops und Beratung zu Angular an. Johannes ist Organisator des Angular Heidelberg Meetup.

Sie erreichen das Autorenteam auf Twitter unter @angular_buch.

Mehr Infos und Kontaktmöglichkeiten finden Sie unter https://angular-buch.com/autoren.

Copyright und Urheberrechte:Die durch die dpunkt.verlag GmbH vertriebenen digitalen Inhalte sind urheberrechtlich geschützt. Der Nutzer verpflichtet sich, die Urheberrechte anzuerkennen und einzuhalten. Es werden keine Urheber-, Nutzungs- und sonstigen Schutzrechte an den Inhalten auf den Nutzer übertragen. Der Nutzer ist nur berechtigt, den abgerufenen Inhalt zu eigenen Zwecken zu nutzen. Er ist nicht berechtigt, den Inhalt im Internet, in Intranets, in Extranets oder sonst wie Dritten zur Verwertung zur Verfügung zu stellen. Eine öffentliche Wiedergabe oder sonstige Weiterveröffentlichung und eine gewerbliche Vervielfältigung der Inhalte wird ausdrücklich ausgeschlossen. Der Nutzer darf Urheberrechtsvermerke, Markenzeichen und andere Rechtsvorbehalte im abgerufenen Inhalt nicht entfernen.

Ferdinand Malcher · Danny Koppenhagen · Johannes Hoppe

Angular

Das große Praxisbuch –Grundlagen, fortgeschrittene Themenund Best Practices

4., überarbeitete und aktualisierte Auflage

iX-Edition

In der iX-Edition erscheinen Titel, die vom dpunkt.verlag gemeinsam mit der Redaktion der Computerzeitschrift iX ausgewählt und konzipiert werden. Inhaltlicher Schwerpunkt dieser Reihe sind Software- und Webentwicklung sowie Administration.

Ferdinand Malcher · Danny Koppenhagen · Johannes [email protected]

Lektorat: René Schönfeldt

Projektkoordinierung: Anja Ehrlich

Copy-Editing: Annette Schwarz, Ditzingen

Satz: Da-TeX Gerd Blumenstein, Leipzig, www.da-tex.de

Herstellung: Stefanie Weidner

Umschlaggestaltung: Helmut Kraus, www.exclam.de

Bibliografische Information der Deutschen Nationalbibliothek

Die Deutsche Nationalbibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte bibliografische Daten sind im Internet über http://dnb.d-nb.de abrufbar.

ISBN:

Print    978-3-86490-946-7

PDF     978-3-96910-862-8

ePub   978-3-96910-863-5

mobi   978-3-96910-864-2

4., überarbeitete und aktualisierte Auflage 2023Copyright © 2023 dpunkt.verlag GmbHWieblinger Weg 1769123 Heidelberg

Hinweis:Der Umwelt zuliebe verzichten wir auf die Einschweißfolie.

Schreiben Sie uns:Falls Sie Anregungen, Wünsche und Kommentare haben, lassen Sie es uns wissen: [email protected].

Das Angular-Logo ist Eigentum von Google und ist frei verwendbar. Lizenz: Creative Commons BY 4.0

Die vorliegende Publikation ist urheberrechtlich geschützt. Alle Rechte vorbehalten. Die Verwendung der Texte und Abbildungen, auch auszugsweise, ist ohne die schriftliche Zustimmung des Verlags urheberrechtswidrig und daher strafbar. Dies gilt insbesondere für die Vervielfältigung, Übersetzung oder die Verwendung in elektronischen Systemen.

Es wird darauf hingewiesen, dass die im Buch verwendeten Soft- und Hardware-Bezeichnungen sowie Markennamen und Produktbezeichnungen der jeweiligen Firmen im Allgemeinen warenzeichen-, marken- oder patentrechtlichem Schutz unterliegen.

Alle Angaben und Programme in diesem Buch wurden mit größter Sorgfalt kontrolliert. Weder Autoren noch Verlag können jedoch für Schäden haftbar gemacht werden, die in Zusammenhang mit der Verwendung dieses Buches stehen.

5 4 3 2 1 0

Inhaltsübersicht

IEinführung

1Schnellstart: unser erstes Angular-Projekt

2Benötigte Werkzeuge: Editor, Node.js und Co

3Angular CLI: der Codegenerator für unser Projekt

IITypeScript

4Einführung in TypeScript

IIIBookMonkey 5: Schritt für Schritt zur App

5Projektvorstellung und Einrichtung

6Komponenten: die Grundbausteine der Anwendung

7Property Bindings: mit Komponenten kommunizieren

8Event Bindings: Ereignisse in Komponenten verarbeiten

9Powertipp: Codeformatierung mit Prettier

10NgModule: die Anwendung modularisieren

11Dependency Injection: Code in Services auslagern

12Routing: durch die Anwendung navigieren

13Powertipp: Chrome Developer Tools

14HTTP-Kommunikation: ein Server-Backend anbinden

15Reaktive Programmierung mit RxJS

16Interceptors: HTTP-Requests abfangen und transformieren

17Powertipp: Analyse und Debugging mit den Angular DevTools

18Formulare mit Template-Driven Forms

19Formulare mit Reactive Forms

20Formularvalidierung: die Eingaben prüfen

21Pipes: Daten im Template formatieren

22Direktiven: das Vokabular von HTML erweitern

23Lazy Loading: Angular-Module asynchron laden

24Guards: Routen absichern

25Standalone Components: Komponenten ohne Module

IVProjektübergreifende Themen

26Qualität fördern mit Softwaretests

27Barrierefreiheit (a11y)

28Lokalisierung (l10n)

29Internationalisierung (i18n)

VDeployment: das Projekt ausliefern

30Build und Deployment mit der Angular CLI

31Angular-Anwendungen mit Docker bereitstellen

VIFortgeschrittene Themen

32State Management mit Redux und NgRx

33Server-Side Rendering mit Angular Universal

34Progressive Web Apps (PWA)

35Fortgeschrittene Konzepte der Angular CLI

VIIWissenswertes

36Fortgeschrittene Konzepte für Komponenten

37Weitere Features des Routers

38Nützliche Werkzeuge

39Web Components mit Angular Elements

40Angular Material und weitere UI-Komponentensammlungen

41Angular updaten

42Klassen-Propertys in JavaScript und TypeScript

VIIIAnhang

ABefehle der Angular CLI

BOperatoren von RxJS

CMatchers von Jasmine

DAbkürzungsverzeichnis

ELinkliste

Index

Nachwort

Inhaltsverzeichnis

Vorwort

Aktualisierungen in der vierten Auflage

IEinführung

1Schnellstart: unser erstes Angular-Projekt

2Benötigte Werkzeuge: Editor, Node.js und Co

2.1Konsole, Terminal und Shell

2.2Visual Studio Code

2.3Google Chrome

2.4Paketverwaltung mit Node.js und NPM

2.5Codebeispiele in diesem Buch

3Angular CLI: der Codegenerator für unser Projekt

3.1Das offizielle Tool für Angular

3.2Installation

3.3Die wichtigsten Befehle

3.4Autovervollständigung einrichten

IITypeScript

4Einführung in TypeScript

4.1TypeScript einsetzen

4.2Variablen: const, let und var

4.3Die wichtigsten Basistypen

4.4Klassen

4.5Interfaces

4.6Template-Strings

4.7Arrow-Funktionen/Lambda-Ausdrücke

4.8Spread-Operator und Rest-Syntax

4.9Weitere Features von JavaScript und TypeScript

4.10Konfiguration

IIIBookMonkey 5: Schritt für Schritt zur App

5Projektvorstellung und Einrichtung

5.1Unser Projekt: BookMonkey

5.2Projekt mit der Angular CLI initialisieren

5.3Aufbau des neuen Projekts

5.4Das Projekt starten

5.5Globale Styles einbinden: book-monkey5-styles

5.6Statische Codeanalyse mit ESLint

6Komponenten: die Grundbausteine der Anwendung

6.1Komponenten

6.2Komponenten in der Anwendung verwenden

6.3Komponenten generieren mit der Angular CLI

6.4Umgang mit Propertys von Komponenten

6.5Template-Syntax

6.6Elemente gruppieren mit <ng-container>

6.7Den BookMonkey erstellen: eine Buchliste anzeigen

7Property Bindings: mit Komponenten kommunizieren

7.1Komponenten verschachteln

7.2Eingehender Datenfluss mit Property Bindings

7.3Daten in Kindkomponenten verarbeiten

7.4Property Bindings für native Elemente

7.5Property Bindings notieren

7.6Sonderformen von Property Bindings

7.7Lifecycle Hooks von Komponenten

7.8Den BookMonkey erweitern: Listeneinträge in eigener Komponente abbilden

8Event Bindings: Ereignisse in Komponenten verarbeiten

8.1Native DOM-Events

8.2Eigene Events definieren

8.3Den BookMonkey erweitern: Buchdetails anzeigen

9Powertipp: Codeformatierung mit Prettier

10NgModule: die Anwendung modularisieren

10.1Module in Angular

10.2Grundaufbau eines Moduls

10.3Bestandteile eines Moduls deklarieren

10.4Andere Module importieren

10.5Bestandteile aus Modulen exportieren

10.6Anwendung in Feature-Module aufteilen

10.7Wiederverwendbarkeit: Shared Module

10.8Den BookMonkey erweitern: die Anwendung modularisieren

11Dependency Injection: Code in Services auslagern

11.1Abhängigkeiten anfordern

11.2Services in Angular

11.3Abhängigkeiten registrieren

11.3.1Abhängigkeiten explizit registrieren mit providers

11.3.2Tree-Shakable Providers mit providedIn

11.4Abhängigkeiten ersetzen

11.5Eigene Tokens definieren mit InjectionToken

11.6Abhängigkeiten anfordern mit @Inject()

11.7Abhängigkeiten anfordern mit inject()

11.8Multiprovider: mehrere Abhängigkeiten im selben Token

11.9Providers in Komponenten registrieren

11.10Den BookMonkey erweitern: einen Service nutzen

12Routing: durch die Anwendung navigieren

12.1Routen konfigurieren

12.2Router einbinden: das AppRoutingModule

12.3Routing in Feature-Modulen

12.4Komponenten anzeigen

12.5Root-Route

12.6Weiterleitung auf eine andere Route

12.7Wildcard-Route

12.8Links setzen

12.9Routenparameter

12.10Verschachtelung von Routen

12.11Aktive Links stylen

12.12Route programmatisch wechseln

12.13Seitentitel setzen

12.14Pfade in Single-Page-Applikationen

12.15Den BookMonkey erweitern: Routing integrieren

13Powertipp: Chrome Developer Tools

14HTTP-Kommunikation: ein Server-Backend anbinden

14.1Modul einbinden

14.2Requests mit dem HttpClient durchführen

14.3Optionen für den HttpClient

14.4Ausblick: Codegenerierung mit OpenAPI

14.5Den BookMonkey erweitern: Daten über HTTP abfragen

15Reaktive Programmierung mit RxJS

15.1Alles ist ein Datenstrom

15.2Observables sind Funktionen

15.3Das Observable aus RxJS

15.4Observables abonnieren

15.5Observables erzeugen

15.6Observables und Promises

15.7Operatoren: Datenströme modellieren

15.8Heiße Observables, Multicasting und Subjects

15.9Subscriptions verwalten & Memory Leaks vermeiden

15.10Observables subscriben mit der AsyncPipe

15.11Fehler behandeln

15.12Flattening-Strategien für Higher-Order Observables

15.13Den BookMonkey erweitern: Observables mit der AsyncPipe auflösen

15.14Den BookMonkey erweitern: Typeahead-Suche

15.15Den BookMonkey erweitern: Fehlerbehandlung

16Interceptors: HTTP-Requests abfangen und transformieren

16.1Funktionsweise der Interceptors

16.2Interceptors anlegen

16.3Den Request manipulieren

16.4Die Response verarbeiten

16.5Interceptors einbinden

16.6Interceptors als Funktionen

16.7OAuth 2 und OpenID Connect

16.8Den BookMonkey erweitern: API-Aufrufe mit Credentials anreichern

17Powertipp: Analyse und Debugging mit den Angular DevTools

18Formulare mit Template-Driven Forms

18.1Angulars Ansätze für Formulare

18.2Template-Driven Forms einrichten

18.3Datenmodell in der Komponente

18.4Template mit Two-Way Binding und ngModel

18.5Eingaben validieren

18.6Formularzustand verarbeiten

18.7Formular abschicken

18.8Formular zurücksetzen

18.9Den BookMonkey erweitern: Template-Driven Forms nutzen

19Formulare mit Reactive Forms

19.1Modul einbinden

19.2Formularmodell in der Komponente

19.3Template mit dem Modell verknüpfen

19.4Eingebaute Validatoren nutzen

19.5Formularzustand verarbeiten

19.6Formular abschicken

19.7Formular zurücksetzen

19.8Formularwerte setzen

19.9FormBuilder verwenden

19.10Änderungen überwachen

19.11Den BookMonkey erweitern: Reactive Forms nutzen

19.12Den BookMonkey erweitern: Autor*innen erfassen

19.13Den BookMonkey erweitern: Bücher bearbeiten

19.14Welcher Ansatz ist der richtige?

20Formularvalidierung: die Eingaben prüfen

20.1Validatoren für einzelne Formularfelder

20.2Validatoren für Formulargruppen und -Arrays

20.3Validatoren kombinieren

20.4Asynchrone Validatoren

20.5Mit Fehlern arbeiten

20.6Den BookMonkey erweitern: Felder für Autor*innen validieren

20.7Den BookMonkey erweitern: ISBN-Format validieren

20.8Den BookMonkey erweitern: existierende ISBN prüfen

20.9Den BookMonkey erweitern: Fehlermeldungen anzeigen

21Pipes: Daten im Template formatieren

21.1Pipes verwenden

21.2Eingebaute Pipes für den sofortigen Einsatz

21.3Eigene Pipes entwickeln

21.4Pipes in TypeScript nutzen

21.5Den BookMonkey erweitern: Datum formatieren mit der DatePipe

21.6Den BookMonkey erweitern: ISBN formatieren

22Direktiven: das Vokabular von HTML erweitern

22.1Was sind Direktiven?

22.2Eigene Direktiven entwickeln

22.3Attributdirektiven: Verhalten von Elementen ändern

22.3.1Host Binding: Eigenschaften schreiben

22.3.2Host Listener: Events abonnieren

22.3.3Direktzugriff auf das Element mit ElementRef

22.3.4Komponenten und Direktiven anfordern

22.4Komposition mit Host-Direktiven

22.5Strukturdirektiven: Elemente hinzufügen und entfernen

22.6Den BookMonkey erweitern: Löschen mit Dialog bestätigen

22.7Den BookMonkey erweitern: die Löschfunktion absichern

23Lazy Loading: Angular-Module asynchron laden

23.1Warum Module asynchron laden?

23.2Das technische Konzept

23.3Lazy Loading verwenden

23.4Module asynchron vorladen: Preloading

23.5Den BookMonkey erweitern: Module asynchron nachladen

24Guards: Routen absichern

24.1Grundlagen zu Guards

24.2Guards verwenden

24.3Guards implementieren

24.4Guards als Klassen

24.5Guards und Sicherheit

24.6Den BookMonkey erweitern: die Admin-Route absichern

25Standalone Components: Komponenten ohne Module

25.1NgModule und Standalone Components

25.2Standalone Components erzeugen

25.3Abhängigkeiten definieren

25.4Standalone Components in NgModules nutzen

25.5Routing

25.6Anwendungen ohne Module: AppComponent direkt bootstrappen

25.7Projektstruktur

25.8Fazit

25.9Den BookMonkey erweitern: Pipes und Direktiven standalone verwenden

25.10Den BookMonkey erweitern: Bücher-Feature mit Standalone Components

IVProjektübergreifende Themen

26Qualität fördern mit Softwaretests

26.1Softwaretests

26.2Vorgehen beim Testing

26.3Test-Framework Jasmine

26.4Test-Runner

26.4.1Karma

26.4.2Alternative: Jest

26.4.3E2E-Test-Runner wählen

26.5Unit- und Integrationstests mit Karma

26.5.1TestBed: die Testbibliothek von Angular

26.5.2Isolierte Unit-Tests: Services testen

26.5.3Isolierte Unit-Tests: Pipes testen

26.5.4Isolierte Unit-Tests: Komponenten testen

26.5.5Shallow Component Test: einzelne Komponenten testen

26.5.6Integrationstests: mehrere Komponenten testen

26.5.7Abhängigkeiten durch Stubs ersetzen

26.5.8Abhängigkeiten durch Mocks ersetzen

26.5.9Leere Komponenten als Stubs oder Mocks einsetzen

26.5.10HTTP-Requests testen

26.5.11Komponenten mit Routen testen

26.5.12Asynchronen Code testen

26.5.13Code Coverage Report

26.5.14Zusammenfassung: Tests mit Karma und Jasmine

26.6Jest: ein alternativer Test-Runner mit zusätzlichen Features

26.7Oberflächentests mit Cypress

26.8Component Tests mit Cypress: Komponenten isoliert testen

27Barrierefreiheit (a11y)

27.1Gesetze und Standards

27.2Features von Angular

27.3ESLint-Regeln

27.4Angular Component Development Kit (CDK)

27.5Verifizierung & Tools zur Unterstützung

28Lokalisierung (l10n)

28.1Lokalisierung für ein spezifisches Locale

28.2Mehrere Sprachdefinitionen laden

28.3Pipes mit einem spezifischen Locale nutzen

29Internationalisierung (i18n)

29.1Was bedeutet Internationalisierung?

29.2Der Übersetzungsprozess in Angular

29.3Texte für die Übersetzung markieren und extrahieren

29.3.1Projekt vorbereiten

29.3.2Nachrichten im HTML mit dem i18n-Attribut markieren

29.3.3Nachrichten im TypeScript-Code mit $localize markieren

29.3.4Feste IDs vergeben

29.3.5Nachrichten extrahieren und übersetzen

29.4Übersetzung während des Build-Prozesses

29.5Übersetzung zur Laufzeit

29.6Technische Einschränkungen

VDeployment: das Projekt ausliefern

30Build und Deployment mit der Angular CLI

30.1Build konfigurieren (angular.json)

30.2Build ausführen

30.3Bundles

30.3.1Weitere Bundles und Dateien

30.3.2Budgets konfigurieren

30.3.3Bundles analysieren mit source-map-explorer

30.4Umgebungen konfigurieren

30.5Ahead-of-Time-Kompilierung: die Templates umsetzen

30.6Webserver konfigurieren und die Anwendung ausliefern

30.7ng deploy: Deployment mit der Angular CLI

30.8Ausblick: Deployment mit einem Build-Service

31Angular-Anwendungen mit Docker bereitstellen

31.1Docker

31.2Docker Registry

31.3Lösungsskizze

31.4Eine Angular-App über Docker bereitstellen

31.5Build Once, Run Anywhere: Konfiguration über Docker verwalten

31.6Multi-Stage Builds

31.7Grenzen der vorgestellten Lösung

31.8Fazit

VIFortgeschrittene Themen

32State Management mit Redux und NgRx

32.1Ein Modell für zentrales State Management

32.2Das Architekturmodell Redux

32.3NgRx: Reactive Extensions for Angular

32.3.1Projekt vorbereiten

32.3.2Store einrichten

32.3.3Schematics nutzen

32.3.4Grundstruktur

32.3.5Feature anlegen

32.3.6Struktur des Feature-States definieren

32.3.7Actions: Kommunikation mit dem Store

32.3.8Dispatch: Actions in den Store senden

32.3.9Reducers: den State aktualisieren

32.3.10Selektoren: Daten aus dem State lesen

32.3.11Effects: Seiteneffekte ausführen

32.4Debugging mit den Redux DevTools

32.5Redux und NgRx: Wie geht’s weiter?

32.5.1Actions gruppieren mit createActionGroup()

32.5.2Routing

32.5.3Entity Management

32.5.4Testing

32.5.5Hilfsmittel für Komponenten: @ngrx/component

32.5.6Facades: Zustandsverwaltung abstrahieren

32.6Ausblick: lokaler State mit @ngrx/component-store

33Server-Side Rendering mit Angular Universal

33.1Single-Page-Anwendungen, Suchmaschinen und Start-Performance

33.2Dynamisches Server-Side Rendering

33.3Statisches Pre-Rendering

33.4Hinter den Kulissen von Angular Universal

33.5Browser oder Server? Die Plattform bestimmen

33.6Routen ausschließen

33.7Wann setze ich serverseitiges Rendering ein?

33.8Ausblick: Pre-Rendering mit Scully

34Progressive Web Apps (PWA)

34.1Die Charakteristiken einer PWA

34.2Service Worker

34.3Eine bestehende Angular-Anwendung in eine PWA verwandeln

34.4Add to Homescreen

34.5Offline-Funktionalität

34.6Push-Benachrichtigungen

35Fortgeschrittene Konzepte der Angular CLI

35.1Workspace und Monorepo: Heimat für Apps und Bibliotheken

35.1.1Applikationen: Angular-Apps im Workspace

35.1.2Bibliotheken: Code zwischen Anwendungen teilen

35.2Schematics: Codegenerierung mit der Angular CLI

VIIWissenswertes

36Fortgeschrittene Konzepte für Komponenten

36.1Else-Block für die Direktive ngIf

36.2TrackBy-Funktion für die Direktive ngFor

36.3Container und Presentational Components

36.4Content Projection: Inhalt des Host-Elements verwenden

36.5Lifecycle Hooks

36.6Change Detection

37Weitere Features des Routers

37.1Auxiliary Routes: mehrere RouterOutlets verwenden

37.2Erweiterte Konfigurationen für den Router

37.3Resolvers: Daten beim Routing vorladen

38Nützliche Werkzeuge

38.1Monorepos mit Nrwl Nx

38.2Angular-Anwendungen dokumentieren und visualisieren

38.2.1Compodoc

38.2.2Storybook

39Web Components mit Angular Elements

40Angular Material und weitere UI-Komponentensammlungen

41Angular updaten

42Klassen-Propertys in JavaScript und TypeScript

VIIIAnhang

ABefehle der Angular CLI

BOperatoren von RxJS

CMatchers von Jasmine

DAbkürzungsverzeichnis

ELinkliste

Index

Nachwort

Vorwort

»Angular is one of the most adopted frameworks on the planet.«

Brad Green(ehem. Angular Engineering Director)

Angular ist eines der populärsten Frameworks für die Entwicklung von Single-Page-Applikationen. Das Framework wird weltweit von großen Unternehmen eingesetzt, um modulare, skalierbare und gut wartbare Applikationen zu entwickeln. Mit Angular in Version 2.0.0 setzte Google im Jahr 2016 einen Meilenstein in der Welt der modernen Webentwicklung: Das Framework nutzt die Programmiersprache TypeScript, bietet ein ausgereiftes Tooling und ermöglicht die komponentenbasierte Entwicklung von Single-Page-Anwendungen für den Browser und für Mobilgeräte.

React und Vue.js

In kurzer Zeit haben sich rund um Angular ein umfangreiches Ökosystem und eine vielfältige Community gebildet. Angular gilt neben React.js und Vue.js als eines der weltweit beliebtesten Webframeworks. Sie haben also die richtige Entscheidung getroffen, als Sie Angular für die Entwicklung Ihrer Projekte ins Auge gefasst haben.

Opinionated Framework

Der Einstieg in Angular ist umfangreich, aber die Konzepte sind durchdacht und konsequent. Häufig verwendet man im Zusammenhang mit Angular das Attribut opinionated, das wir im Deutschen mit dem Begriff meinungsstark ausdrücken können: Angular ist ein meinungsstarkes Framework, das viele klare Richtlinien zu Architektur, Codestruktur und Best Practices definiert. Das kann zu Anfang umfangreich erscheinen, sorgt aber dafür, dass in der gesamten Community einheitliche Konventionen herrschen, Standardlösungen existieren und bestehende Bibliotheken vorausgewählt wurden.

Beispielanwendung

Sie werden in diesem Buch lernen, wie Sie mit Angular komponentenbasierte Single-Page-Applikationen erstellen. Dazu entwickeln wir mit Ihnen gemeinsam eine Anwendung, anhand derer wir Ihnen die Konzepte und Features von Angular beibringen. Wir führen Sie Schritt für Schritt durch das Framework – vom Projektsetup über Komponenten, Routing, Formulare und HTTP bis hin zum Testing und Deployment der Anwendung. Auf dem Weg stellen wir Ihnen eine Reihe von Tools, Tipps und Best Practices vor, die wir in mehr als sechs Jahren Praxisalltag mit Angular sammeln konnten. Die umfangreichen Theorieteile eignen sich auch später als Nachschlagewerk im Entwicklungsalltag.

Nach dem Lesen dieses Praxisbuchs sind Sie in der Lage,

das Zusammenspiel der Funktionen von Angular sowie das Konzept hinter dem Framework zu verstehen,

modulare, strukturierte und wartbare Webanwendungen mithilfe von Angular zu entwickeln sowie

durch die Entwicklung von Tests qualitativ hochwertige Anwendungen zu erstellen.

Die Entwicklung mit Angular macht vor allem eines: Spaß! Diesen Enthusiasmus für das Framework und für Webtechnologien möchten wir Ihnen in diesem Buch vermitteln – wir nehmen Sie mit auf die Reise in die Welt der modernen Webentwicklung!

Versionen und Namenskonvention: Angular vs. AngularJS

In diesem Buch dreht sich alles um das Framework Angular. Die Geschichte dieses Projekts reicht zurück bis ins Jahr 2009 zur Vorgängerversion AngularJS. Bis auf den ähnlichen Namen und einige Konzepte haben die beiden Frameworks aber nichts miteinander zu tun: Angular ab Version 2 ist eine vollständige Neuentwicklung und ist nicht mit dem alten AngularJS kompatibel.

It’s just »Angular«.

Die offizielle Bezeichnung für das Framework ist Angular, ohne Angabe der Programmiersprache und ohne eine spezifische Versionsnummer. Angular erschien im September 2016 in der Version 2.0.0 und hat viele neue Konzepte und Ideen in die Community gebracht. Um Verwechslungen auszuschließen, gilt also die folgende Konvention:

Angular

– das Angular-Framework ab

Version 2 und höher

(dieses Buch ist durchgängig auf dem Stand von Angular 15)

AngularJS

– das Angular-Framework in der

Version 1.x.x

AngularJS wird seit Januar 2022 offiziell nicht mehr weiterentwickelt und sollte nicht mehr verwendet werden.1 Sie haben also die richtige Entscheidung getroffen, Angular ab Version 2.0.0 einzusetzen.

Semantic Versioning

Die Versionsnummer x.y.z basiert auf Semantic Versioning.2 Der Release-Zyklus von Angular ist kontinuierlich geplant: Im Rhythmus von ungefähr sechs Monaten erscheint eine neue Major-Version x. Die Minor-Versionen y werden monatlich herausgegeben, nachdem eine Major-Version erschienen ist. Jede Major-Version wird planmäßig für 1,5 Jahre unterstützt und weiterentwickelt (Long-Term Support).

Abb. 1Zeitleiste der Entwicklung von Angular

Umgang mit Aktualisierungen

Das Release einer neuen Major-Version von Angular bedeutet keineswegs, dass alle Ideen verworfen werden und Ihre Software nach einem Update nicht mehr funktioniert. Auch wenn Sie eine neuere Angular-Version verwenden, behalten die in diesem Buch beschriebenen Konzepte ihre Gültigkeit. Die Grundideen von Angular sind seit Version 2.0.0 konsistent und auf Beständigkeit über einen langen Zeitraum ausgelegt. Alle Updates zwischen den Major-Versionen waren in der Vergangenheit problemlos möglich, ohne dass Breaking Changes die gesamte Anwendung unbenutzbar machen. Gibt es doch gravierende Änderungen, so werden stets ausführliche Informationen und Tools zur Migration angeboten.

Die Begleitwebsite zum Buch

Auf der Website zu diesem Buch finden Sie die Codebeispiele für das Beispielprojekt und viele weiterführende Informationen. Unter anderem veröffentlichen wir dort zu jeder Major-Version einen Artikel mit den wichtigsten Neuerungen in Angular. Wir empfehlen Ihnen aus diesem Grund, unbedingt einen Blick auf die Begleitwebsite zu werfen, bevor Sie beginnen, sich mit den Inhalten des Buchs zu beschäftigen:

https://angular-buch.com

An wen richtet sich das Buch?

Erfahrung in Softwareentwicklung

Dieses Buch richtet sich an Menschen, die bereits grundlegende Kenntnisse in der Softwareentwicklung mitbringen. Vorwissen zu JavaScript und HTML ist von Vorteil – es ist aber keine Voraussetzung, um mit diesem Buch Angular zu lernen. Wenn Sie jedoch bereits mit der Webentwicklung vertraut sind, werden Sie mit diesem Buch schnell starten können. Falls Sie gar keine Erfahrung in HTML und JavaScript mitbringen, empfehlen wir Ihnen, zunächst die grundlegenden Kenntnisse in diesen Bereichen zu festigen.

TypeScript

Für die Entwicklung mit Angular nutzen wir die populäre Programmiersprache TypeScript. Doch keine Angst: TypeScript ist eine Erweiterung von JavaScript, und die Konzepte sind sehr eingängig und schnell gelernt. Wenn Sie bereits eine stark typisierte Sprache wie Java oder C# kennen, wird Ihnen der Einstieg in TypeScript nicht schwerfallen.

Keine Angular-Vorkenntnisse nötig!

Sie benötigen keinerlei Vorkenntnisse im Umgang mit Angular bzw. AngularJS. Ebenso müssen Sie sich nicht vorab mit benötigten Tools und Hilfsmitteln für die Entwicklung von Angular-Applikationen vertraut machen. Das nötige Wissen darüber wird Ihnen in diesem Buch vermittelt.

Kein klassisches Nachschlagewerk

Wir erschließen uns die Welt von Angular praxisorientiert anhand eines Beispielprojekts. Jedes Thema wird zunächst ausführlich in der Theorie behandelt, sodass Sie die Grundlagen auch losgelöst vom Beispielprojekt nachlesen können. Wir wollen einen soliden Einstieg in Angular bieten, Best Practices zeigen und Schwerpunkte bei speziellen fortgeschrittenen Themen setzen. Die meisten Aufgaben aus dem Entwicklungsalltag werden Sie mit den vielen praktischen Beispielen souverän meistern können.

Offizielle Angular-Dokumentation

Wir hoffen, dass dieses Buch Ihre tägliche Begleitung bei der Arbeit mit Angular wird. Für Details zu den einzelnen Framework-Funktionen empfehlen wir immer auch einen Blick in die offizielle Dokumentation.3

Wie ist dieses Buch zu lesen?

Einführung, Tools und Schnellstart

Im ersten Teil des Buchs lernen Sie die verwendeten Tools und die benötigten Werkzeuge kennen. Im Schnellstart tauchen wir sofort in Angular ein und nehmen Sie mit zu einem einfachen Einstieg in das Framework und den Grundaufbau einer Anwendung.

Einführung in TypeScript

Der zweite Teil vermittelt Ihnen einen Einstieg in TypeScript. Sie werden hier mit den Grundlagen dieser typisierten Skriptsprache vertraut gemacht. Wenn Sie bereits Erfahrung im Umgang mit TypeScript haben, können Sie diesen Teil auch überspringen und bei Bedarf später einzelne Themen nachlesen.

Beispielanwendung17 Praxiskapitel

Der dritte Teil ist der Hauptteil des Buchs: Hier werden wir mit Ihnen zusammen eine Beispielanwendung entwickeln. Die Konzepte und Technologien von Angular wollen wir dabei direkt am Beispiel vermitteln. Wir haben das Projekt in 17 einzelne Kapitel eingeteilt. In jedem Teil setzen wir gemeinsam mit Ihnen neue Anforderungen und technische Aspekte im Beispielprojekt um.

Komponenten: die Grundbausteine der Anwendung

(ab

S. 73

)

Property Bindings: mit Komponenten kommunizieren

(ab

S. 107

)

Event Bindings: Ereignisse in Komponenten verarbeiten

(ab

S. 123

)

NgModule: die Anwendung modularisieren

(ab

S. 141

)

Dependency Injection: Code in Services auslagern

(ab

S. 157

)

Routing: durch die Anwendung navigieren

(ab

S. 175

)

HTTP-Kommunikation: ein Server-Backend anbinden

(ab

S. 225

)

Reaktive Programmierung mit RxJS

(ab

S. 243

)

Interceptors: HTTP-Requests abfangen und transformieren

(ab

S. 301

)

Formulare mit Template-Driven Forms

(ab

S. 325

)

Formulare mit Reactive Forms

(ab

S. 345

)

Formularvalidierung: die Eingaben prüfen

(ab

S. 387

)

Pipes: Daten im Template formatieren

(ab

S. 413

)

Direktiven: das Vokabular von HTML erweitern

(ab

S. 433

)

Lazy Loading: Angular-Module asynchron laden

(ab

S. 459

)

Guards: Routen absichern

(ab

S. 471

)

Standalone Components: Komponenten ohne Module

(ab

S. 485

)

Powertipps

Jedes dieser Kapitel besteht immer aus einem umfangreichen Theorieteil und der praktischen Implementierung im Beispielprojekt. Neben fachlichen Themen führen wir Refactorings durch, die die Architektur oder den Codestil der Anwendung verbessern. In mehreren Powertipps zwischen den Kapiteln zeigen wir außerdem hilfreiche Werkzeuge, die uns bei der Entwicklung zur Seite stehen.

Projektübergreifende Themen

Nachdem alle Praxiskapitel erfolgreich absolviert wurden, widmen wir uns einer Auswahl von projektübergreifenden Themen: Im Kapitel zu Softwaretests erfahren Sie, wie Sie Ihre Angular-Anwendung automatisiert testen und so die Softwarequalität sichern können. Dieses Kapitel kann sowohl nach der Entwicklung des Beispielprojekts als auch parallel dazu bestritten werden. Außerdem widmen wir uns ausführlich der Barrierefreiheit: In diesem Kapitel stellen wir Grundlagen und konkrete Maßnahmen vor, um die Anwendung für möglichst viele Menschen zugänglich zu machen. Zum Schluss werfen wir einen differenzierten Blick auf die Lokalisierung und Internationalisierung, um die Anwendung für den mehrsprachigen Betrieb vorzubereiten.

Deployment

Im fünften Teil des Buchs dreht sich alles um das Deployment einer Angular-Anwendung. Dabei betrachten wir die Hintergründe und Konfiguration des Build-Prozesses und erläutern die Bereitstellung mithilfe von Docker.

Fortgeschrittene Themen: NgRx, SSR und PWA

Im sechsten Teil möchten wir Ihnen einige Ansätze näherbringen, die über eine Standardanwendung hinausgehen. Hier stellen wir zunächst das Redux-Pattern und das populäre Framework NgRx vor, mit dem wir den Anwendungszustand zentral und gut wartbar verwalten können. Mit Server-Side Rendering (SSR) machen Sie Ihre Anwendung fit für Suchmaschinen und verbessern zusätzlich die wahrgenommene Geschwindigkeit beim initialen Start. Außerdem werfen wir einen ausführlichen Blick auf Progressive Web Apps (PWA), um eine Webanwendung elegant auf Mobilgeräten zu nutzen.

Wissenswertes

Im letzten Teil »Wissenswertes« finden Sie weitere Informationen zu wissenswerten und begleitenden Themen. Hier haben wir weiterführende Inhalte zusammengetragen, auf die wir im Beispielprojekt nicht ausführlich eingehen.

Selbst tippen statt Copy & Paste

Abtippen heißt Lernen und Verstehen.

Der gesamte Code für das Beispielprojekt steht auf der Plattform GitHub zur Verfügung. Wir wissen genau, wie groß die Versuchung ist, größere Teile des Codes von dort zu kopieren und so die Tipparbeit zu sparen. Aber: Kopieren und Einfügen ist nicht dasselbe wie Lernen und Verstehen. Wenn Sie die Codebeispiele selbst tippen, werden Sie besser verstehen, wie Angular funktioniert, und werden die Software später erfolgreich in der Praxis einsetzen können. Jeder einzelne Quelltext, den Sie abtippen, trainiert Ihre Hände, Ihr Gehirn und Ihre Sinne. Wir möchten Sie deshalb ermutigen: Betrügen Sie sich nicht selbst. Der bereitgestellte Quelltext im Repository sollte lediglich der Überprüfung dienen. Wir wissen, wie schwer das ist, aber vertrauen Sie uns: Es zahlt sich aus, denn Übung macht den Meister!

Angular.Schule: Workshops und Beratung

Wir, die Autoren dieses Buchs, arbeiten seit Langem als Berater und Trainer für Angular. Wir haben die Erfahrung gemacht, dass man Angular in kleinen Gruppen am effektivsten lernen kann. In einem Workshop kann auf individuelle Fragen und Probleme direkt eingegangen werden – und es macht auch am meisten Spaß!

Die Angular.Schule: Workshops und Beratung

Schauen Sie auf https://angular.schule vorbei. Dort bieten wir Ihnen Angular-Schulungen in den Räumen Ihres Unternehmens, in offenen Gruppen oder als Online-Kurs an. Das Angular-Buch verwenden wir dabei in unseren Kursen zur Nacharbeit. Wir freuen uns auf Ihren Besuch!

https://angular.schule

Danksagung

Dieses Buch hätte nicht seine Reife erreicht ohne die Hilfe und Unterstützung verschiedener Menschen. Besonderer Dank geht an Michael Kaaden für seine unermüdlichen Anregungen, kritischen Nachfragen und die Geduld, unser Beispielprojekt zum vierten Mal durchzuarbeiten.

Wir bedanken uns bei Mohammed Malekzadeh und Maximilian Franzke für wertvolles Feedback und viele Anregungen zum Thema digitale Barrierefreiheit. Jan Buchholz danken wir für die hilfreichen Korrekturvorschläge. Wir danken Lisa Möller für die Zeichnungen zu unseren Personas (Seite 56). Ein großer Dank gilt außerdem unseren Familien, die uns auch abends an diesem Buch haben arbeiten lassen!

Dem Team vom dpunkt.verlag, insbesondere Anja Ehrlich und René Schönfeldt, danken wir für die Unterstützung und die Anregungen zum Buch. Annette Schwarz danken wir für das gewissenhafte Korrektorat unseres Manuskripts. Besonderer Dank gilt dem Angular-Team und der Community dafür, dass sie eine großartige Plattform geschaffen haben, die uns den Entwicklungsalltag angenehmer macht. Zuletzt danken wir Gregor Woiwode für die Mitwirkung als Autor in der ersten Auflage. Ohne Gregor würde es das Angular-Buch in dieser Form nicht geben.

Viele Menschen haben uns E-Mails mit persönlichem Feedback zum Buch zukommen lassen – vielen Dank für diese wertvollen Rückmeldungen.

Aktualisierungen in der vierten Auflage

Die Webplattform bewegt sich schnell, und so muss auch ein Framework wie Angular stets an neue Gegebenheiten angepasst werden und mit den Anforderungen wachsen. In den sechs Jahren seit Veröffentlichung der ersten Auflage dieses Buchs haben sich viele Dinge geändert: Es wurden Best Practices etabliert, neue Features eingeführt, und einige wenige Features wurden wieder entfernt.

Mit dieser Auflage haben wir die bislang größte und aufwendigste Überarbeitung gewagt: Wir haben uns mehr als ein Jahr Zeit genommen, um das Konzept dieses Buchs zu überdenken und auch Ideen und Baustellen zu bearbeiten, auf die wir bei den früheren Auflagen nicht den Fokus gesetzt hatten.

Alle Texte und Beispiele haben wir grundlegend überarbeitet und zum großen Teil neu verfasst. Dabei haben wir uns auch nicht davor gescheut, ganze Abschnitte zu löschen oder unsere Ideen aus der Vergangenheit kritisch zu hinterfragen.

Modernes und zeitloses Nachschlagewerk

Es ist unser Ziel, einen umfassenden Einstieg in das Angular-Framework zu ermöglichen – und gleichzeitig ein modernes und zeitloses Nachschlagewerk zu schaffen. Die Arbeit mit dem Buch dieser vierten Auflage lohnt sich daher auch für Leserinnen und Leser, die bereits eine der früheren Ausgaben besitzen. Diesen »frischen Wind der Veränderung« haben wir auch auf dem Buchcover mit einem Motiv aus der Raumfahrt aufgegriffen.

Angular 15 und folgende Versionen

Wir möchten Ihnen einen kurzen Überblick über die wichtigsten Neuerungen und Aktualisierungen der vierten Auflage geben. Alle Inhalte haben wir auf die Angular-Version 15 aktualisiert, sodass dieses Buch auch für die Arbeit mit den folgenden Versionen geeignet ist.

Neu in dieser Auflage

Wir haben das Buch neu strukturiert und das Beispielprojekt von Grund auf neu entwickelt. Dabei haben wir die Schwerpunkte anders gesetzt und die Erkenntnisse aus unserer täglichen Arbeit mit Angular berücksichtigt. Die Praxisteile sind nun leichtgewichtiger und behandeln ausschließlich die Umsetzung im Beispielprojekt. Alle notwendigen Grundlagen werden jeweils in den umfassenden Theorieteilen behandelt. Besonders wichtige Aspekte haben wir als Merksätze hervorgehoben.

Um die Navigation im Buch zu vereinfachen, haben wir die frühere Gruppierung in »Iterationen« entfernt. Die Kapitel sind nun in einer flacheren Struktur organisiert.

Alle Inhalte und Beispiele sind auf dem aktuellen Stand von Angular 15. Dabei behandeln wir auch umfassend die neuesten Themen aus der Angular-Welt:

Standalone Components

sind ein neuer Ansatz, um Komponenten, Pipes und Direktiven unabhängig von Angular-Modulen in der Anwendung zu verwenden. Wir betrachten dieses Konzept ausführlich im neuen

Kapitel 25

ab

Seite 485

.

Die Bausteine für die Formularverarbeitung mit

Reactive Forms

sind seit Angular 14 stark typisiert.

Kapitel 19

zu Reactive Forms ab

Seite 345

behandelt diesen neueren Ansatz.

Die neue

Funktion

inject()

ist eine Alternative zur klassischen Constructor Injection, um Abhängigkeiten anzufordern. Sie kann in Zukunft ein elementarer Bestandteil der Arbeit mit Angular werden. Wir nutzen die Funktion an geeigneten Stellen, um die Verwendung zu vertiefen.

Interceptors, Guards und Resolvers

können als einfache Funktionen definiert werden. In früheren Versionen von Angular war dafür stets eine Klasse notwendig. Alle drei Bausteine werden nun ausführlich in der Theorie behandelt. Im Praxiskapitel zu den Guards ab

Seite 480

implementieren wir auch einen funktionalen Guard.

Mit der

Directive Composition API

können Direktiven »von innen« auf ein Element angewendet werden. Auf dieses neue Konzept gehen wir in

Abschnitt 22.4

ab

Seite 443

ein.

Viele weitere neue Features und Aspekte des Angular-Frameworks haben wir über das Buch hinweg berücksichtigt.

In JavaScript wurde ein neuer Weg zur Initialisierung von Klassen-Propertys eingeführt, der sich vom proprietären Verhalten der Programmiersprache TypeScript unterscheidet. Unter »Wissenswertes« ab Seite 851 haben wir dieses Thema im Detail betrachtet. Der gesamte Code in diesem Buch ist so zukunftssicher ausgelegt, dass er in beiden Varianten problemlos funktioniert.

Für das Beispielprojekt stellen wir erstmals ein eigenes Stylesheet-Paket bereit. Zuvor hatten wir die Bibliothek Semantic UI genutzt, um die Anwendung zu gestalten. Mit einem eigenen Stylesheet für unser Projekt verkürzen sich nun die HTML-Templates, und der Fokus liegt mehr auf der tatsächlichen Arbeit mit Angular.

Das Thema der digitalen Barrierefreiheit ist ein wichtiger Bestandteil dieser Auflage. Neben einem neuen umfangreichen Kapitel zur Barrierefreiheit im Web ab Seite 577 haben wir auch das Beispielprojekt möglichst barrierearm umgesetzt.

Angular-Module sind ein wichtiger Baustein zur Strukturierung von Angular-Anwendungen. Anstatt das Thema erst zum Ende des Beispielprojekts zu behandeln, setzen wir nun schon frühzeitig in Kapitel 10 ab Seite 141 darauf, die Anwendung in Module zu teilen.

Die AsyncPipe ist ein elementarer Bestandteil von Angular, um die Arbeit mit Observables und Datenströmen zu vereinfachen. Obwohl wir Pipes erst in einem späteren Kapitel ausführlich behandeln, haben wir die AsyncPipe bereits in Kapitel 15 zu RxJS ab Seite 243 aufgegriffen. Im Beispielprojekt verwenden wir nun durchgehend die AsyncPipe, um Observables im Template aufzulösen. Damit orientieren wir uns an den etablierten Best Practices für Angular.

Die Angular DevTools sind ein umfangreiches Debugging-Werkzeug für Angular-Anwendungen. In einem neuen Powertipp ab Seite 321 gehen wir auf die Möglichkeiten dieser Browser-Extension ein.

Im Beispielprojekt setzen wir von vornherein auf das Analysetool ESLint, um einen einheitlichen Codestil zu ermöglichen und Best Practices technisch durchzusetzen, siehe Abschnitt 5.6 ab Seite 68.

Die Kapitel zur Lokalisierung (ab Seite 599) und Internationalisierung (Seite 605) haben wir thematisch getrennt und aus dem Beispielprojekt herausgelöst. Am praktischen Beispiel erläutern wir dort nun auch die Möglichkeit, Übersetzungen zur Laufzeit der Anwendung zu laden.

Das Test-Framework Protractor wird nicht mehr weiterentwickelt. Im Kapitel zu Softwaretests ab Seite 509 setzen wir deshalb für die Oberflächentests nun auf das etablierte Framework Cypress. Außerdem erläutern wir die Möglichkeit, einzelne Komponenten mithilfe von Cypress zu testen.

In Kapitel 32 zum Framework NgRx ab Seite 679 gehen wir auf den Architekturansatz der Facades ein. Außerdem betrachten wir das Framework@ngrx/component-store, mit dem wir den lokalen Zustand von Komponenten verwalten können.

Unter »Wissenswertes« ab Seite 827 geben wir einen kurzen Ausblick auf das populäre Build-Werkzeug Nrwl Nx, mit dem wir Monorepos effizient verwalten können. Außerdem werfen wir einen Blick auf das Tool Storybook, um die Komponenten der Anwendung in einem Katalog darzustellen.

Wir haben umfangreiche Rückmeldungen von unseren Leserinnen und Lesern erhalten. Jede eingegangene Anmerkung haben wir ausführlich diskutiert und bestmöglich im Buch umgesetzt. Ein Fachbuch wie dieses lebt von dem Feedback aus der Community, und wir freuen uns, dass so viele Menschen ihre Anregungen zum Buch mitgeteilt haben.

Wir haben uns in dieser Auflage zum ersten Mal für eine geschlechtsneutrale Ansprache entschieden. Wir freuen uns, dass wir so zumindest einen kleinen Teil dazu beitragen können, unsere alltägliche Sprache inklusiver zu gestalten.

Zu guter Letzt haben wir über vielen Kapiteln Zitate von Persönlichkeiten aus der Angular-Community aufgeführt. Die meisten dieser Stimmen haben wir direkt für dieses Buch erbeten. Wir freuen uns sehr, dass so viele persönliche, interessante und humorvolle Worte diesem Buch eine einmalige Note geben.

Fehler gefunden?

Neben den genannten Kapiteln haben wir alle Texte im Buch kritisch überarbeitet. An vielen Stellen haben wir Formulierungen angepasst, Details ergänzt und Fehler korrigiert. Wenn Sie weitere Fehler finden oder Anregungen zum Buch haben, so schreiben Sie uns bitte!

Teil I

Einführung

1Schnellstart: unser erstes Angular-Projekt

»Scaffolding an Angular project is easier than ever with StackBlitz.

In one click, you can run and edit any Angular CLI project in your browser – powered by Visual Studio Code.

You will feel right at home, trust me!«

Dominic Elm(Mitglied im StackBlitz-Team)

Am besten wird man mit einem neuen Framework vertraut, wenn man die Konzepte und Beispiele direkt selbst ausprobiert. Hierfür wollen wir eine vorbereitete Angular-Anwendung im Browser einsetzen. Wir wollen an diesem Beispiel zunächst nur betrachten, wie eine Anwendung grundsätzlich aufgebaut ist. Danach gehen wir im Beispielprojekt ausführlich auf alle Details des Angular-Frameworks ein.

StackBlitz zum schnellen Setup

Damit wir uns in diesem Kapitel noch nicht damit beschäftigen müssen, ein Angular-Projekt auf dem lokalen Rechner aufzusetzen, wollen wir die Online-Plattform StackBlitz nutzen. StackBlitz ist eine Entwicklungsumgebung für Webanwendungen, die vollständig im Browser läuft. Wenn Sie bereits Visual Studio Code auf dem Desktop einsetzen, wird Ihnen die Oberfläche von StackBlitz bekannt vorkommen: Der Editor basiert auf Visual Studio Code. StackBlitz integriert dazu einen Webserver, sodass wir die entwickelte Anwendung sofort im Browser sehen können. Die Plattform eignet sich sehr gut zum schnellen Prototyping und zum Ausprobieren von Features – also genau passend für diesen Schnellstart. Für eine vollständige Anwendung empfehlen wir Ihnen allerdings, das Tooling auf Ihrer lokalen Maschine aufzusetzen.

Legen wir los! Rufen Sie zuerst die Startseite von StackBlitz auf:

https://stackblitz.com

Direkt von der Startseite aus können wir eine Technologie wählen, in der unser Startprojekt angelegt werden soll. Wir entscheiden uns bei dieser Auswahl natürlich für Angular! Die Startseite von StackBlitz kann sich im Laufe der Zeit ändern, deshalb können Sie auch den folgenden Link nutzen, um eine Angular-Anwendung mit StackBlitz zu erzeugen:

https://ng-buch.de/c/stackblitz-angular

Wir erhalten nun ein vollständiges Angular-Projekt, das theoretisch auch lokal mithilfe der Angular CLI lauffähig ist, die wir uns in Kapitel 3 ab Seite 19 noch genauer ansehen werden. Auf der linken Seite können wir den Quellcode editieren, auf der rechten Seite sehen wir direkt eine Vorschau der Anwendung. StackBlitz aktualisiert die Vorschau automatisch, sobald wir Änderungen vornehmen.

StackBlitz und Drittanbieter-Cookies

Es kann sein, dass die Vorschau auf der rechten Seite nicht korrekt funktioniert. In diesem Fall überprüfen Sie bitte, ob in Ihrem Browser Drittanbieter-Cookies geblockt werden. Wenn Sie die Cookie-Einstellungen nicht global ändern wollen, so hilft eine Ausnahmeregel. Für den Browser Chrome geht dies wie folgt:

Rufen Sie chrome://settings/content/cookies auf. Die Adresse muss aus Sicherheitsgründen stets manuell eingegeben werden.Betätigen Sie Allow und danach Add.Erlauben Sie für [*.]stackblitz.io die Cookies.

Der Browser Brave wird in der Standardeinstellung keine Vorschau zeigen, hier müssen Sie das »Shield« für die Domain stackblitz.com deaktivieren. Mehr Informationen erhalten Sie im dazugehörigen GitHub-Issue.a

ahttps://ng-buch.de/c/4 – GitHub: StackBlitz preview doesn’t work on Chrome

Abb. 1–1Ausgabe im Browser

Projekt in StackBlitz bearbeiten

StackBlitz legt automatisch ein neues Projekt mit einem zufälligen Namen an, den Sie in der URL ablesen können. Dieses Projekt können Sie jederzeit bearbeiten. Bevor Sie die Seite verlassen, sollten Sie jedoch alle Änderungen speichern – mit dem Save-Knopf am oberen Rand oder wie üblich mit der Tastenkombination + bzw. + . Wenn Sie sich in StackBlitz mit Ihrem GitHub-Account einloggen, wird das Projekt Ihrem Account zugeordnet und gehört damit Ihnen.

Aufbau einer Angular-Anwendung

Wir schauen uns nun einmal schrittweise an, wie unsere neue Angular-Anwendung aufgebaut ist. Sie besteht aus den folgenden wichtigen Dateien:

Wir haben die Beziehungen zwischen diesen Dateien in Abbildung 1–2 schematisch dargestellt. Starten wir die Anwendung im Browser, wird zunächst die Datei index.html geladen. Anschließend wird der Code aus der Datei main.ts ausgeführt, der die Anwendung mit dem AppModule startet. Die AppComponent ist schließlich die erste sichtbare Komponente, in der wir unsere Inhalte unterbringen können. Wir werden diesen Ablauf auf den folgenden Seiten detaillierter betrachten.

Abb. 1–2Grundaufbau einer Angular-Anwendung

Das HTML-Grundgerüst

Da wir mit Angular in der Regel eine Webanwendung entwickeln, beginnt unsere Reise ganz klassisch mit einer HTML-Seite, die vom Browser geladen wird. Die Datei index.html besteht üblicherweise aus einem einfachen HTML-Grundgerüst, trägt aber immer eine Besonderheit: das Element <my-app>. Angular verarbeitet dieses Element und rendert an dieser Stelle den Inhalt der zugehörigen Komponente, unsere Root-Komponente AppComponent. Solange Angular noch lädt, wird der ursprüngliche Inhalt des Elements angezeigt, hier der Text »loading«.

<my-app>loading</my-app>

Listing 1–1Die Datei src/index.html

Die Startdatei für das Bootstrapping

Zu einer dynamischen Webseite gehört mehr als nur ein HTML-Grundgerüst. Dafür sorgt die Datei main.ts: Sie wird beim Build der Anwendung automatisch in die index.html eingebunden und katapultiert uns direkt in die Angular-Welt.

// ...

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule)

.then(ref => { /* ... */ })

.catch(err => console.error(err));

Listing 1–2Die Datei src/main.ts

Bootstrapping: die Anwendung zum Leben erwecken

Die einzige Aufgabe dieses Codes ist es, das zentrale Angular-Modul AppModule zu starten. Das Starten der Anwendung nennt man in der Angular-Welt »Bootstrapping«. Wir nutzen dafür die Plattform platformBrowserDynamic, denn wir wollen eine Webanwendung für den Browser entwickeln.

Achtung: Bootstrap hat nichts mit CSS zu tun!

Auch wenn wir im Zusammenhang mit Webanwendungen schnell an das CSS-Framework Bootstrap denken, besteht kein Zusammenhang mit dem Bootstrapping einer Angular-Anwendung.

Das zentrale Angular-Modul

Der Decorator @NgModule()

Unsere nächste Station ist das zentrale Angular-Modul in der Datei app.module.ts im Unterverzeichnis src/app. Eine Angular-Anwendung hat in der Regel ein solches zentrales Modul. Hier werden alle Bestandteile der Anwendung gebündelt, also alle Komponenten, Services, Feature-Module usw. Momentan besitzen wir genau ein Modul, das wird sich aber im Verlauf dieses Buchs noch ändern. Man erkennt ein Angular-Modul daran, dass es mit dem Decorator @NgModule() markiert ist.

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

import { HelloComponent } from './hello.component';

@NgModule({

imports: [ BrowserModule, FormsModule ],

declarations: [ AppComponent, HelloComponent ],

bootstrap: [ AppComponent ]

})

export class AppModule { }

Listing 1–3Die Datei src/app/app.module.ts

Im AppModule wird unter anderem die Klasse AppComponent importiert. Das ist die Hauptkomponente der Anwendung, die wir uns gleich noch genauer ansehen. Die Komponente ist in den Abschnitten declarations und bootstrap im AppModule angegeben. Damit wird die Komponente in der Anwendung bekannt gemacht, sodass wir sie verwenden können. Die Eigenschaft bootstrap sorgt dafür, dass die Komponente beim Start der Anwendung geladen wird.

Achtung: Angular-Modul ≠ JavaScript-Modul

Der Begriff Modul ist doppelt besetzt: Wir meinen damit meist ein Angular-Modul, also einen logischen Container für Bestandteile aus der Angular-Welt. Für modularen JavaScript-Code nach dem ECMAScript-2015-Standard verwenden wir zur Unterscheidung den Begriff »JavaScript-Modul«.

Die erste Komponente

Wir haben jetzt die Reise vom HTML-Grundgerüst über das Bootstrapping bis hin zum zentralen Anwendungsmodul gemacht. Dort wurde unsere erste Komponente deklariert und in der Anwendung bekannt gemacht: die AppComponent. Hier beginnt der Spielplatz für unsere eigenen Inhalte!

Eine Komponente ist immer eine Kombination von sichtbarem Template und dazugehöriger Logik. Wir schauen uns das Komponentenkonzept im Verlauf dieses Buchs noch sehr ausführlich an, denn die Komponenten sind die Grundbausteine einer jeden Angular-Anwendung. Jede Anwendung besitzt eine Hauptkomponente (engl. Root Component), von der aus alle Inhalte aufgebaut werden.

Wir werfen zunächst einen Blick auf die Datei app.component.ts.

Listing 1–4Die Datei src/app/app.component.ts

Hauptkomponente der Anwendung

Hier sehen wir eine TypeScript-Klasse mit einer Besonderheit: dem Decorator @Component(). In der Klasse wird später die Logik unserer Komponente untergebracht. Außerdem finden wir im selben Ordner die Datei app.component.html und eine CSS-Datei mit demselben Namen. Die HTML-Datei beinhaltet das Template der Komponente, also den Teil, der nachher tatsächlich im Browser zu sehen ist. In der CSS-Datei werden Stylesheets untergebracht, die zu dieser Komponente gehören.

Probieren Sie ein wenig herum: Bearbeiten Sie doch einmal das Template und sehen Sie, wie die Anwendung auf der rechten Seite automatisch aktualisiert wird.

Die Hauptkomponente ins HTML einbinden

Wenn Sie die TypeScript-Klasse der AppComponent aufmerksam betrachtet haben, ist Ihnen sicher der Eintrag selector im Decorator aufgefallen. Mit diesem Eintrag können wir festlegen, in welchen Elementen unsere Komponente dargestellt wird. Und erinnern Sie sich? In der Datei index.html war bereits ein Element mit dem Namen <my-app></my-app> vorhanden. Dieses Element passt zum Selektor my-app der AppComponent. Der zuvor enthaltene Text »loading« verschwindet und wird durch den Inhalt der Komponente ausgetauscht.

Neben der Hauptkomponente existiert noch eine weitere Komponente HelloComponent in der Anwendung. Diese ist auch im AppModule referenziert. Im Template der AppComponent finden wir sogar ein passendes Element mit dem Namen <hello>. Werfen Sie nun einmal einen Blick in die Datei hello.component.ts: Diese Komponente besitzt den dazu passenden Selektor hello – auf diese Weise wird die Komponente in dem Element gerendert. Im Praxisteil ab Kapitel 6 werden wir sehr ausführlich auf diese Verhältnisse eingehen und mit Komponenten arbeiten.

Zusammenfassung

Glückwunsch! Es ist geschafft – der Schnellstart mit Angular ist uns gelungen. Wir haben gelernt, wie eine Angular-Anwendung grundsätzlich aufgebaut ist und welche Abhängigkeiten untereinander bestehen.

Die Anwendung wird im Browser ausgeführt, deshalb ist die Datei index.html der Einstiegspunkt. Über die Datei main.ts wird unser zentrales Angular-Modul AppModule geladen (»gebootstrappt«). Von dort aus wird die erste Komponente AppComponent eingebunden. Wir haben gelernt, dass Komponenten die wichtigsten Bausteine unserer Webprojekte sind. Eine Komponente besteht immer aus einem im Browser sichtbaren Template und einer TypeScript-Klasse, die die Logik für das Template beinhaltet.

Wir haben außerdem einen ersten Blick auf den »JavaScriptDialekt« TypeScript geworfen. Für Einsteigerinnen und Einsteiger befindet sich im Kapitel ab Seite 27 eine Einführung in TypeScript.

Die Plattform StackBlitz ist ein nützliches Hilfsmittel zum schnellen Setup einer Angular-Anwendung und läuft vollständig im Browser. Mit diesem Tool können Sie schnell Prototypen entwickeln und Features ausprobieren, ohne das komplette Tooling auf Ihrem Rechner aufsetzen zu müssen. Den Link zu einem StackBlitz-Projekt können Sie übrigens auch weitergeben, sodass andere Personen Ihre Anwendung betrachten können. Wir haben ebenfalls ein kleines Beispielprojekt für Sie aufgesetzt, das wir sehr gerne mit Ihnen teilen:

Demo und Quelltext:https://ng-buch.de/c/stackblitz-start

2Benötigte Werkzeuge: Editor, Node.js und Co.

»Angular’s best feature is its community.«

Dave Geddes(ehem. Organisator der Konferenz ng-conf)

Die Plattform StackBlitz, die wir für den Schnellstart verwendet haben, ist für kleine Projekte und Spielwiesen bestens geeignet. Für eine »richtige« Anwendung sollten wir die Entwicklungsumgebung allerdings lokal auf unserer Maschine aufsetzen. Vorher wollen wir sicherstellen, dass alle notwendigen Programme und Werkzeuge startbereit sind.

Falls Sie bereits fit auf der Konsole sind, eine integrierte Entwicklungsumgebung (IDE) für die Webentwicklung nutzen und mit Node.js und NPM vertraut sind, sind Sie schon gut vorbereitet!

2.1Konsole, Terminal und Shell

Wir werden in diesem Buch einige Befehle auf der Konsole (Terminal) ausführen. Hierfür sollten Sie sich mit der Eingabe von Konsolenbefehlen auf Ihrem Betriebssystem vertraut machen. Arbeiten Sie mit Microsoft Windows, so verwenden Sie hierfür in der Regel das Windows Terminal, die PowerShell oder die Eingabeaufforderung. Setzen Sie macOS oder Linux ein, so empfehlen wir, das Terminal mit der bash oder zsh zu nutzen.

2.2Visual Studio Code

Unser empfohlener Editor für Angular

Visual Studio Code (VS Code)1 ist eine kostenlose und quelloffene Entwicklungsumgebung. Bis auf den sehr ähnlichen Namen und den Ursprung bei Microsoft hat diese IDE übrigens nichts mit dem bekannten Visual Studio zu tun.

Visual Studio Code ist unter Windows, macOS und Linux lauffähig, hat eine moderne Oberfläche und unterstützt zahlreiche Programmiersprachen. Da die TypeScript-Integration sehr ausgereift ist, verwenden wir vorzugsweise diese IDE für die Entwicklung von Angular-Anwendungen. VS Code bringt außerdem eine sehr gute automatische Codevervollständigung und Codedokumentation mit. Außerdem besitzt der Editor von Haus aus eine Git-Integration2.

Abb. 2–1Die Oberfläche von Visual Studio Code

VS Code bietet eine direkte Terminal-Integration an.3 So können Sie die im Buch verwendeten Befehle direkt im Quellcode-Editor eingeben, ohne das Fenster wechseln zu müssen.

Andere Entwicklungsumgebungen nutzen

Wir empfehlen Ihnen, Visual Studio Code zu verwenden, um mit Angular zu entwickeln. Wenn Sie allerdings bereits mit einer anderen geeigneten IDE vertraut sind, können Sie diese selbstverständlich weiter nutzen. Das wichtigste Kriterium ist eine direkte Unterstützung für TypeScript und Angular, ggf. mithilfe von Plug-ins. Aus unserer Erfahrung sind die IDEs der Firma Jetbrains (WebStorm oder IntelliJ) ebenfalls gut geeignet.

Erweiterungen für VS Code

Wir empfehlen zusätzlich noch die Installation einiger Erweiterungen (Extensions), um die Funktionalitäten des Editors optimal auszunutzen. Solche Erweiterungen können über den Marketplace von Visual Studio bezogen werden.4 Die Installation erfolgt am einfachsten über den in den Editor integrierten Extensions Browser.

Abb. 2–2Erweiterungen in VS Code

Erweiterung

Kurzbeschreibung

Angular Language Service5

Editor-Unterstützung für Angular-Templates: ermöglicht Autovervollständigung, Typprüfung und Typinformationen in den Templates.

EditorConfig for VS Code6

Verarbeitet Informationen einer .editorconfig-Datei und konfiguriert den Editor. So können editorenübergreifende Einstellungen für die Anzahl von Leerzeichen, verwendete Zeichencodierung etc. gesetzt werden.

ESLint7

Integration für das Tool ESLint: prüft den Code gegen festgelegte Richtlinien und gibt Hinweise im Editor aus. Wir stellen ESLint ab Seite 68 vor.

Tab. 2–1Empfohlene Erweiterungen für Visual Studio Code

Die Tabelle 2–1 zeigt eine Liste von Erweiterungen, die wir für die Entwicklung mit Angular empfehlen. Der Angular Language Service sollte auf jeden Fall installiert werden, damit der Editor die Templates unserer Anwendung auswerten kann.

2.3Google Chrome

Zur Darstellung der Angular-Anwendung und für das Debugging nutzen wir Google Chrome8. Wir setzen auf diesen Browser, weil er ein umfangreiches Set an Debugging-Tools mitbringt. Diese Chrome Developer Tools schauen wir uns im Powertipp ab Seite 213 genauer an. Mit der Erweiterung Angular DevTools9 steht uns außerdem ein Debugging-Tool für Angular-Anwendungen zur Verfügung. Wir werden im Powertipp auf Seite 321 mehr über dieses Tool erfahren.

Selbstverständlich können Sie auch einen anderen modernen Browser für die Entwicklung verwenden, z. B. Mozilla Firefox, Microsoft Edge oder Safari.

2.4Paketverwaltung mit Node.js und NPM

Das Angular-Tooling setzt auf Node.js.

Node.js10 ist eine Laufzeitumgebung zur Ausführung von JavaScript auf dem Server. Es basiert auf der Google V8 Engine11, die auch in Google Chrome zum Einsatz kommt. Mit Node.js können unter anderem serverbasierte Dienste und Kommandozeilenwerkzeuge mit JavaScript implementiert werden. Viele Tools im Umfeld der Webentwicklung basieren auf Node.js: CSS-Präprozessoren wie Less oder Sass, Tests mit Karma, der Bundler Webpack oder die Angular CLI. Wir verwenden Node.js in diesem Buch nur zum Betrieb der Werkzeuge, die wir für die Entwicklung mit Angular benötigen. Das HTTP-Backend, das wir im Kapitel zu HTTP ab Seite 225 vorstellen, basiert übrigens auch auf Node.js.

NPM-Pakete

Eng verbunden mit Node.js ist der Node Package Manager (NPM): Mit diesem Paketmanager haben wir Zugriff auf eine Vielzahl von Paketen für Node.js und den Browser – er ist das Eingangstor zum vielfältigen Ökosystem von JavaScript. Auf der Website12 können wir nach Paketen suchen. Wir verwenden NPM, um die Abhängigkeiten für unsere Angular-Projekte zu installieren. Dazu gehören nicht nur Tools wie die Angular CLI oder ESLint, sondern auch das Angular-Framework selbst.

Node.js und NPM installieren

Node.js bietet auf der Projektwebseite Installationspakete für die verbreitetsten Betriebssysteme zum Download an.13 Einige Linux-Distributionen führen Node.js auch in den offiziellen Paketquellen, allerdings zum Teil nicht immer in aktueller Version. Verwenden Sie deshalb bitte möglichst die offiziellen Installationspakete von Node.js. Hier sollten Sie eine LTS-Variante wählen, denn sie wird breitflächig von den meisten Paketen unterstützt.

macOS: Homebrew einsetzen

Wenn Sie macOS verwenden, so empfehlen wir hingegen nicht das offizielle Installationspaket. Sie werden wahrscheinlich bei einigen Befehlen eine Fehlermeldung erhalten, wenn Sie diese nicht mit erweiterten Rechten (sudo) ausführen. Wir empfehlen hier die Installation über den Paketmanager Homebrew.14 Installieren Sie zunächst Homebrew und anschließend Node.js über den folgenden Befehl:

$ brew install node

Listing 2–1Node.js installieren mit Homebrew

Nach der Installation prüfen wir auf der Kommandozeile, ob node und npm richtig installiert sind, indem wir die Versionsnummern ausgeben:

$ node -v

$ npm -v

Listing 2–2Versionen von Node.js und NPM prüfen

Achten Sie darauf, dass Node.js und NPM stets aktuell sind, denn manche Tools funktionieren mit alten Versionen nicht.

NPM-Pakete installieren

Stehen Node.js und NPM ordnungsgemäß bereit, so können wir den Paketmanager verwenden. Wollen wir Pakete installieren, unterscheiden wir zwischen einer lokalen und einer globalen Installation.

Lokale Installation

Installieren wir NPM-Pakete lokal, werden diese im Dateisystem unseres jeweiligen Projekts abgelegt. Dafür wird automatisch ein Unterordner mit dem Namen node_modules erstellt, der die installierten Pakete enthält. Diese Variante ist empfehlenswert, wenn wir direkte Abhängigkeiten für ein Projekt installieren möchten. Im Hauptverzeichnis eines Projekts existiert in der Regel eine Datei mit dem Namen package.json, in der alle NPM-Abhängigkeiten verzeichnet sind. Darauf gehen wir auf Seite 61 noch ausführlicher ein, wenn wir unser Beispielprojekt anlegen.

Generell gilt, dass eine lokale Installation der globalen vorzuziehen ist. Wenn wir auf demselben System mehrere Softwareprojekte parallel entwickeln, kann so jedes Projekt seine eigenen Versionen der Abhängigkeiten besitzen. Bei einer globalen Installation könnte es hier zu Konflikten kommen.

$ npm install <paketname>

Globale Installation

Bei der globalen Installation wird das entsprechende Paket in einem zentralen Ordner auf dem System installiert. Diese Variante bietet sich dann an, wenn die Pakete ausführbare Kommandozeilenbefehle beinhalten. Die Befehle sind dann aus jedem Verzeichnis heraus aufrufbar. Wir werden später die Angular CLI kennenlernen (ab Seite 19) und global installieren – auf diese Weise können wir das Werkzeug auf dem gesamten System verwenden. Die Option -g ermöglicht eine globale Installation:

$ npm install -g <paketname>

Zusammenfassung

Unsere Arbeitsumgebung ist nun eingerichtet, und wir sind startklar, um mit Angular zu beginnen. Die vorgestellten Tools greifen uns bei der Arbeit mit Angular unter die Arme, sodass wir viele Dinge nicht von Hand erledigen müssen. Vor allem ein robuster und featurereicher Editor kann uns viel Tipparbeit abnehmen.

2.5Codebeispiele in diesem Buch

Demo und Code auf GitHub

Wir entwickeln in diesem Buch eine praktische Anwendung. Die dazugehörigen Projekte haben wir Ihnen zentral zur Verfügung gestellt. Auf der folgenden Seite finden Sie eine Übersicht über alle Zwischenstände des Beispielprojekts BookMonkey:

https://ng-buch.de/bm5-demo

Dort finden Sie neben dem Quellcode jeweils auch eine Demo. Alle Projekte sind auf der Entwicklungsplattform GitHub15 gehostet. Wenn Sie mit Git16 arbeiten, können Sie jedes GitHub-Repository direkt über folgende Kurzlinks klonen und verwenden.

$ git clone https://ng-buch.de/bm5-01-components.git

$ git clone https://ng-buch.de/bm5-02-prop.git

$ git clone https://ng-buch.de/bm5-03-event.git

$ git clone https://ng-buch.de/bm5-04-modules.git

$ git clone https://ng-buch.de/bm5-05-di.git

$ git clone https://ng-buch.de/bm5-06-routing.git

$ git clone https://ng-buch.de/bm5-07-http.git

$ git clone https://ng-buch.de/bm5-08-rxjs.git

$ git clone https://ng-buch.de/bm5-09-interceptors.git

$ git clone https://ng-buch.de/bm5-10-tdforms.git

$ git clone https://ng-buch.de/bm5-11-rforms.git

$ git clone https://ng-buch.de/bm5-12-validation.git

$ git clone https://ng-buch.de/bm5-13-pipes.git

$ git clone https://ng-buch.de/bm5-14-directives.git

$ git clone https://ng-buch.de/bm5-15-lazyloading.git

$ git clone https://ng-buch.de/bm5-16-guards.git

$ git clone https://ng-buch.de/bm5-17-standalone.git

Listing 2–3Beispielprojekt in verschiedenen Stadien klonen

$ git clone https://ng-buch.de/bm5-l10n.git

$ git clone https://ng-buch.de/bm5-i18n.git

$ git clone https://ng-buch.de/bm5-cypress.git

$ git clone https://ng-buch.de/bm5-docker.git

$ git clone https://ng-buch.de/bm5-ngrx.git

$ git clone https://ng-buch.de/bm5-ssr.git

$ git clone https://ng-buch.de/bm5-pwa.git

Listing 2–4Alle weiteren Codebeispiele klonen

Alternativ ist ein Download als ZIP-Archiv möglich. Rufen Sie dafür einfach einen der vielen QR-Code-Links auf, die Sie am Ende eines jeden Praxisteils finden, und laden Sie das ZIP-Archiv entsprechend der Abbildung 2–3 herunter.

Abb. 2–3Ein Codebeispiel dieses Buchs von GitHub als ZIP herunterladen

3Angular CLI: der Codegenerator für unser Projekt

»The reason people come to Angular isbecause this is where you can get your job done best.«

Brad Green(ehem. Angular Engineering Director)

Wir haben im Schnellstart gesehen, wie eine Angular-Anwendung grundsätzlich aufgebaut ist. Zugegeben, eine »rohe« Angular-Anwendung braucht verhältnismäßig viele Vorbereitungen, die wir nicht per Hand ausführen möchten. Außerdem sind die Schritte für die meisten Einsatzzwecke immer gleich. Weiterhin wollen wir für die Entwicklung nicht auf eine Online-Plattform zurückgreifen, sondern mit unserer lokalen IDE arbeiten.

Angular bringt dafür ein ausgereiftes Tool mit, das uns bei der Arbeit mit unseren Projekten durchgehend unterstützt: die Angular CLI. In diesem Kapitel werden wir die Installation und die wichtigsten Befehle des Kommandozeilentools kennenlernen.

3.1Das offizielle Tool für Angular

Codegenerierung und Automatisierung

Die Angular CLI1 ist das offizielle Werkzeug für unsere Angular-Anwendungen. Das Tool stellt Vorlagen und Befehle für alle wiederkehrenden Aufgaben bereit, vom Anlegen eines Projekts über Codegenerierung und einen Entwicklungswebserver bis hin zur Ausführung von Unit-Tests und dem finalen Deployment. Der generierte Code orientiert sich stets am offiziellen Styleguide von Angular.2 Somit folgen alle Angular-Projekte einer konsistenten Struktur und bauen auf dieselbe Toolchain auf.

Tooling für die EntwicklungWebserver mit Live Reload

Beim Anlegen eines neuen Projekts wird alles Nötige vorbereitet: Alle Dateien werden angelegt, NPM-Pakete werden installiert und das Projekt wird unter Versionsverwaltung (Git) gestellt. Während der Entwicklung können wir die Grundgerüste für unsere Komponenten, Services, Module, Pipes und Direktiven automatisch generieren lassen. Dabei ist es sogar möglich, eigene Vorlagen (Schematics) in ein Projekt zu integrieren. Wiederkehrende Aufgaben wie das Bauen des Projekts oder die Ausführung von Unit- und Oberflächentests sind bereits eingerichtet. Auch ein Webserver für die Entwicklung wird mitgeliefert, sodass wir das Projekt ohne zusätzliche Abhängigkeiten direkt auf dem lokalen System ausführen können. Eine Überwachung des Dateisystems (kurz: watch) sorgt dafür, dass die Anwendung bei jedem Speichervorgang automatisch im Browser aktualisiert wird. Außerdem werden Skripte angeboten, um eine Anwendung automatisch zu aktualisieren oder andere Pakete in das Projekt zu integrieren. Kurz: Die Angular CLI unterstützt uns durch die Automatisierung bei allen Routineaufgaben rund um unser Angular-Projekt. Lassen Sie uns das Tool einrichten und verwenden!

3.2Installation

Um die Angular CLI nutzen zu können, sollten wir das Tool als globales NPM-Paket installieren:

$ npm install -g @angular/cli

Danach können wir die Angular CLI mit dem Befehl ng auf der Kommandozeile ausführen.

Auf eine globale Installation verzichten

Wenn wir die Angular CLI nicht global installieren wollen, können wir für die Ausführung auch das Tool npx verwenden. Es wird zusammen mit Node.js und NPM installiert. Wir können damit ein Programm aus einem NPM-Paket ausführen. Existiert das Paket nicht im aktuellen Projekt, so wird es temporär heruntergeladen. Heißt der auszuführende Befehl anders als das dazugehörige NPM-Paket, so können wir mit -p das Paket angeben, aus dem der Befehl stammt. Außerhalb eines Angular-Projekts müssen wir die Paketquelle immer explizit notieren.

$ npx -p @angular/cli ng <command>

Führen wir diesen Befehl innerhalb eines Angular-Projekts aus, wird die lokal installierte Version der Angular CLI genutzt, die in der Datei package.json definiert ist und im Verzeichnis node_modules liegt. Dann ist es ausreichend, den Befehl npx ng zu verwenden, um die Angular CLI auszuführen.

Wir empfehlen Ihnen für den Anfang dennoch, die Angular CLI global auf Ihrer Maschine zu installieren, damit der Befehl ng direkt verfügbar ist.

Analytics

Sobald wir das Kommando ng zum ersten Mal ausführen, fragt die Angular CLI um Erlaubnis für die Analytics: Aktivieren wir diese Funktion, werden anonymisierte Nutzungsdaten an das Angular-Team bei Google übermittelt. Die Informationen sollen zur Verbesserung von Angular verwendet werden. Welche Daten erhoben werden, ist in der Dokumentation beschrieben.3

Ob Sie dieses Feature aktivieren oder auf die Datensammlung verzichten, dürfen Sie selbst entscheiden. Wir können die Einstellung jederzeit ändern und die Analytics so auch nachträglich ein- oder ausschalten:

$ ng analytics info # Aktuellen Status anzeigen

$ ng analytics disable # Analytics deaktivieren

$ ng analytics enable # Analytics aktivieren

Listing 3–1Analytics konfigurieren

3.3Die wichtigsten Befehle

Möchten wir ein neues Projekt beginnen, so generieren wir dieses mit dem Befehl ng new.

$ ng new my-first-project

Listing 3–2Neues Projekt generieren mit der Angular CLI

Die Angular CLI wird uns mithilfe einer Eingabeaufforderung einige Fragen stellen. Mit den Pfeiltasten können wir eine Auswahl treffen und mit der -Taste bestätigen. Das neue Projekt wird in einem eigenen Unterordner angelegt, und die notwendigen NPM-Pakete werden mithilfe von npm install installiert. Alle abgefragten Einstellungen können wir übrigens auch als Parameter an den Befehl anhängen.

Alternative: Projektsetup mit npm init

Als Alternative zu ng new bietet Angular ein Init-Skripta für NPM an.

$ npm init @angular my-first-project

Der Befehl führt zum gleichen Ergebnis wie ng new, allerdings müssen wir die Angular CLI nicht global installieren. Innerhalb des Projekts können wir die Angular CLI anschließend mithilfe von npx ausführen, siehe Kasten auf Seite 20. Wir werden das Init-Skript in diesem Buch nicht verwenden. Stattdessen haben wir die Angular CLI global installiert und können ng new direkt aufrufen.

ahttps://ng-buch.de/c/23 – npm-init | npm Docs

Komponenten erstellen

Die Angular CLI bietet außerdem verschiedene Generatoren an, um die Bausteine der Anwendung zu generieren. Zum Beispiel können wir mit dem folgenden Befehl im Arbeitsverzeichnis des Projekts eine neue Komponente FooComponent generieren.

$ ng generate component foo

Wir werden im Verlauf dieses Buchs mehrere dieser Generatoren kennenlernen. In Anhang A ab Seite 859 haben wir die wichtigsten Befehle der Angular CLI als Referenz aufgelistet.

Die Angular CLI dient vor allem dazu, uns an vielen Stellen Arbeit abzunehmen. Wir sind schon jetzt auf demselben technischen Stand wie zum Ende des Schnellstarts. Die Anwendung lässt sich mit dem folgenden Befehl kompilieren und starten:

$ ng serve

Listing 3–3Anwendung starten

Um den Prozess wieder zu beenden, nutzen wir die Tastenkombination +.

Wie es sich für professionelle Software gehört, wurden auch gleich Unit-Tests für die Komponenten angelegt. Natürlich hat die Anwendung noch keine wirklichen Funktionen, sodass auch die angelegten Unit-Tests entsprechend kurz ausfallen. Um den Test-Runner zu starten, wird das folgende Kommando verwendet:

$ ng test

Listing 3–4Unit-Tests ausführen