Читать книгу Angular - Ferdinand Malcher - Страница 52

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 CLI¹ 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.² 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.³ 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 node_modules liegt. Andernfalls wird die aktuellste Version von NPM heruntergeladen und verwendet.

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 -Taste bestätigen. Das neue Projekt wird in einem eigenen Unterordner angelegt, und die notwendigen NPM-Pakete werden für Sie mithilfe von npm install installiert. Alle abgefragten Einstellungen können wir übrigens auch als Parameter an den Befehl anhängen.

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 Komponente erstellen

Hilfreich ist es, die vielen Parameter zu kennen und einordnen zu können. Im Anhang A ab Seite 797 sind daher alle Befehle aufgelistet. Wir können uns auch ein wenig Tipparbeit sparen, wenn wir statt der ausgeschriebenen Parameter deren Aliase verwenden. Der folgende Befehl ist äquivalent zum vorherigen.

$ ng g c my-first-component

Listing 3–3 Komponente erstellen mit dem Kurzbefehl

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 bereits mit ng serve oder npm start ausführen. 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. Wir können aber dennoch schon einmal prüfen, ob die automatisch erzeugten Tests fehlerfrei durchlaufen.

$ ng test

Listing 3–4 Unit-Tests ausführen

Sie sehen: Einfacher geht es kaum! Mehr zur Angular CLI erfahren wir ab Seite 57, wenn wir unser Beispielprojekt aufsetzen. Im letzten Kapitel dieses Buchs ab Seite 740 werfen wir außerdem einen Blick auf die Schematics – die Skripte, die der Angular CLI ihre guten Fähigkeiten verleihen.