https://ng-buch.de/bm4-it6-guards.git
$ git clone https://ng-buch.de/bm4-it7-i18n.git
Listing 2–6 Beispielprojekt in verschiedenen Stadien klonen
$ git clone https://ng-buch.de/bm4-ssr.git
$ git clone https://ng-buch.de/bm4-docker.git
$ git clone https://ng-buch.de/bm4-ngrx.git
$ git clone https://ng-buch.de/bm4-native.git
$ git clone https://ng-buch.de/bm4-pwa.git
Listing 2–7 Alle weiteren Codebeispiele klonen
Des Weiteren ist ein Download als ZIP-Archiv möglich. Rufen Sie dafür einfach einen der vielen QR-Code-Links auf, z. B. diesen:
Demo und Quelltext: https://ng-buch.de/bm4-code
… und laden Sie das ZIP-Archiv entsprechend der Abbildung 2–3 herunter.
Abb. 2–3 Codebeispiele dieses Buchs von GitHub als ZIP herunterladen
3Angular CLI: der Codegenerator für unser Projekt
»The reason people come to Angular is because 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. Wir haben erfahren, welche Dateien für die Entwicklung mit Angular benötigt werden und welche Abhängigkeiten untereinander bestehen. Zugegeben, eine »rohe« Angular-Anwendung braucht verhältnismäßig viele Vorbereitungen, die wir uns als Entwickler nicht merken 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 der offizielle Helfer für unsere Angular-Anwendungen. Das Tool beinhaltet Vorlagen und Befehle für alle wiederkehrenden Aufgaben, vom Anlegen eines Projekts über Codegenerierung 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 Entwicklung Webserver 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, 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.
Node.js und Webpack
Die Angular CLI ist ein Kommandozeilentool auf Basis von Node.js. Die Transformation der TypeScript-Dateien und Stylesheets sowie viele weitere Schritte werden mithilfe von Webpack durchgeführt.3 Webpack ist ein Module Loader und Bundler und ist dafür verantwortlich, alle Teile unserer Anwendung zu verpacken, bevor sie an den Client ausgeliefert werden.
Die Angular CLI kann uns also einen Großteil der wiederkehrenden Arbeit abnehmen. Lassen Sie uns das Tool ausprobieren.
3.2Installation
Um die Angular CLI nutzen zu können, müssen wir das Tool als globales NPM-Modul installieren:
$ npm install -g @angular/cli
Die Angular CLI lässt sich nach der Installation einfach 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. npx 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.
$ 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
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.
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–1 Neues Projekt generieren
Die Angular CLI wird Ihnen mithilfe einer Eingabeaufforderung einige Fragen stellen. Sie können eine Auswahl mit den Pfeiltasten treffen und mit der
Wir wechseln in den neuen Ordner und können gleich weitermachen – z. B. noch eine zusätzliche Komponente generieren.
$ cd my-first-project
$ ng generate component my-first-component
Listing 3–2