© saicle/Shutterstock.com
PHP Magazin
Rascher Angular-2-Projektstart mit dem CLI

Ein Grundgerüst in wenigen Augenblicken

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.

Manfred Steyer


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.

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 [1] 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 auf GitHub zum Download unter [2].

Abb. 1: Das hier betrachtete Beispiel

Projekt-Set-up mit dem CLI

Das CLI für Angular lässt sich über den Package-Manager npm, der Teil von Node.js [3] 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

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. Dazu kommt der Parameter g zum Einsatz, der für generate steht:

PHP Magazin
Rascher Angular-2-Projektstart mit dem CLI

Ein Grundgerüst in wenigen Augenblicken

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.

Manfred Steyer


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.

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 [1] 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 auf GitHub zum Download unter [2].

Abb. 1: Das hier betrachtete Beispiel

Projekt-Set-up mit dem CLI

Das CLI für Angular lässt sich über den Package-Manager npm, der Teil von Node.js [3] 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

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. Dazu kommt der Parameter g zum Einsatz, der für generate steht:

Neugierig geworden?


   
Loading...

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang