[email protected] - 0f3f24d96462e25781e8 ... · Cross-Platform Framework Angular ist ein...

[email protected] - 0f3f24d96462e25781e8-20170620113503-12400-1

Angular

Liebe Leserin, lieber Leser,

wenn Sie mit der neuen Version 5 von Angular arbeiten möchten, infor-

mieren wir Sie unter https://angular-buch.com/angular-5 über Breaking

Changes und neue Funktionen. Die Quelltexte auf Github sind ebenso auf

dem neuesten Stand und unterscheiden sich an den notwendigen Stellen.

Wir freuen uns auf Ihren Besuch und wünschen Ihnen viel Spaß mit Angular.

Alles Gute

Johannes, Danny, Ferdinand, Gregor

Gregor Woiwode ist angestellter Softwareentwickler und Trainerbei der Firma co-IT.eu GmbH. Er fokussiert sich auf die Erstellungvon Webportalen. Nebenbei engagiert er sich in der Community,indem er Coding-Dojos und Konferenzen an den StandortenLeipzig und Berlin organisiert.

Ferdinand Malcher arbeitet als selbstständiger Softwareentwic-kler und Trainer mit Schwerpunkt auf Webanwendungen mitAngular, Node.js und TypeScript. Viele seiner Projekte verbindeter mit seiner Leidenschaft für Fotografie, Film und Medientechnik.

Danny Koppenhagen ist angestellter Entwickler im BereichSystems Engineering. Er beschäftigt sich mit der Entwicklung,Anpassung und Integration von Softwarelösungen im Zusam-menspiel mit maßgeschneiderten Hardwarekomponenten. Wei-terhin arbeitet er leidenschaftlich als freiberuflicher Software-entwickler für Webapplikationen auf Basis von Angular, Node.jsund TypeScript.

Johannes Hoppe arbeitet als selbstständiger IT-Berater, Soft-wareentwickler und Trainer für .NET und Angular. Für seineCommunity-Tätigkeit rund ums Web wurde er mehrfach als TelerikDeveloper Expert (TDE) ausgezeichnet. Johannes ist Leiter der.NET User Group Rhein-Neckar und unterrichtet als Lehrbeauf-tragter.

Zu diesem Buch – sowie zu vielen weiteren dpunkt.büchern – können Sie auch das entsprechende E-Book im PDF-Format herunterladen. Werden Sie dazu einfach Mitglied bei dpunkt.plus+:

www.dpunkt.plus

Gregor Woiwode · Ferdinand Malcher · Danny Koppenhagen · Johannes Hoppe

Angular

Grundlagen, fortgeschrittene Techniken und Best Practices mit TypeScript – ab Angular 4, inklusive NativeScript und Redux

[email protected]

Lektorat: René SchönfeldtLektoratsassistenz: Stefanie WeidnerProjektkoordination: Miriam MetschCopy-Editing: Annette Schwarz, DitzingenSatz: Da-TeX, LeipzigHerstellung: Susanne BröckelmannUmschlaggestaltung: Helmut Kraus, www.exclam.de Druck und Bindung: M.P. Media-Print Informationstechnologie GmbH, 33100 Paderborn

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-357-1PDF 978-3-96088-205-3ePub 978-3-96088-206-0mobi 978-3-96088-207-7

1., korrigierter Nachdruck 2018Copyright © 2018 dpunkt.verlag GmbHWieblinger Weg 1769123 Heidelberg

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 Autor 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

»It’s just ›Angular‹«

Igor Minar

vii

Vorwort

Cross-PlatformFramework

Angular ist ein Framework für die Entwicklung von Single-Page-Appli-kationen. Mit Angular können Webapplikationen sowie native Appsfür Mobil- und Desktopgeräte entwickelt werden. Das Framework istmodular aufgebaut und stellt eine Vielzahl an Funktionalitäten bereit,um wiederkehrende Standardaufgaben zu lösen. Somit kann bei derNutzung des Frameworks der Fokus auf die eigentliche Businesslo-gik gelegt werden. Das Framework steht für eine komponentenbasierteEntwicklung, mithilfe derer sich Teile von Anwendungen einfach aus-tauschen und kombinieren lassen. Mit Angular können Sie mit wenigAufwand strukturierte, modulare und gut wartbare Applikationen er-stellen.

Sie werden in diesem Buch lernen, GrundlegendeKonzepte

wie Sie eine komponentenba-sierte Single-Page-Applikation erstellen. Wir werden Ihnen vermitteln,wie Sie Abhängigkeiten und Asynchronität mithilfe des Frameworksbehandeln. Weiterhin erfahren Sie, wie Sie durch Routing die Navigati-on zwischen verschiedenen Teilen der Anwendung implementieren. Siewerden lernen, wie Sie komplexe Formulare mit Validierungen in IhreAnwendung integrieren und wie Sie Daten aus einer REST-Schnittstellekonsumieren können.

BeispielanwendungWir entwickeln mit Ihnen gemeinsam eine Anwendung, anhand de-rer wir Ihnen all diese Konzepte von Angular beibringen. Dabei führenwir Sie Schritt für Schritt durch das Projekt – vom Projektsetup überdas Testen des Anwendungscodes bis zum Deployment der fertig ent-wickelten Anwendung.

Ihnen wird weiterhin Vorstellung von Toolseine Reihe geeigneter Tools vorgestellt, mitdenen Sie Ihre Arbeitsabläufe optimieren und somit Ihre Produktivitätsteigern können. Zusätzlich erhalten Sie in diesem Buch immer wie-der praxisorientierte Tipps Praxistipps, die die Autoren im Laufe ihrer Zeit alsEntwickler sammeln konnten und Ihnen gern mit auf den Weg gebenmöchten.

viii Vorwort

Sie sind nach dem Lesen des Buchs in der Lage:

n das Zusammenspiel der wichtigsten Funktionen von Angular sowiedas Konzept hinter dem Framework zu verstehen

n modulare, strukturierte und wartbare Webanwendungen mithilfedes Angular-Frameworks zu entwickeln

n durch die Entwicklung von Tests qualitativ hochwertige Anwen-dungen zu erstellen

Namenskonvention und Versionen: Angular vs.AngularJS

Das Angular-Framework, welches in diesem Buch beschrieben wird,hat die Versionsnummer 4. Damit ist es der Nachfolger von AngularJS.Da das Framework ab der Version 2 von Grund auf neu entwickeltwurde, lässt sich nur mit Hilfsmitteln eine Kompatibilität zu AngularJSherstellen. Die Entwickler des Frameworks entschieden sich dazu, alsoffizielle Bezeichnung den NamenIt’s just »Angular« . Angular zu führen.

Um Verwechslungen auszuschließen, hat sich die folgende Konven-tion durchgesetzt:

n AngularJS – Das Angular-Framework in der Version 1.x.xn Angular – Das Angular-Framework ab Version 2 (Dieses Buch ist

durchgängig auf dem Stand von Angular 4.)

Semantic Versioning Die Versionsnummer x.y.z basiert auf Semantic Versioning.1 DerRelease-Zyklus von Angular ist kontinuierlich geplant. So soll imRhythmus von sechs Monaten eine neue Major-Version x erscheinen.Die Minor-Versionen werden monatlich herausgegeben, nachdem eineMajor-Version erschienen ist.

Auch wenn Sie möglicherweise eine neuere Angular-Version ver-wenden, behalten die in diesem Buch beschriebenen Konzepte ihre Gül-tigkeit.

Anwen richtet sich das Buch?

Dieses Buch richtetWebentwickler mitJavaScript-Erfahrung

sich an Webentwickler, die einige Grundkennt-nisse mitbringen. Wir setzen allgemeine Kenntnisse in JavaScript vor-aus. Wenn Sie bereits ein erstes JavaScript-Projekt umgesetzt haben

1https://ng-buch.de/x/1 – Semantic Versioning 2.0.0


https://ng-buch.de/x/1

Vorwort ix

und Ihnen Frameworks wie jQuery, AngularJS oder Dojo Toolkit ver-traut sind, werden Sie an diesem Buch sehr viel Freude haben. MitAngular erwartet Sie das modularisierte Entwickeln von Single-Page-Applikationen in Kombination mit Unit- und UI-Testing.

Das Angular-Framework TypeScript-Einsteigerund Erfahrene

lässt sich sowohl mit reinem JavaScript,TypeScript als auch der Dart-Programmiersprache nutzen. In diesemBuch wird die Entwicklung mittels TypeScript verfolgt, da dieser Wegin der Praxis die meiste Anwendung findet. Doch keine Angst: Type-Script ist eine Erweiterung von JavaScript, und die neuen Konzepte sindsehr eingängig und schnell gelernt.

In diesem Buch PraxisorientierteEinsteiger

wird ein praxisorientierter Ansatz verfolgt. Sie wer-den anhand einer Beispielanwendung sukzessiv die Konzepte und Funk-tionen von Angular kennenlernen.

Möchten Sie Ihren Kunden qualitativ hochwertige Webanwendun-gen ausliefern? – Dann tauchen Sie mit uns in das Angular-Frameworkein. Sie werden nicht enttäuscht.

Was sollten Sie mitbringen?

Grundkenntnisse inJavaScript, HTML undCSS

Da wir Erfahrungen in der Webentwicklung mit JavaScript vorausset-zen, ist es für jeden Entwickler, der auf diesem Gebiet unerfahren ist,empfehlenswert, sich die nötigen Grundlagen zu erarbeiten. Darüberhinaus sollten Sie Grundkenntnisse im Umgang mit HTML und CSSmitbringen. Der dpunkt.verlag bietet eine große Auswahl an Einstiegs-literatur für HTML, JavaScript und CSS an. Sollten Sie über keiner-lei TypeScript-Kenntnisse verfügen: kein Problem! Alles, was Sie überTypeScript wissen müssen, um die Inhalte dieses Buchs zu verstehen,wird in einem separaten Kapitel vermittelt.

Sie benötigen Keine Angular-Vorkenntnisse nötig!

keinerlei Vorkenntnisse im Umgang mit Angular bzw.der Vorgängerversion AngularJS. Ebenso müssen Sie sich nicht vor-ab mit benötigten Tools und Hilfsmitteln für die Entwicklung vonAngular-Applikationen vertraut machen. Das nötige Wissen darüberwird Ihnen in diesem Buch vermittelt.

Für wen ist dieses Buch weniger geeignet?

Um Inhalte des Buchs zu verstehen, UnerfahreneWebentwickler

werden Erfahrungen im Webumfeldvorausgesetzt. Entwicklern ohne Vorkenntnisse in diesem Umfeld wirdder Einstieg schwerer fallen. Sie sollten sich zunächst die grundlegendenKenntnisse in den Bereichen HTML, JavaScript und CSS aneignen.

Kein NachschlagewerkWeiterhin ist dieses Buch nicht als Nachschlagewerk zu verstehen.Es werden nicht alle Möglichkeiten und Konzepte von Angular bis in

x Vorwort

jedes Detail erläutert. Anhand des Beispielprojekts werden die wichtigs-ten Funktionalitäten praxisorientiert vermittelt. Um alle Facetten desFrameworks kennenzulernen, sollten Sie sich jedoch mit zusätzlicher Li-teratur ausstatten.O�zielle Angular-

DokumentationUm Details zu den einzelnen Framework-Funktionen

nachzuschlagen, empfehlen wir die offizielle Dokumentation für Ent-wickler.2

Wie ist dieses Buch zu lesen?

Wir beginnenEinführung, Tools undSchnellstart

im ersten Kapitel des Buchs mit einer Einführung. Hier er-fahren Sie alles über verwendete Tools und benötigtes Werkzeug. Wei-terhin beinhaltet das Kapitel einen Schnellstart. Dieser soll Ihnen einenschnellen Einstieg in das Framework zeigen. Der Leser soll hier ein Ge-fühl dafür bekommen, warum sich die Entwicklung einer Anwendungmit dem Angular-Framework lohnt. In diesem Kapitel werden nochnicht alle Details und Hintergründe vermittelt.

Das zweite KapitelEinführung inTypeScript

vermittelt Ihnen einen Einstieg in TypeScript. Siewerden hier mit den Grundlagen dieser typisierten Skriptsprache ver-traut gemacht und erfahren, wie Sie die wichtigsten Features verwendenkönnen. Entwickler, die bereits Erfahrung im Umgang mit TypeScripthaben, können dieses Kapitel überspringen.

Beispielanwendung Das dritte Kapitel ist der Hauptteil des Buchs. Hier möchten wirmit Ihnen zusammen eine Beispielanwendung entwickeln. Die Konzepteund Technologien von Angular wollen wir dabei direkt am Beispielvermitteln. So stellen wir sicher, dass das Gelesene angewendet wirdund jedes Kapitel automatisch einen praktischen Bezug hat.

Iterationen Nach einer Projekt- und Prozessvorstellung haben wir das Buch inmehrere Iterationen eingeteilt. In jeder Iteration gilt es, Anforderungenzu erfüllen, die wir gemeinsam mit Ihnen lösen.

n Iteration I: Komponenten & Template-Syntax (S. 63 ff.)n Iteration II: Services & Routing (S. 117 ff.)n Iteration III: HTTP & reaktive Programmierung (S. 169 ff.)n Iteration IV: Formularverarbeitung & Validierung (S. 207 ff.)n Iteration V: Pipes & Direktiven (S. 259 ff.)n Iteration VI: Module & fortgeschrittenes Routing (S. 301 ff.)n Iteration VII: Internationalisierung (S. 351 ff.)

Storys Eine solche Iteration ist in mehrere Storys untergliedert, die jeweils einThemengebiet abdecken. Eine Story besteht immer aus einer theoreti-

2https://ng-buch.de/x/2 – Angular Docs



Vorwort xi

schen Einführung und der praktischen Implementierung im Beispielpro-jekt.

Optimierungs-vorschläge

Neben Storys gibt es Optimierungsvorschläge. Dabei handelt essich um technische Anforderungen, die die Architektur oder den Code-stil der Anwendung verbessern.

Haben wir eine Iteration abgeschlossen, prüfen wir, ob wir unserenEntwicklungsprozess vereinfachen und beschleunigen können. In den

PowertippsPowertipps demonstrieren wir hilfreiche Werkzeuge, die uns bei derEntwicklung zur Seite stehen.

Nachdem alle Iterationen Testingerfolgreich absolviert wurden, wollen wirdas Thema Testing genauer betrachten. Hier erfahren Sie, wie Sie IhreAngular-Anwendung testen und so die Softwarequalität sichern kön-nen. Dieses Kapitel kann sowohl nach der Entwicklung des Beispiel-projekts als auch parallel dazu bestritten werden.

Schließlich gehen wir auf einige weiterführende Themen ein. Hierwerden Sie Deploymenterfahren, wie Sie eine fertig entwickelte Angular-Anwen-dung fit für den Produktiveinsatz machen. Weiterhin NativeScriptwerden wir Ih-nen mit dem Framework NativeScript und der Redux-Architektur zweiAnsätze näherbringen, die über das bisher Gelernte hinausgehen. Siewerden erfahren, wie Sie NativeScript einsetzen können, um mobileAnwendungen für verschiedene Zielplattformen (Android, iOS etc.) zuentwickeln. ReduxZum Schluss werden wir Ihnen in diesem Kapitel das Re-dux-Pattern vorstellen. Sie erfahren, wie Sie mithilfe des Patterns IhrenAnwendungsstatus zentral verwalten können.

Im letzten Kapitel des Buchs finden Sie weitere Informationen zuwissenswerten und begleitenden Themen. Upgrade von AngularJSUnter anderem erfahren Siehier, welche Schritte Sie gehen sollten, um erfolgreich von einer frühe-ren Angular-Version zu migrieren.

Umgangmit Aktualisierungen

Alle Beispiele aus diesem Buch sowie zusätzliche Links und Hinweisekönnen Sie über eine zentrale Seite erreichen:

Die Begleitwebsitezum Buch

https://angular-buch.com

Auf dieser Seite finden Sie einen Link zu den im Buch enthaltenen Code-beispielen sowie zu weiterführender Literatur. Weiterhin stellen wir Ih-

https://angular-buch.com

xii Vorwort

nen dort Änderungen sowie ggf. auftretende Korrekturen bereit. DasAngular-Framework wird stetig weiterentwickelt, und neuere Versio-nen werden folgen.Infos zu neueren

VersionenIn diesen Versionen können Änderungen auftreten,

die die Arbeitsweise des Frameworks und auch die Implementierungvon Features beeinflussen. Wir empfehlen Ihnen aus diesem Grund, un-bedingt einen Blick auf die Begleitwebsite des Buchs zu werfen, bevorSie beginnen, sich mit den Inhalten des Buchs zu beschäftigen.

Beratung undWorkshops

Wir, die Autoren dieses Buchs, arbeiten seit Langem als Berater undTrainer für Angular. Wir haben die Erfahrung gemacht, dass man An-gular in kleinen Gruppen am schnellsten lernen kann. In einem Work-shop kann auf individuelle Fragen und Probleme direkt eingegangenwerden – und es macht auch am meisten Spaß!

Schauen Sie auf https://angular.schule vorbei. Dort bieten wir IhnenAngular-Workshops in den Räumen Ihres Unternehmens oder in offe-nen Gruppen an. Das Angular-Buch verwenden wir dabei in unserenEinstiegskursen zur Nacharbeit. Haben Sie das Buch vollständig gele-sen, so können Sie direkt in die individuellen Kurse für Fortgeschritteneeinsteigen. Wir freuen uns auf Ihren Besuch.

Die Angular-Schule:Workshops und

Beratung

https://angular.schule

Danksagung

Wir danken besonders Michael Kaaden und Matthias Jauernig für ihreunermüdlichen Anregungen und kritischen Nachfragen. Matthias undMichael haben das gesamte Buch immer wieder auf Verständlichkeitund Fehler abgeklopft, alle Codebeispiele mehrfach nachvollzogen undviel wertvollen Input geliefert. Julian Steiner hat uns mit seiner Experti-se zu NativeScript bei der Entwicklung der BookMonkey-Mobile-Appunterstützt. Wertvolles Feedback zum Buch haben uns außerdem SilvioBöhme, Nils Frohne, Johannes Hamfler, Stephan Hartmann, JohannesHofmeister, Alexander Szczepanski und Daniel Vladut (in alphabeti-scher Reihenfolge) zukommen lassen.




Vorwort xiii

Dem Team vom dpunkt.verlag, insbesondere René Schönfeldt, dan-ken wir für die persönliche Unterstützung und die guten Anregungenzum Buch. Außerdem danken wir dem Angular-Team dafür, dass eseine großartige Software geschaffen hat, die uns den Entwickleralltagangenehmer macht.

xv

Inhaltsverzeichnis

Vorwort . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . vii

I Einführung 1

1 Haben Sie alles, was Sie benötigen? . . . . . . . . . . . . . . . . . . . . 31.1 Visual Studio Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31.2 Google Chromemit Augury . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61.3 Paketverwaltung mit Node.js und NPM . . . . . . . . . . . . . . . . . . . . . 61.4 Codebeispiele in diesem Buch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

2 Schnellstart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112.1 Die erste Angular-Anwendung aufsetzen . . . . . . . . . . . . . . . . . . . . 112.2 HTML-Grundgerüst erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122.3 Den Modul-Loader kon�gurieren . . . . . . . . . . . . . . . . . . . . . . . . . . . 132.4 Die Startdatei für das Bootstrapping anlegen . . . . . . . . . . . . . . . . 152.5 Das zentrale Angular-Modul anlegen . . . . . . . . . . . . . . . . . . . . . . . 162.6 Eine erste Komponente anlegen . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172.7 Den Webserver starten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182.8 Retrospektive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

3 Angular CLI: Der Codegenerator für unser Projekt . . . . . . . 213.1 Vorstellung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213.2 Installation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223.3 Die wichtigsten Befehle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

II TypeScript 25

4 Einführung in TypeScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274.1 Was ist TypeScript und wie setzen wir es ein? . . . . . . . . . . . . . . . . 274.2 Variablen: const, let und var . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304.3 Getter und Setter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314.4 Die wichtigsten Basistypen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

xvi Inhaltsverzeichnis

4.5 Klassen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344.6 Interfaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 384.7 Operatoren und Funktionen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 404.8 Dekoratoren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

III BookMonkey 2: Schritt für Schritt zur App 45

5 Projekt- und Prozessvorstellung . . . . . . . . . . . . . . . . . . . . . . . 475.1 Unser Projekt: Der BookMonkey 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . 475.2 Projekt mit Angular CLI initialisieren . . . . . . . . . . . . . . . . . . . . . . . . 515.3 Style-Framework Semantic UI einbinden . . . . . . . . . . . . . . . . . . . . 59

6 Komponenten & Template-Syntax: Iteration I . . . . . . . . . . . 636.1 Komponenten: Die Grundbausteine der Anwendung . . . . . . . . 63

6.1.1 Komponenten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 646.1.2 Komponenten in der Anwendung verwenden . . . . . . . 696.1.3 Template-Syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 706.1.4 Den BookMonkey erstellen . . . . . . . . . . . . . . . . . . . . . . . . . 79

6.2 Property Bindings: Mit Komponenten kommunizieren . . . . . . . 886.2.1 Komponenten verschachteln . . . . . . . . . . . . . . . . . . . . . . . 886.2.2 Eingehender Daten�uss mit Property Bindings . . . . . . 896.2.3 Andere Arten von Property Bindings . . . . . . . . . . . . . . . . 936.2.4 DOM-Propertys in Komponenten auslesen . . . . . . . . . . 956.2.5 Den BookMonkey erweitern . . . . . . . . . . . . . . . . . . . . . . . . 96

6.3 Event Bindings: Auf Ereignisse in Komponenten reagieren . . . 1016.3.1 Native DOM-Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1016.3.2 Eigene Events de�nieren . . . . . . . . . . . . . . . . . . . . . . . . . . . 1046.3.3 Den BookMonkey erweitern . . . . . . . . . . . . . . . . . . . . . . . . 106

7 Powertipp: Styleguide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115

8 Services & Routing: Iteration II . . . . . . . . . . . . . . . . . . . . . . . . . 1178.1 Dependency Injection: Code in Services auslagern . . . . . . . . . . 117

8.1.1 Abhängigkeiten anfordern . . . . . . . . . . . . . . . . . . . . . . . . . 1198.1.2 Eingebaute Abhängigkeiten . . . . . . . . . . . . . . . . . . . . . . . . 1208.1.3 Abhängigkeiten bereitstellen . . . . . . . . . . . . . . . . . . . . . . . 1208.1.4 Den BookMonkey erweitern . . . . . . . . . . . . . . . . . . . . . . . . 124

8.2 Routing: Durch die Anwendung navigieren . . . . . . . . . . . . . . . . . 1288.2.1 Routen kon�gurieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1298.2.2 Routing-Modul einbauen . . . . . . . . . . . . . . . . . . . . . . . . . . 1308.2.3 Komponenten anzeigen . . . . . . . . . . . . . . . . . . . . . . . . . . . 1328.2.4 Root-Route . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1338.2.5 Routen verlinken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134


Inhaltsverzeichnis xvii

8.2.6 Routenparameter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1358.2.7 Verschachtelung von Routen . . . . . . . . . . . . . . . . . . . . . . . 1378.2.8 Routenweiterleitung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1398.2.9 Aktive Links stylen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1418.2.10 Route programmatisch wechseln . . . . . . . . . . . . . . . . . . . 1418.2.11 Den BookMonkey erweitern . . . . . . . . . . . . . . . . . . . . . . . . 143

9 Powertipp: Chrome Developer Tools . . . . . . . . . . . . . . . . . . . 157

10 HTTP & reaktive Programmierung: Iteration III . . . . . . . . . . 16910.1 HTTP: Ein Server-Backend anbinden . . . . . . . . . . . . . . . . . . . . . . . . 169

10.1.1 Das HTTP-Modul einbinden . . . . . . . . . . . . . . . . . . . . . . . . 17010.1.2 Einfache Requests mit der Http-Klasse . . . . . . . . . . . . . . 17110.1.3 Benutzerde�nierte Anfragen mit der Request-Klasse . 17310.1.4 Request erweitern: Zusätzliche Header . . . . . . . . . . . . . . 17310.1.5 Den BookMonkey erweitern . . . . . . . . . . . . . . . . . . . . . . . . 175

10.2 RxJS: Reaktive Programmierung . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18610.2.1 Observables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18710.2.2 Operatoren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19010.2.3 Den BookMonkey erweitern . . . . . . . . . . . . . . . . . . . . . . . . 193

11 Powertipp: Augury . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203

12 Formularverarbeitung & Validierung: Iteration IV . . . . . . . . 20712.1 Angulars Ansätze für Formulare . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20812.2 Template Driven Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209

12.2.1 Template Driven Forms verwenden . . . . . . . . . . . . . . . . . 20912.2.2 NgModel und NgModelGroup . . . . . . . . . . . . . . . . . . . . . . 21112.2.3 Eingaben validieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21412.2.4 Den BookMonkey erweitern . . . . . . . . . . . . . . . . . . . . . . . . 215

12.3 Reactive Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22712.3.1 Reactive Forms verwenden . . . . . . . . . . . . . . . . . . . . . . . . . 22712.3.2 Den FormBuilder verwenden . . . . . . . . . . . . . . . . . . . . . . . 23112.3.3 Vorhandene Validatoren nutzen . . . . . . . . . . . . . . . . . . . . 23212.3.4 Den BookMonkey erweitern . . . . . . . . . . . . . . . . . . . . . . . . 233

12.4 Custom Validators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24512.4.1 Validatoren für einzelne Formularfelder . . . . . . . . . . . . . 24512.4.2 Validatoren für Formulargruppen und -Arrays . . . . . . . 24712.4.3 Asynchrone Validatoren . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24912.4.4 Den BookMonkey erweitern . . . . . . . . . . . . . . . . . . . . . . . . 252

xviii Inhaltsverzeichnis

13 Pipes & Direktiven: Iteration V . . . . . . . . . . . . . . . . . . . . . . . . . 25913.1 Pipes: Daten im Template formatieren . . . . . . . . . . . . . . . . . . . . . . 259

13.1.1 Pipes verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25913.1.2 Die Sprache einstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26013.1.3 Integrierte Pipes für den sofortigen Einsatz . . . . . . . . . . 26113.1.4 Eigene Pipes entwickeln (Custom Pipes) . . . . . . . . . . . . . 27113.1.5 Pipes in Komponenten nutzen . . . . . . . . . . . . . . . . . . . . . . 27313.1.6 Den BookMonkey erweitern . . . . . . . . . . . . . . . . . . . . . . . . 274

13.2 Direktiven: Das Vokabular von HTML erweitern . . . . . . . . . . . . . . 28213.2.1 Was sind Direktiven? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28213.2.2 Eine erste eigene Direktive schreiben . . . . . . . . . . . . . . . 28313.2.3 Attributdirektiven . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28513.2.4 Strukturdirektiven . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29013.2.5 Den BookMonkey erweitern . . . . . . . . . . . . . . . . . . . . . . . . 293

14 Module & fortgeschrittenes Routing: Iteration VI . . . . . . . . 30114.1 Die Anwendung modularisieren: Das Modulkonzept von An-

gular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30114.1.1 Module in Angular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30114.1.2 Grundaufbau eines Moduls . . . . . . . . . . . . . . . . . . . . . . . . . 30214.1.3 Bestandteile eines Moduls deklarieren . . . . . . . . . . . . . . 30214.1.4 Anwendung in Feature-Module aufteilen . . . . . . . . . . . 30414.1.5 Aus Modulen exportieren: Shared Module . . . . . . . . . . 30714.1.6 Den BookMonkey erweitern . . . . . . . . . . . . . . . . . . . . . . . . 309

14.2 Lazy Loading: Angular-Module asynchron laden . . . . . . . . . . . . . 31814.2.1 WarumModule asynchron laden? . . . . . . . . . . . . . . . . . . 31814.2.2 Lazy Loading verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . 31914.2.3 Module asynchron vorladen: Preloading . . . . . . . . . . . . 32114.2.4 Den BookMonkey erweitern . . . . . . . . . . . . . . . . . . . . . . . . 322

14.3 Guards: Routen absichern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32714.3.1 Grundlagen zu Guards . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32814.3.2 Guards implementieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32814.3.3 Guards verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33014.3.4 Den BookMonkey erweitern . . . . . . . . . . . . . . . . . . . . . . . . 331

14.4 Resolver: Asynchrone Daten vorladen . . . . . . . . . . . . . . . . . . . . . . . 33714.4.1 Warum Resolver verwenden? . . . . . . . . . . . . . . . . . . . . . . . 33714.4.2 Resolver aufsetzen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33814.4.3 Resolver in Routen verwenden . . . . . . . . . . . . . . . . . . . . . 33914.4.4 Daten in einer Komponente abrufen . . . . . . . . . . . . . . . . 34014.4.5 Den BookMonkey erweitern . . . . . . . . . . . . . . . . . . . . . . . . 341


Inhaltsverzeichnis xix

14.5 Routing: Wie geht’s weiter? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34714.5.1 Routenparameter asynchron laden . . . . . . . . . . . . . . . . . 34714.5.2 Mehrere RouterOutlets verwenden . . . . . . . . . . . . . . . . . 34814.5.3 Darstellung der URLs ändern: LocationStrategies . . . . 349

15 Internationalisierung: Iteration VII . . . . . . . . . . . . . . . . . . . . . 35115.1 i18n: Mehrere Sprachen und Kulturen anbieten . . . . . . . . . . . . . 351

15.1.1 Was bedeutet Internationalisierung? . . . . . . . . . . . . . . . . 35115.1.2 Nachrichten mit dem i18n-Attribut markieren . . . . . . . 35215.1.3 Nachrichten extrahieren und übersetzen . . . . . . . . . . . . 35315.1.4 Feste IDs vergeben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35415.1.5 JIT: Die App mit Übersetzungsdatei laden . . . . . . . . . . . 35415.1.6 AOT: Die App statisch mit Übersetzungsdatei bauen . 35615.1.7 Den BookMonkey erweitern . . . . . . . . . . . . . . . . . . . . . . . . 357

16 Powertipp: POEditor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 363

17 Qualität fördernmit Softwaretests . . . . . . . . . . . . . . . . . . . . . 36917.1 Softwaretests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 369

17.1.1 Arten von Tests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36917.1.2 Test-Framework Jasmine . . . . . . . . . . . . . . . . . . . . . . . . . . . 37117.1.3 Test-Runner Karma . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37317.1.4 E2E-Test-Runner Protractor . . . . . . . . . . . . . . . . . . . . . . . . . 373

17.2 Tests mit Karma . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37617.2.1 Die Testbibliothek von Angular . . . . . . . . . . . . . . . . . . . . . 37617.2.2 Isolierte Unit-Tests (Services und Pipes testen) . . . . . . . 37617.2.3 Shallow Unit-Tests: Einzelne Komponenten testen . . . 38017.2.4 Integrationstests: Mehrere Komponenten testen . . . . 38217.2.5 Abhängigkeiten durch Stubs ersetzen . . . . . . . . . . . . . . 38317.2.6 Abhängigkeiten durch Mocks ersetzen . . . . . . . . . . . . . . 38617.2.7 HTTP-Requests testen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38817.2.8 Komponenten mit Routen testen . . . . . . . . . . . . . . . . . . . 39117.2.9 Asynchronen Code testen . . . . . . . . . . . . . . . . . . . . . . . . . . 39417.2.10 Fazit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 396

17.3 Tests mit Protractor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39717.3.1 Auf die Balance kommt es an . . . . . . . . . . . . . . . . . . . . . . . 39717.3.2 Protractor verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39817.3.3 Elemente selektieren: Locators . . . . . . . . . . . . . . . . . . . . . 39917.3.4 Aktionen durchführen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40017.3.5 Asynchron mit Warteschlange . . . . . . . . . . . . . . . . . . . . . . 40017.3.6 Redundanz durch Page Objects vermeiden . . . . . . . . . . 40217.3.7 Eine Angular-Anwendung testen . . . . . . . . . . . . . . . . . . . 40317.3.8 Fazit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 404

xx Inhaltsverzeichnis

IV Das Projekt ausliefern: Deployment 407

18 Das Projekt ausliefern: Deployment . . . . . . . . . . . . . . . . . . . . 40918.1 Umgebungen kon�gurieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 409

18.1.1 Umgebungen am Beispiel: BookMonkey . . . . . . . . . . . . 41218.2 Produktivmodus aktivieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41418.3 Build erzeugen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41418.4 Die Templates kompilieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 418

18.4.1 Just-In-Time-Kompilierung (JIT) . . . . . . . . . . . . . . . . . . . . . 41918.4.2 Ahead-Of-Time-Kompilierung (AOT) . . . . . . . . . . . . . . . . 420

18.5 Webserver kon�gurieren und die App ausliefern . . . . . . . . . . . . 42318.6 Ausblick: Automatisches Deployment . . . . . . . . . . . . . . . . . . . . . . . 427

V Weiterführende Themen 429

19 NativeScript: Mobile Anwendungen entwickeln . . . . . . . . . 43119.1 Mobile Apps entwickeln . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43119.2 Was ist NativeScript? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43219.3 Warum NativeScript? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43319.4 Hinter den Kulissen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43419.5 Plattformspezi�scher Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43519.6 Widgets und Layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43719.7 Styling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43819.8 NativeScript und Angular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43919.9 Angular als Native App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44019.10 Den BookMonkey mit NativeScript umsetzen . . . . . . . . . . . . . . . 441

20 Powertipp: Android-Emulator Genymotion . . . . . . . . . . . . . 457

21 Redux: Den Application State verwalten . . . . . . . . . . . . . . . . 46121.1 Was ist Redux? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46221.2 Was sind Reducer? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46321.3 Reducer verwalten den Anwendungsstatus . . . . . . . . . . . . . . . . . 46321.4 Actions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46521.5 Angular-Services und Actions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46721.6 Redux im Projekt einbinden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46821.7 Components mit Redux verwenden . . . . . . . . . . . . . . . . . . . . . . . . 47021.8 Container und Presentational Components . . . . . . . . . . . . . . . . . 47321.9 Weiterführendes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47321.10 Den BookMonkey mit Redux umsetzen . . . . . . . . . . . . . . . . . . . . . 475

22 Powertipp: Redux DevTools . . . . . . . . . . . . . . . . . . . . . . . . . . . 495


Inhaltsverzeichnis xxi

23 Wissenswertes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49923.1 Plattformen und Renderer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49923.2 Lifecycle-Hooks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50023.3 Change Detection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50323.4 Transklusion: Inhalt des Host-Elements verwenden . . . . . . . . . . 51323.5 Eigenes Two-Way Binding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51423.6 Else-Block für die ngIf-Direktive . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51623.7 Upgrade von Angular 1.x . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 519

24 Nachwort . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 525

VI Anhang 527

A Befehle der Angular CLI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 529

B Matcher von Karma . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 535

C Abkürzungsverzeichnis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 537

D Linkliste . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 539

Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 545

Literaturverzeichnis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 551

291

Teil IEinführung

Woiwode_Trennseite I.fm Seite 291 Mittwoch, 12. April 2017 12:04 12

292

Woiwode_Trennseite I.fm Seite 292 Mittwoch, 12. April 2017 12:04 12


3

1 Haben Sie alles, was Sie benötigen?

»Angular’s best feature is its community.«

Dave Geddes(Organisator der Konferenz ng-conf)

Bevor wir beginnen, möchten wir sicherstellen, dass Sie für die Entwick-lung mit Angular bestmöglich gewappnet sind. Darum widmen wir unszunächst der Einrichtung aller erforderlichen Werkzeuge. Wir gebenIhnen in diesem Kapitel außerdem Tipps zur Konfiguration der Pro-gramme mit.

Falls Sie bereits über eine integrierte Entwicklungsumgebung (IDE)für die Webentwicklung verfügen und mit Begriffen wie Node.js undNPM vertraut sind, können Sie dieses Kapitel überspringen.

1.1 Visual Studio Code

Visual Studio Code (VS Code)1 Unser empfohlenerEditor für Angular

ist eine quelloffene Entwicklungsum-gebung unter der MIT-Lizenz. Der Editor ist unter den Betriebssyste-men Windows, macOS und Linux lauffähig. VS Code lässt sich leichtdurch neue Pakete erweitern und verändern. Weiterhin verfügt der Edi-tor nicht nur über eine moderne Oberfläche, sondern unterstützt auchzahlreiche Programmiersprachen. Da die TypeScript-Integration sehrausgereift ist, verwenden wir diesen Editor für die Entwicklung vonAngular-Anwendungen. VS Code bringt weiterhin eine sehr gute au-tomatische Codevervollständigung und Codedokumentation mit sich.Außerdem besitzt der Editor von Haus aus eine Git-Integration.2 Somitlassen sich Änderungen am Projektcode über die grafische Oberflächedes Editors gut nachvollziehen.

1https://ng-buch.de/x/3 – Visual Studio Code2Git ist ein Tool zur Versionsverwaltung von Quellcode.


4 1 Haben Sie alles, was Sie benötigen?

Abb. 1–1Die Ober�äche vonVisual Studio Code

Erweiterungen für VS Code

Wir empfehlen zusätzlich noch die Installation einiger Erweiterungen(Extensions). Mit Erweiterungen lassen sich Funktionalitäten des Edi-tors optimal ausnutzen und die Produktivität bei der Entwicklung mitAngular kann gesteigert werden. Erweiterungen für VS Code könnenüber den Marketplace von Visual Studio bezogen werden.3 Die Instal-lation der Plugins erfolgt am einfachsten über den in den Editor inte-grierten Extensions Browser (Abbildung 1–2). Hier können wir den

Abb. 1–2Erweiterungen in

VS Code

3https://ng-buch.de/x/4 – »Extensions for the Visual Studio family of pro-ducts«



1.1 Visual Studio Code 5

Tab. 1–1EmpfohleneErweiterungen fürVisual Studio Code

Erweiterung Kurzbeschreibung

Auto Import4 Generiert automatisch Import-Anweisungen fürTypeScript

EditorCon�g forVS Code5

Verarbeitet Informationen einer .editorconfig-Datei und kon�guriert entsprechend den Editor.Somit können editorenübergreifendeEinstellungen für die Anzahl von Leerzeichen,verwendete Zeichencodierung etc. gescha�enwerden.

TSLint6 Ist eine Integration des Tools TSLint7 . Verstößegegen festgelegte Codestil-Richtlinien (festgelegtin der Datei tslint.json) werden gra�sch im Editordargestellt.

angular2-inline8 Darstellung von Syntax-Highlighting beiVerwendung von Inline-Templates bzw. -CSSinnerhalb von Komponenten in Angular

vscode-icons9 Verbessertes Iconset für Dateien und Ordner imDateibaum

Marketplace nach Plugins durchsuchen und die installierten Erweite-rungen verwalten.

Tabelle 1–1 zeigt eine Liste von Erweiterungen, die wir für die Ent-wicklung mit Angular empfehlen. Alle Erweiterungen lassen sich mitfolgenden Befehlen installieren:

$ code --install-extension steoates.autoimport$ code --install-extension EditorConfig.EditorConfig$ code --install-extension eg2.tslint$ code --install-extension natewallace.angular2-inline$ code --install-extension robertohuertasm.vscode-icons

4https://ng-buch.de/x/5 – Visual Studio Code: Auto Import5https://ng-buch.de/x/6 – Visual Studio Code: EditorConfig for VS Code6https://ng-buch.de/x/7 – Visual Studio Code: TSLint7https://ng-buch.de/x/8 – TSLint8https://ng-buch.de/x/9 – Visual Studio Code: angular2-inline9https://ng-buch.de/x/10 – Visual Studio Code: vscode-icons







6 1 Haben Sie alles, was Sie benötigen?

1.2 Google Chromemit Augury

Zur Darstellung der Angular-Anwendung und für das Debugging nut-zen wir Google Chrome10 . Wir setzen auf diesen Browser, weil er bereitsein umfangreiches Set an Debugging-Tools mitbringt. Diese ChromeDeveloper Tools schauen wir uns im Powertipp ab Seite 157 genaueran.

Mit der Erweiterung Augury11 steht uns außerdem ein umfangrei-ches Debugging-Tool für Angular-Anwendungen zur Verfügung. Au-gury ist allerdings nur als Chrome-Erweiterung erhältlich. Wir werdenim Powertipp auf Seite 203 mehr über dieses Tool erfahren und lernen,wie wir es effizient einsetzen können.

1.3 Paketverwaltungmit Node.js und NPM

JavaScript ohne Browser

Node.js12 ist eine Laufzeitumgebung zur Ausführung von JavaScriptauf dem Server. Es basiert auf der Google V8 Engine13 , die auch inGoogle Chrome zum Einsatz kommt. Mit Node.js können serverba-sierte Dienste mit JavaScript implementiert werden. Das hat den Vor-teil, dass JavaScript für die Entwicklung von Backends und Frontendseingesetzt werden kann. Das Anwendungsspektrum ist nicht auf Web-server und REST-Schnittstellen begrenzt, sondern es können viele wei-tere skalierende Szenarien abgebildet werden. Seine Stärke zeigt Node.jsbei der Arbeit mit asynchronen Operationen, die ein elementares Para-digma bei der Entwicklung mit dieser Laufzeitumgebung sind.Das Angular-Tooling

setzt auf Node.js.Node.js

wird von vielen Tools verwendet, die die Webentwicklung für den Pro-grammierer komfortabler gestalten. Automatisierungen mit Grunt oderGulp, CSS-Präprozessoren wie LESS oder SASS, Tests mit Karma oderProtractor und noch vieles mehr – alle basieren auf Node.js. Wir ver-wenden Node.js in diesem Buch nur zum Betrieb jener Tools, die wirfür die Entwicklung mit Angular benötigen. Das REST-Backend, wel-ches wir im Kapitel zu HTTP ab Seite 169 vorstellen, basiert auch aufNode.js.

NPM-Pakete Die Plattform Node.js bietet eine Vielzahl von Paketen, die sichjeder Entwickler zunutze machen kann. Um dieser Menge Herr zu wer-

10https://ng-buch.de/x/11 – Google Chrome11https://ng-buch.de/x/12 – Angular Augury12https://ng-buch.de/x/13 – Node.js13https://ng-buch.de/x/14 – Google V8






1.3 Paketverwaltungmit Node.js und NPM 7

den, ist der hauseigene Paketmanager Node Package Manager (NPM)14das richtige Werkzeug. Damit kann auf die Online-Registry allerNode.js-Module zugegriffen werden. Wer möchte, kann mit der Web-seite http://npmjs.org nach den passenden Paketen suchen.

Pakete lassen sich sowohl lokal als auch global installieren. Dielokalen Pakete werden je Projekt installiert. Dazu werden sie auch imjeweiligen Verzeichnis gespeichert. Damit wird erreicht, dass ein Paketin verschiedenen Versionen parallel auf dem System existieren kann.

Globale Pakete werden von NPM in einem zentralen Verzeichnis15auf dem Computer gespeichert. Darin befinden sich meist CLI-Pakete(CLI steht für Command Line Interface), die von der Konsole aufgeru-fen werden können. Bekannte Beispiele dafür sind: @angular/cli, type-script, webpack, gulp, grunt-cli. All diese Pakete sind dazu da, andereDateien auszuführen, zu verarbeiten oder umzuwandeln.

Node.js und NPM installieren

Node.js bietet auf der Projektwebseite Installationspakete für die ver-breitetsten Betriebssysteme zum Download an. Einige Linux-Distribu-tionen führen Node.js auch in den offiziellen Paketquellen, allerdingszum Teil nicht in aktueller Version. Wir empfehlen die Verwendungder offiziellen Installationspakete16 bzw. Repositorys von Node.js. Hiersollten Sie die LTS-Variante wählen, denn sie wird breitflächig von denmeisten Paketen unterstützt.

Installation prüfenNach der Installation prüfen wir auf der Kommandozeile, ob nodeund npm richtig installiert sind, indem wir die Versionsnummer ausge-ben:

Listing 1–1Versionsnummer vonNode.js und NPMausgeben

$ node -v$ npm -v

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

NPM-Pakete installieren

Stehen node und npm ordnungsgemäß bereit, so können wir NPM zurInstallation von Paketen verwenden. Dabei ist zu unterscheiden, ob einPaket lokal oder global installiert werden soll.

14https://ng-buch.de/x/15 – npm15Aktuellen globalen Pfad ausgeben: npm config get prefix. Unter Windows

ist dies normalerweise %AppData%\Roaming\npm.16https://ng-buch.de/x/16 – Node.js Downloads

http://npmjs.org



[email protected] - 0f3f24d96462e25781e8 ... · Cross-Platform Framework Angular ist ein...

Documents

Transcript of [email protected] - 0f3f24d96462e25781e8 ... · Cross-Platform Framework Angular ist ein...