© best_vector/Shutterstock.com
Teil 7: TypeScript in Angular einsetzen

Fühlt sich ein bisschen wie 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 – dem letzten Teil der TypeScript-Serie – 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.

Artikelserie

Teil 1: TypeScript – Grundlagen für .NET-Entwickler

Teil 2: Von „number“ über Arrays bis „undefined“

Teil 3: TypeScript – Interfaces, Klassen und Generics

Teil 4: TypeScript – Funktionen

Teil 5: TypeScript – Module

Teil 6: TypeScript – Decorators

Teil 7: TypeScript in Angular einsetzen

Das Team von Google ist mit Angular auf eine semantische Versionierung umgestiegen. Im Herbst 2017 soll bereits Angular 5 erscheinen, im Frühjahr 2018 dann Angular 6. Die in diesem Artikel verwendete Version ist die zum Zeitpunkt der Drucklegung aktuelle Version 4.

Wie auch immer, 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-Video-Tutorial

Von Thomas Claudius Huber gibt es auf www.tutorials.entwickler.de auch ein ausführliches Video-Tutorial 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 e...

Neugierig geworden?

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