© saicle/Shutterstock.com
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.

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].

steyer_cli_1.tif_fmt1.jpgAbb. 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).

steyer_cli_2.tif_fmt1.jpgAbb. 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:

cd flight-app ng g service shared/Flight

Obwohl sich der Service FlightService nennt, ist lediglich der Name Flight anzugeben. Die Endung Service zieht das CLI per Definition heran. Beim Generieren des Service informiert das CLI durch eine Warnung darüber, dass der Service noch bereitgestellt werden muss: WARNING Service is generated but not provided, it must be provided to be used. Das bedeutet, dass der Service später im Programmcode zu registrieren ist.

Zum Anzeigen der Flüge sieht das hier betrachtete Beispiel eine FlightSearchComponent vor. Diese wird ebenfalls mit dem CLI generiert, wobei auch hier das Suffix Component wegzulassen ist:

ng g component FlightSearch

Für die Optik der Anwendung sorgt zusätzlich Twitter Bootstrap, das über npm bezogen wird:

npm install bootstrap --save

Die mit diesen Anweisungen generierte Projektstruktur beinhaltet unter anderem den ­Ordner src, der für den Programmcode vorgesehen ist. Wie Abbildung 3 zeigt, hat das CLI für die FlightSearchComponent einen eigenen Ordner mit vier Dateien eingerichtet: N eben der TypeScript-Datei und einer dazugehörigen HTML- und CSS-Datei findet sich dort auch eine Datei mit der Endung spec.ts. Diese ist für Unit-Tests vorgesehen, die die Funktionsfähigkeit der Komponente überprüfen.

steyer_cli_3.tif_fmt1.jpgAbb. 3: Generierte Projektstruktur

Im Ordner shared begleitet auch eine solche spec.ts-Datei den FlightService. Die meisten dieser generierten Dateien beinhalten auch schon eine Grundstruktur, die sich für die Implementierung der gewünschten Anwendungsfälle anpassen lässt. Zusätzlich zu beachten ist die Datei index.html, die die Angular-Anwendung im Browser repräsentiert und sie unter Nutzung der main.ts startet.

Anwendung erstellen

Nachdem das CLI das Grundgerüst der Anwendung generiert hat, kann es ausgebaut werden. Zunächst ist die Bibliothek RxJS, die Angular 2 an vielen Stellen nutzt, in der main.ts zu importieren:

import 'rxjs';

Für die Optik der Anwendung ist darüber hinaus die CSS-Datei von Twitter Bootstrap in der Datei an­gular-cli.json zu referenzieren:

"styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.css" ],

Das veranlasst das CLI, die CSS-Datei in das für die Auslieferung generierte Bundle aufzunehmen. Zur Repräsentation der abgerufenen Flüge erhält das Beispiel zusätzlich ein Interface über die Datei shared/flight.ts bereitgestellt:

export interface Flight { id: number; from: string; to: string; date: string; }

Danach können die generierten Grundgerüste ausgebaut werden. Der FlightService, der wie üblich mit dem Dekorator Injectable markiert ist, erhält über den Konstruktor den von Angular 2 bereitgestellten Http-Service (Listing 1). Diesen nutzt er in seiner Methode find, um Flüge bei einem Web-API abzurufen. Die Klasse Headers repräsentiert die per HTTP übersendenden Kopfzeilen, und UrlSearchParams spiegelt die zu übersendenden Parameter wider.

Die Methode get des Http-Ser...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Gewinner-Teams

Wir bieten Lizenz-Lösungen für Teams jeder Größe: Finden Sie heraus, welche Lösung am besten zu Ihnen passt.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang