Manfred Steyer Selbstständig

Das Angular-CLI generiert ein gutes Grundgerüst für eine eigene Angular-Anwendung. Im Zuge dessen richtet es einen Build-Vorgang ein und kümmert sich um die Integration von Werkzeugen zur Quellcodeanalyse und fürs Testing.

Das CLI für Angular 2 vereinfacht den Projektstart mit Angular 2 drastisch, indem es ein Grundgerüst für die Anwendung bereitstellt. Beispielsweise konfiguriert es einen Build-Prozess und richtet Werkzeuge zum Testen der Anwendung ein, damit nimmt es Entwicklern Arbeit ab.

Früher war der Projektstart mit JavaScript einfach: Nach dem Herunterladen eines Frameworks wurde es über einen oder wenige Skriptverweise eingebunden, und schon konnte man mit der Entwicklung loslegen. Heutzutage setzen Anwendungen stärker auf JavaScript oder sind sogar vollständig damit geschrieben. Zur Beherrschung der damit einhergehenden Komplexität sowie zur Steigerung der Qualität greifen Teams deswegen auf immer mehr Werkzeuge zurück. Beispiele dafür sind Compiler, Build-Werkezeuge, Linter oder Testing-Frameworks.

Abb. 1: Das hier betrachtete Beispiel

Abb. 1: Das hier betrachtete Beispiel

Auch wenn diese Werkzeuge den Einsatz von JavaScript professionalisieren und somit die Entwicklung vereinfachen, ist deren Set-up in der Regel alles andere als trivial. Das Angular-2-CLI soll dieses Problem für Angular 2 lösen. Es generiert ein professionelles Projekt-Set-up, das sich an etablierten Konventionen orientiert und bereits die genannten Werkzeuge integriert. Zusätzlich schirmt es das Team gegen komplexe Details des eingesetzten Build-Werkzeugs ab und hilft beim Generieren weiterer Projektbestandteile, wie Komponenten oder Services.

Dieser Artikel stellt das CLI anhand eines einfachen Projekts zum Suchen nach Flügen vor (Abb. 1) und zeigt somit einen Weg auf, um mit Angular 2 möglichst schnell produktiv zu werden. Das generierte Projekt bietet minifizierte Bundles für den Produktivbetrieb ebenso wie die Integration des TypeScript-Compilers und Werkzeuge für Unit- sowie End-2-End-Tests. Das gesamte Beispiel findet sich zum Download auf meinem GitHub-Konto.

Projekt-Set-up mit dem CLI

Das CLI für Angular lässt sich über den Package-Manager npm, der Teil von Node.js ist, installieren:

npm install -g angular-cli

Danach steht das CLI über den Befehl ng zur Verfügung. Ein Aufruf mit dem Argument new veranlasst das CLI, ein neues Projekt im angeführten Ordner zu generieren:

ng new flight-app

Diese Anweisung richtet ein neues Angular-Projekt mit einer ersten Komponente sowie den oben genannten Werkzeugen ein. Zusätzlich bezieht es die nötigen Pakete via npm, weswegen sich dieser Vorgang auch etwas länger gestaltet (Abb. 2).

Abb. 2: Generierung eines neuen Projekts mit dem CLI

Abb. 2: Generierung eines neuen Projekts mit dem CLI

Danach kann man im generierten Projektordner weitere Projektbestandteile generieren, wie Komponenten oder Services. Das hier betrachtete Beispiel richtet zum Suchen nach Flügen einen FlightService im Ordner shared ein, der die Kommunikation mit einem Web API übernimmt.

Den vollständigen Artikel lesen Sie in der Ausgabe:

Windows Developer 1.17 - "Produktiver entwickeln"

Alle Infos zum Heft
579750582CLI in Angular 2: Ein Grundgerüst in wenigen Augenblicken
X
- Gib Deinen Standort ein -
- or -