© Liashko/Shutterstock.com
Entwickler Magazin
TypeScript in Angular einsetzen

Schritt um Schritt zur Angular-App

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.

Thomas Claudius Huber


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.

TypeScript-VideotutorialVon Thomas Claudius Huber gibt es auf www.tutorials.entwickler.de auch ein ausführliches Videotutorial zur Einführung in TypeScript.

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 github-browser.

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. Die mit dem CLI generierte App sieht wie in Abbildung 1 aus.

Abb. 1: Die mit dem CLI generierte Angular-App

Die Str...

Entwickler Magazin
TypeScript in Angular einsetzen

Schritt um Schritt zur Angular-App

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.

Thomas Claudius Huber


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.

TypeScript-VideotutorialVon Thomas Claudius Huber gibt es auf www.tutorials.entwickler.de auch ein ausführliches Videotutorial zur Einführung in TypeScript.

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 github-browser.

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. Die mit dem CLI generierte App sieht wie in Abbildung 1 aus.

Abb. 1: Die mit dem CLI generierte Angular-App

Die Str...

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