Thomas Claudius Huber Trivadis AG

Klassen, Interfaces, Parameter, Properties, Decorators, Module – Angular baut auf all diesen Konzepten auf. Und das Entwickeln einer Angular-App mit TypeScript fühlt sich plötzlich ein bisschen nach C# an.

Googles beliebtes Single-Page-Application-(SPA-)Framework AngularJS wurde mit Version 2 komplett neu in TypeScript geschrieben. Damit ist auch das JS-Suffix aus dem Namen entfallen, und das Framework heißt seitdem einfach nur Angular. Angular-Anwendungen werden mit Komponenten gebaut, die sich ineinander verschachteln lassen. Zum Entwickeln einer Angular-Anwendung hat sich TypeScript als Standardsprache etabliert. In diesem Artikel wird eine Angular-Anwendung von Grund auf erstellt, mit allem, was dazugehört: Listen, Data Bindings und einer Verbindung zu GitHub via REST-API. Beim Entwickeln dieser Anwendung tauchen viele bekannte Muster der Sprache TypeScript auf: Klassen, Interfaces, Module oder Decorator.

Das Team von Google ist mit Angular auf eine semantische Versionierung umgestiegen. Die in diesem Artikel verwendete Version ist die zum Zeitpunkt der Drucklegung aktuelle Version 4. Die mit Version 2 eingeführten Grundprinzipien wie Komponenten, Data Bindings, Services usw. bleiben erhalten. Um eine Angular-Anwendung zu erstellen, wird das Angular-CLI genutzt, wobei CLI für Command Line Interface steht.

Eine App mit dem CLI erstellen

Das Angular-CLI wird über den Node Package Manager (NPM) mit folgendem Befehl global installiert: npm install -g @angular/cli.

Mit dem installierten CLI lässt sich jetzt die Kommandozeile nutzen, um ein neues Projekt zu erstellen und in diesem Projekt Komponenten, Services und vieles mehr zu generieren. Zum Erstellen einer App wird auf der Kommandozeile der jetzt verfügbare ng-Befehl wie folgt genutzt: ng new github-browser.

github-browser stellt im oberen Beispiel den Namen der App dar. Die App selbst wird in einem Unterordner mit demselben Namen erstellt. Das heißt, via change directory-Befehl (cd) kann von der Kommandozeile einfach in diesen Ordner gewechselt werden: cd githubbrowser.

Der Ordner enthält nicht nur ein neues, leeres Projekt, sondern bereits eine lauffähige Anwendung mit zahlreichen Beispieldateien. Bevor die Anwendung gestartet wird, sollten noch alle in der package.json-Datei vermerkten Node-Module installiert werden. Dazu einfach auf der Kommandozeile den aus dieser Artikelserie bereits bekannten Befehl aufrufen: npm install.

Mit den installierten Node-Modulen steht einem Start nichts mehr im Wege. Zum Starten der Anwendung wird auf der Kommandozeile der Befehl ng serve ausgeführt. Dieser Befehl startet einen Webserver auf dem Port 4200. Somit lässt sich die Website bzw. die Angular-App nach dem Ausführen dieses Befehls auf http://localhost:4200 öffnen. Der Webserver beobachtet nebenbei auch die Dateien des Projekts. Bei einer Änderung an einer Datei wird die Anwendung neu gebaut und der Browser automatisch aktualisiert.

Anstatt die App unter http://localhost:4200 manuell zu öffnen, lässt sich ng serve auch wie folgt mit dem –open-Parameter ausführen: ng serve –open. Dadurch wird automatisch ein Browserfenster mit der lauffähigen App geöffnet.

Den vollständigen Artikel lesen Sie in der Ausgabe:

Entwickler Magazin Spezial Vol. 15: JavaScript - "JavaScript"

Alle Infos zum Heft
579832677Schritt um Schritt zur Angular-App
X
- Gib Deinen Standort ein -
- or -