Angular -
Das umfassende Handbuch

Freuen Sie sich auf Ihre erste Angular-Applikation. Am Beispiel einer Blogging-Plattform werden Sie die wichtigsten Angular-Konzepte kennenlernen und erste Kontakte mit einer Menge neuer und spannender Technologien knüpfen.

In diesem Kapitel lernen Sie unter anderem:

• Aus welchen Bestandteilen einen Angular-Anwendung besteht.
• Was eine Angular-Komponente ist und wie Sie diese definieren können.
• Wie Sie Komponenten-Schnittstellen definieren.

Quellcode zum Kapitel: https://github.com/angularbuch/kickstart

Eine der größten Stärken des JavaScript-Ökosystems ist gleichzeitig auch eine seiner größten Schwächen: Die Masse an verfügbaren Tools und Möglichkeiten ist schier unendlich. Das Angular-CLI sagt dieser Unübersichtlichkeit den Kampf an.

In diesem Kapitel werden Sie lernen, wie Sie das CLI verwenden können, um damit Folgendes zu tun:

• ein voll funktionales Applikationsgerüst erstellen
• Komponenten, Services, Pipes und vieles mehr generieren
• die Applikation und Tests ausführen
• die Angular-Version updaten
• Projektabhängigkeit hinzufügen
• einen Produktionsbuild über webpack erstellen
• einen CSS-Präprozessor wie Sass, Less oder Stylus integrieren

»Everything is a component« – ganz so einfach ist die Angular-Welt zwar nicht, aber Komponenten sind ohne Zweifel eines der wichtigsten Konzepte des Frameworks.

In diesem Kapitel werden Sie lernen

• Wie Sie die Templating-Syntax dazu verwenden können komplexe Komponenten-Templates zu implementieren
• Wie Sie mithilfe von @Input- und @Output-Bindings elegante Komponenten-Schnittstellen definieren
• Was Content-Insertion ist, und wie Sie diese dazu nutzen können, Ihren Komponenten dynamischen Inhalt hinzuzufügen
• Worauf Sie achten müssen, wenn Sie auf Kind-Komponenten Ihrer Komponente zugreifen wollen
• Welchen Lebenszyklus Angular-Komponenten haben und wie Sie mithilfe von Lifecycle-Hooks auf die unterschiedlichen Zyklen reagieren können.

Quellcode zum Kapitel: https://github.com/angularbuch/sprachkern

Komponenten ohne Template? Das mag zunächst etwas unnötig klingen. Aber insbesondere dann, wenn Sie Bestandteile Ihrer Anwendung lediglich um Verhalten erweitern möchten, können Direktiven Ihnen das Leben deutlich erleichern!

So werden Sie unter anderem lernen,

• wie Sie Direktiven dazu verwenden können, DOM-Eigenschaften des selektierten Elements zu verändern.
• was HostBindings und HostListener sind und warum diese insbesondere bei der Implementierung von Direktiven hilfreich sind.
• wie Direktiven eingesetzt werden können, um Bestandteile aus Drittanbieter-Bibliotheken (wie jQuery-UI) in Ihre Anwendung zu integrieren.
• warum Direktiven der perfekte Syntaxbaustein für die Steuerung von mehreren Unterkomponenten sind (Stichwort: Accordion-Direktive).
• welche Besonderheit Sie bei der Definition von lokalen Template-Variablen für Direktiven beachten müssen.

Quellcode zum Kapitel: https://github.com/angularbuch/sprachkern

Nachdem Sie nun die Grundlagen der Angular-Entwicklung kennen, geht es in diesem Kapitel in die Tiefe. Das Framework wartet mit einer Reihe interessanter Innovationen auf, die Ihnen bei der Entwicklung von professionellen Webanwendungen behilflich sein werden.

In diesem Kapitel werden Sie unter anderem lernen:

• welche Möglichkeiten Ihnen Angular bietet, um das CSS-Styling Ihrer Komponenten direkt an den Komponenten zu pflegen.
• wie Sie mithilfe der Klassen TemplateRef und NgTemplateOutlet Teile Ihres Komponenten-Markups dynamisch austauschen können.
• wie Sie die Klasse ViewContainerRef dazu verwenden können, Komponenten aus Ihrem Komponenten-Code heraus zu instanziieren und zu löschen.
• wie der Angular-ChangeDetection-Mechanismus funktioniert und welche Optionen Ihnen zur Optimierung des ChangeDetection-Verhaltens und somit zur Optimierung Ihrer Performance zur Verfügung stehen.

Quellcode zum Kapitel: https://github.com/angularbuch/sprachkern

In diesem Kapitel möchte ich Ihnen die mit Angular mitgelieferten Standarddirektiven vorstellen. Sie werden lernen, in welchen Szenarien bestimmte Direktiven hilfreich sind und welche Optionen zur Konfiguration und Verwendung von den jeweiligen Direktiven bereitgestellt werden. Der zweite Teil des Kapitels wird sich anschließend mit Pipes beschäftigen. Pipes bieten Ihnen die Möglichkeit, Daten on the fly für die Darstellung im UI zu transformieren. Mit dem Abschluss dieses Kapitels werden Sie wissen,

• wie Sie mithilfe von NgIf und NgSwitch Teile Ihrer View abhängig von Eigenschaften ein- bzw. ausblenden können.
• wie NgClass und NgStyle Ihnen dabei helfen, das Aussehen Ihrer Komponenten dynamisch zu beeinflussen.
• welche Möglichkeiten Ihnen die NgFor-Direktive für die flexible Darstellung von Listen bietet.
• was Pipes sind und wie sie Sie bei der dynamischen Transformation von dargestellten Werten unterstützen.
• welche Standard-Pipes Angular Ihnen bereitstellt.
• wie Sie das Verhalten von Pipes wie der DatePipe oder der NumberPipe abhängig vom eingestellten Sprach-Locale verändern können.
• inwiefern die AsyncPipe eine Sonderrolle unter den Pipes darstellt und wie sie Ihnen die Arbeit mit asynchronen Daten vereinfacht.
• wie Sie eigene Pipes implementieren können und was der Unterschied zwischen Pure und Impure Pipes ist.

Quellcode zum Kapitel: https://github.com/angularbuch/standard-direktiven

Während Dependency-Injection in anderen Programmiersprachen schon lange zu den verbreiteten Standardkonzepten gehört, ist das Thema in der JavaScript-Welt immer noch recht neu. Angular nimmt hier erneut eine Vorreiterrolle ein.

So werden Sie mit Abschluss dieses Kapitels wissen,

• was Dependency-Injection im Detail bedeutet und wieso diese Technik gut für Ihre Architektur ist.
• welche Rolle Services im Rahmen Ihrer Anwendung spielen.
• welche Möglichkeiten Ihnen der Angular-DI-Mechanismus für die Bereitstellung von Klassen-Instanzen, einfachen Werten und dynamischen Factorys bietet.
• wie Sie über den hierarchischen Injector-Baum für noch mehr Flexibilität in Ihrer Anwendung sorgen können.
• was Treeshakable-Providers sind und wie Sie diese verwenden können, um die Größe der generierten Anwendung zu optimieren.
• warum es sinnvoll sein kann, die Sichtbarkeit von Abhängigkeiten zu reduzieren, und wie Angular Sie dabei unterstützt.
• wie Sie über die Konfiguration des Lookups von Abhängigkeiten Anwendungsfälle wie optionale Dependencys und rekursive Strukturen realisieren können.

Quellcode zum Kapitel: https://github.com/angularbuch/dependency-injection

Formulare bilden die wichtigste Schnittstelle zwischen Ihren Nutzern und der Applikation . In diesem Kapitel werden Sie lernen, wie Sie mithilfe der Angular-Forms-API auch komplexe Eingabeszenarien sehr intuitiv umsetzen können.

So werden Sie in diesem Kapitel lernen,

• wie Sie mithilfe von Template-driven Forms komplexe Formulare auf Basis von HTML definieren können.
• wie Sie auf Basis von NgModel sowohl One-Way- als auch Two-Way-Data-Binding-Szenarien umsetzen.
• welche Möglichkeiten Ihnen das Framework für die Validierung von Nutzereingaben bereitstellt.
• wie Ihre in HTML definierten Formulare mit dem Forms-API und den dort verwendeten Klassen FormGroup und FormControl zusammenarbeiten.

Quellcode zum Kapitel: https://github.com/angularbuch/formular

Nachdem Sie sich im vorigen Kapitel mit dem HTML-zentrierten Ansatz der Template-driven Forms befasst haben, werden Sie in diesem Kapitel den TypeScript-getriebenen reaktiven Ansatz verwenden.

In diesem Kapitel werden Sie lernen

• wie Sie Formularlogik im TypeScript-Code erzeugen.
• wie Sie aus Ihrem HTML Code eine Verknüpfung zu dem in TypeScript erzeugten Formular hergestellen.
• wie Sie hochdynamische Formulare auf Basis von Meta-Modellen (z.B. in Form einer JSON-Konfiguration) erstellen können.

Quellcode zum Kapitel: https://github.com/angularbuch/formular

Eine der Kernfunktionalitäten einer Webapplikation ist das Routing, also die Abbildung des aktuellen Zustands der Applikation auf eine adressierbare URL. In diesem Kapitel werden Sie lernen, welche Funktionalitäten Angular bereitstellt, um Sie bei der Umsetzung von komplexen Routing-Anforderungen zur unterstützen. Außer mit der eigentlichen Routenkonfiguration werden Sie dabei mit einer Vielzahl an interessanten Techniken in Kontakt kommen. So werden Sie im Laufe des Kapitels unter anderem lernen,

• wie Sie beliebig tief verschachtelte Routen definieren können.
• welche Vorteile Ihnen die Verwendung der RouterLink-DSL (Domain Specific Language) zur Erstellung von Links bietet.
• wie Sie dynamische Parameter an Ihre Komponenten übertragen können und welche Unterschiede es zwischen Pfad-, Matrix- und Query-Parametern gibt.
• warum Sie manchmal direkt mit der Browser-URL interagieren sollten.
• wie Sie mithilfe des Title-Service den Seitentitel dynamisch verändern können.
• auf welchem Weg Sie Routen vor unberechtigtem Zugriff schützen können und wie Sie das Verlassen einer Seite verhindern.
• wie Sie über mehrere RouterOutlets noch mehr Flexibilität bei Ihrer Routendefinition erhalten.

Quellcode zum Kapitel: github.com/angularbuch/project-manager-routing

Die Anbindung von externen Services erfolgt im Webumfeld fast immer per HTTP. Neben dem Ausführen von Requests und der Verarbeitung von Responses bedeutet dies auch, dass Ihre Anwendung nun mit asynchronen Daten zurechtkommen muss: Das AngularHTTP-Framework macht dies zu einem Kinderspiel!

So werden Sie mit Abschluss dieses Kapitels wissen:

• welche Methoden Ihnen der HttpClient-Service zur Anbindung von HTTP-Backends zur Verfügung stellt.
• warum Observable-Streams eine deutliche Verbesserung zum klassischen Callback-Pattern darstellen.
• wie das HTTP-Framework Sie bei der Arbeit mit Query-Parametern und HeaderWerten unterstützt.
• wie Sie mithilfe der AsyncPipe für eleganten Komponenten-Code sorgen können und wann dieser Ansatz an seine Grenzen stößt.
• was JsonP ist und wie Ihnen das HTTP-Framework die Arbeit mit dieser Technik vereinfacht.

Quellcode zum Kapitel: github.com/angularbuch/project-manager-http

Nachdem Sie in den vorangegangenen Kapiteln schon in verschiedenen Bereichen Kontakte mit der Bibliothek RxJS und der Observable-Klasse geknüpft haben, geht es in diesem Kapitel reaktiv ans Eingemachte. So haben Sie beispielsweise in Kapitel 11, »HTTP: Anbindung von Angular-Applikationen an einen Webserver«, Techniken kennengelernt, mit denen Sie asynchron geladene Daten sehr elegant auf Ihrer Oberfläche darstellen können (Stichwort AsyncPipe)

Der konsequente Einsatz von reaktiven Technologien bietet Ihnen in diesem Zusammenhang die Möglichkeit, Ihre Anwendung sowohl deutlich flexibler als auch performanter zu gestalten.

So werden Sie in diesem Kapitel unter anderem lernen:

• welche Rolle die grundlegenden Bestandteile Observables und Observer in einer reaktiven Anwendung spielen.
• wie Sie mit wenigen Zeilen Code eine Typeahead-Suche implementieren und dabei die reaktiven Bestandteile, die von den Forms-, Routing- und HttpClient-Modulen bereitgestellt werden, elegant miteinander verbinden können.
• was eine »Push-getriebene« Datenarchitektur ist und welche Vorteile Ihnen diese bei der Entwicklung einer komplexen Anwendung bieten kann.
• welche grundsätzlichen Ideen hinter dem Schlagwort Redux stehen und wie Sie diese Technik elegant mit Observable-Streams kombinieren können.
• wie Sie Ihre Anwendung mithilfe von Websockets ohne großen Aufwand echtzeitfähig machen können.

Quellcode zum Kapitel: github.com/angularbuch/project-manager-reactive

Tests zu schreiben ist für viele Entwickler immer noch eine lästige Pflichtaufgabe. Auf Basis des Angular-Testing-Frameworks kann es aber sogar Spaß machen. Und Ihre Nutzer werden Ihnen die verbesserte Stabilität mit Sicherheit danken!

Im Laufe des Kapitels werden Sie unter anderem lernen:

• welche Funktionalität Ihnen der Test-Runner Karma zur Verfügung stellt.
• wie Sie auf Basis von Jasmine einfache Klassen und Funktionen testen können.
• wie Ihnen das Angular-Testing-Framework dabei hilft, auf elegante Art und Weise einen definierten Test-Kontext zu erstellen.
• welche Möglichkeiten der Komponenten-Erzeugung Sie haben und warum es manchmal Sinn macht, eine zu testende Komponente vor dem Test zu manipulieren.
• was Mocks und Spies sind und wie diese Ihnen bei der Entwicklung von aussagekräftigen Tests helfen können.
• welche Besonderheiten Sie bei der Entwicklung von Tests für asynchrone Funktionalität beachten müssen und wie Angular Sie bei der Realisierung solcher Tests unterstützt.
• wie Sie komponentenübergreifende Funktionalität wie Routing mithilfe des Testing-Frameworks testen können.

Quellcode zum Kapitel: github.com/angularbuch/project-manager-reactive

ntegrationstests helfen Ihnen sicherzustellen, dass Ihre Anwendung als Ganzes funktioniert. Denn was hilft es schon, wenn Sie super getestete Komponenten haben, Ihre Applikation aber gar nicht erst hochfährt? Cypress macht solche Tests zu einem Kinderspiel!

So werden Sie Im Laufe dieses Kapitels lernen:

• wie Sie Cypress zu Ihrem Angular-Projekt hinzufügen können.
• was den interaktiven Modus vom Headless-Modus unterscheidet.
• wie Sie Ihre Anwendung mithilfe von Cypress sowohl mit echten als auch mit emulierten Daten testen können.
• wie Sie zur Überprüfung von Ergebnissen Screenshots und Videos von Ihren Testfällen anfertigen können.

Quellcode zum Kapitel: github.com/angularbuch/project-manager-reactive

Ihre Anwendung wächst und wächst. Nun gilt es, nicht die Kontrolle zu verlieren. Mit NgModule und Lazy-Loading gibt Angular Ihnen zwei Werkzeuge an die Hand, mit denen die Modularisierung Ihrer Anwendung ein Leichtes ist!

Im Rahmen dieses Kapitels werden Sie unteranderem lernen, was ein Feature-Modul ist und wie Sie diese Technik nutzen können, um Ihre Anwendung zu modularisieren. wieso Sie gemeinsam genutzte Funktionalität in Shared-Module auslagern sollten. wann es sinnvoll ist, pro Komponente ein eigenes Modul zu definieren. welche Besonderheiten es beim Umgang mit Services zu beachten gilt. wie Sie Lazy-Loading einsetzen können, um Code erst dann zu laden, wenn er wirklich benötigt wird.

Quellcode zum Kapitel: github.com/angularbuch/project-manager-modular

Während Sie in anderen Webframeworks bei der Entwicklung von mehrsprachigen Applikationen bis heute auf den Einsatz von Drittbibliotheken angewiesen sind, hat sich das Angular-Team dafür entschieden, das Thema direkt in den Anwendungskern zu integrieren. Dabei hat die bereitgestellte Lösung deutlich mehr als die einfache Übersetzung von Strings zu bieten.

Im Laufe dieses Kapitels werden Sie lernen:

• wie Sie Ihr Projekt für die Verwendung des i18n-Moduls konfigurieren.
• wie Sie einfache Textbestandteile, Attribute und komplexe DOM-Elemente mithilfe des i18n-Moduls übersetzen können.
• wie Sie mithilfe von Platzhaltern dynamische Bestandteile in Strings kennzeichnen können.
• was der $localize-Service ist und wie Sie diesen dazu verwenden können, Texte aus Ihren TypeScript-Klassen heraus zu übersetzen.
• was das XLIFF-Format ist und wie das Kommandozeilen-Tool ng-xi18n Sie bei der Generierung von Messaging-Files unterstützt.
• welche Möglichkeiten das Framework Ihnen für die Übermittlung von Metadaten zur Beschreibung des Übersetzungskontextes bietet.

• wie die Themen Pluralisierung und geschlechtsspezifische Texte in Angular unterstützt werden.

• Quellcode zum Kapitel: https://github.com/angularbuch/internationalisierung

Animationen wurden in der Vergangenheit oft als »Beiwerk« zur eigentlichen Anwendung betrachtet. Angular geht hier einen neuen Weg: Durch eine geschickte Verbindung zwischen Komponenten-Zustand und Animationsausführung lassen Animationen sich nun nahtlos in Ihre Applikationslogik integrieren.

• wie Sie über das Animation-Framework eine deklarative Anbindung einer Komponente an die Animationsausführung erstellen können.
• welche vordefinierten Timing-Funktionen Ihnen für die Definition natürlich wirkender Animationen zur Verfügung stehen.
• wie Sie auf das Hinzufügen oder Entfernen von Elementen aus dem DOM-Baum reagieren können.
• welche Feinheiten Sie bei der Animation von Elementen mit dynamischer Höhe oder Breite beachten müssen.
• was Keyframe-Animationen sind und wie Sie mit ihrer Hilfe beliebig komplexe Animationen realisieren können.
• welche Möglichkeiten Ihnen die Funktionen group und sequence für parallel bzw. sequenziell ablaufende Animationen bieten.
• wie Sie mithilfe der query-Funktion komplexe Komponenten animieren können.
• was Staggering bedeutet und wie Sie damit Ihre Listendarstellungen verschönern können.

Quellcode zum Kapitel: https://github.com/angularbuch/animationen

Die Designsprache »Material Design« ist die gestalterische Grundlage von »Angular Material«, des offiziellen UI-Baukastens für Angular. Sie hilft Ihnen, formschöne und interaktive Anwendungen in Rekordzeit zu implementieren.

Nach Abschluss dieses Kapitels werden Sie unter anderem wissen:

• Was Material Design ausmacht und inwiefern es sich von klassischen CSS-Frameworks unterscheidet.
• Aus welchen Bausteinen eine Material-Design-Anwendung besteht und wie diese Ihnen dabei helfen, formschöne Oberflächen zu entwickeln.
• Wie Angular Material die Material-Design-Prinzipien umsetzt.
• Wie Sie typische UI-Elemente wie Navigationsleisten, Listen, dynamische Dialoge und Formulare auf Basis von Angular Material implementieren können.
• Was ein Material-Design-Theme ist und wie Sie eigene Themes für Ihr Unternehmen entwerfen können.

Quellcode zum Kapitel: https://github.com/angularbuch/babywatch

Die Möglichkeit, Funktionalität in Bibliotheken auszulagern, hilft Ihnen zum einen bei der Strukturierung Ihrer Anwendung. Zum anderen können Sie auf diese Weise Ihre Komponente der ganzen Welt zur Verfügung stellen. In diesem Kapitel lernen Sie, wie Angular Sie hierbei unterstützt!

So werden Sie im Laufe dieses Kapitels lernen:

• Wie Sie mit dem Angular-CLI ein Grundgerüst einer Bibliothek (Library) erstellenkönnen.
• Was eine solche Library von einer Standardanwendung unterscheidet.
• Worauf Sie bei der Strukturierung Ihres Angular-CLI-Projekts achten sollten.
• Was Mono-Repos sind und welche Vorteile diese für Ihre Projekte bringen können.
• Wie Sie Bibliotheken in einer eigenen NPM-Registry veröffentlichen können.

Quellcode zum Kapitel: https://github.com/angularbuch/button-chooser-lib

Custom Elements sind eines der interessantesten und mächtigsten Konzepte aus dem WebComponents-Standard. Mit Angular Elements haben Sie nun die Möglichkeit, Ihre Angular-Komponenten als Standard-WebComponents zu exportieren!

So werden Sie in denkommenden Abschnitten lernen:

• Was Custom Elements sind und wie Sie diese beim Browser registrieren können.
• Wie Sie Angular-Komponenten als Custom Elements bereitstellen können, um sie somit unabhängig von einer Angular-Anwendung verwenden zu können.
• Wie Sie die Schnittstelle zu Ihrem Custom Element über Input- und Output-Bindings beschreiben können.
• Was Zoneless Components sind und warum Sie diese im Kontext von WebComponents verwenden sollten.
• Worauf Sie achten müssen, wenn Sie Angular-Komponenten in anderen Technologie-Stacks einbinden möchten.

Quellcode zum Kapitel: https://github.com/angularbuch/button-chooser-lib

Die Container-Plattform Docker ist aus professionellen IT-Infrastrukturen nicht mehr wegzudenken, und auch für das Deployment von Webapplikationen bietet diese Technik viele Vorteile. Freuen Sie sich darauf, Ihre Angular-Anwendung Enterprise-ready zu machen!

So werden Sie in den folgenden Abschnitt lernen:

• Wie Sie mithilfe von Dockerfiles eigene Docker-Images definieren können.
• Wie Sie Container starten, stoppen und konfigurieren können.
• Was Multi-Stage Builds sind und wie diese Ihnen dabei helfen können, Ihre Anwendungen verlässlich zu kompilieren.
• Was Sie bei der Ausführung von Angular-Tests in der Docker-Umgebung beachten müssen.
• Wie Sie Ihre Anwendung über Umgebungsvariablen dynamisch konfigurieren können.
• Wie der Angular APP_INITIALIZER-Mechanismus funktioniert.

Quellcode zum Kapitel: https://github.com/angularbuch/project-manager-modular

Server-Side Rendering spielt insbesondere bei der Entwicklung von »öffentlichen« Anwendungen eine immer wichtigere Rolle. In diesem Kapitel werden Sie lernen, welche Vorteile, aber auch welche Besonderheiten die Entwicklung von Angular-Anwendungen mit sich bringt, die auf dem Server gerendert werden.

Um dieses Problem zu lösen, werden Sie im Laufe dieses Kapitels lernen:

• Was Server-Side Rendering (SSR) ist und wie diese Technik Sie bei der Erstellung vonprofessionellen Anwendungen unterstützen kann.
• Was Sie tun müssen, um eine bestehende Angular-Anwendung auf dem Server zurendern.
• Wie die StateTransfer-API Sie dabei unterstützen kann, performantere Anwendungen zu implementieren.
• Wie Sie Ihre Anwendung mithilfe des Title- und des Meta-Service fit für SEO undSocial-Media-Plattformen machen.
• Welche Einschränkungen es bei der Entwicklung von SSR-Anwendungen gibt undwie Sie diese Einschränkungen umgehen können.
• Wie Sie Ihre auf dem Server gerenderte Anwendung in der Google-Cloud deployen können.

Quellcode zum Kapitel: https://github.com/angularbuch/project-manager-ssr