Open Source im professionellen Einsatz
Linux-Magazin 01/2017
© Yana Gayvoronskaya, 123RF

© Yana Gayvoronskaya, 123RF

Das Client-seitige Javascript-Framework Angular 2

Zweiter Aufguss

Mit Typescript statt Javascript, JiT- und AoT-Kompilation und einem konsequenten Einsatz von Components brühen die Macher das Javascript-Framework Angular in Version 2 neu auf. Das Linux-Magazin probiert einen kräftigen Schluck von dem Gebräu.

636

Nach immerhin sechs Jahren Entwicklungszeit erschien Mitte September 2016 die zweite Major-Release des Client-seitigen Javascript-Frameworks Angular [1]. Die gute Nachricht: Auch Angular 2 setzt auf Databindings, um Anwendungsdaten im Browser über Direktiven, das sind eigens definierte HTML-Tags, im HTML-Dokument zu platzieren. Die schlechte: Angular 2 ist nicht rückwärtskompatibel. Das liegt aber weniger an dem Rewrite der Codebasis unter Typescript [2], sondern vielmehr an Design-Entscheidungen der Macher.

Der vorliegende Artikel beschreibt anhand einer Beispielanwendung (Abbildung 1), wie Entwickler Apps unter Angular 2 mit Typescript programmieren. Die App ist schlicht: Ein Klick auf »Add« überführt die beiden Messwerte zu Temperatur und Druck aus den Formularfeldern in die Tabelle am unteren Ende des Ausgabebereichs. Zeitgleich errechnet die App die Mittelwerte der gemessenen Werte in der Zeile unter der Überschrift »Wetterstation« .

Abbildung 1: Die Wetterstation erreicht der Anwender im Browser über die URL http://localhost:3000 oder eine lokale IP-Adresse.

Schnellstart

Zunächst installieren die folgenden zwei Zeilen eine aktuelle 6er Version der Server-seitigen Javascript-Implementierung Node [3] auf dem Entwicklungsrechner mit Debian 8:

curl -sL https://deb.nodesource.com/ setup_6.x | bash -apt install nodejs git

Zeile 1 erweitert die Sammlung von Paketquellen für Debians Paketmanager, indem sie ein Repository für die derzeit aktuelle Version 6.7.0 von Node ergänzt. Dann installiert Apt mit Rootrechten Node und Git, die der Anwender zur Installation von Angular 2 benötigt.

Eine Schnellstart-Variante der Version 2.1.0 von Angular holen die folgenden Befehle auf die Festplatte:

git clone https://github.com/angular/ quickstart station
cd station
npm install

Zeile 1 kopiert das begehrte Schnellstarter-Modul per Git in das Projektverzeichnis »station« . Der User wechselt anschließend dorthin und installiert das Modul über Nodes Paketmanager »npm« [4].Das Schnellstarter-Modul liefert eine Out of the Box lauffähige, aber recht rudimentäre Angular-2-Anwendung. Die Listings des Artikels erweitern dieses Modul um eine kleine Beispiel-App.

Testlauf

Listing 1 liefert aber zunächst einen Überblick: So sieht es im Projektverzeichnis der fertigen Beispielanwendung aus. Die zugehörigen Dateien liegen im Ordner »v2« , der User kopiert sie in den Ordner »station« und überschreibt so die dort vorhandenen Files. Die Datei »package.json« etwa speichert die Namen und Versionsnummern der benötigten Node-Pakete, die das Kommando »npm install« bereits installiert hat.

Listing 1

Das Projektverzeichnis station

01 - station
02 |- app
03  |- app.component.html
04  |- app.component.ts
05  |- app.module.ts
06  |- weather.ts
07  |- main.ts
08  |- stack.service.ts
09 |- index.html
10 |- package.json
11 |- systemjs.config.js
12 |- node_modules
13 |- styles.css
14 |- tsconfig.json
15 |- typings
16 |- typings.json

Das Verzeichnis »app« enthält vorrangig anwendungsspezifische Dateien wie »app.component.html« , »app.component.ts« , »weather.ts« oder »stack.service.ts« . Auch die Datei »app.module.ts« wartet hier, sie bindet die Anwendung zu einem Angular-Modul zusammen. Die Datei »tsconfig.json« erklärt dem Typescript-Compiler, wie er Javascript erzeugen soll.

Wechselt der Entwickler nun in das Verzeichnis »station« und startet die Entwicklungsumgebung mit

npm start

übersetzt der Compiler jede Datei mit der Endung ».ts« nach ».js« . Mitunter enthält noch die Datei »typing.json« [5] im gleichnamigen Verzeichnis Angaben zu bibliotheksspezifischen Erweiterungen, die der Typescript-Compiler nicht erfassen kann.

Hat die Entwicklungsumgebung die Dateien übersetzt, startet sie einen HTTP-Server und zeigt die zugehörigen URLs auf der Kommandozeile an. Der Entwickler erreicht die Wetterstation, indem er in die Browserleiste auf dem Entwicklungsrechner die URL »localhost:3000« eingibt (Abbildung 1). Läuft Angular in einer VM oder einem Container, setzt er deren IP-Adresse ein. Auf Port »3001« läuft parallel das Testtool Browsersync (Abbildung 2), das bei Bedarf Tests für die Webanwendung anbietet.

Abbildung 2: Wer seine Angular-2-App gleich im Browser testen möchte, kann auf Browsersync zurückgreifen.

Diesen Artikel als PDF kaufen

Express-Kauf als PDF

Umfang: 5 Heftseiten

Preis € 0,99
(inkl. 19% MwSt.)

Linux-Magazin kaufen

Einzelne Ausgabe
 
Abonnements
 
TABLET & SMARTPHONE APPS
Bald erhältlich
Get it on Google Play

Deutschland

Ähnliche Artikel

  • Angular JS

    Angular JS ist der aktuelle Shootingstar unter den Webframeworks. Die Javascript-Bibliothek bringt bewährte Konzepte der Rich-Client-Entwicklung in den Browser und entwirrt Ansichten und Daten.

  • Angular 2 ist fertig

    Nach längerer Entwicklungszeit hat Google in seinem Hauptquartier die finale Version seines Framework für Webanwendungen, Angular 2, veröffentlicht. Das dürfte im Laufe der kommenden Jahre Angular 1 ablösen und fokussiert sich auf Mobilgeräte und moderne Browser.

  • Googles Angular arbeitet in Version 1.3.0 schneller

    Googles Javascript-Framework Angular bringt in Version 1.3.0 einige "erwähnenswerte neue Features" mit, reduziert den Speicherverbrauch und verbessert die Performance.

  • React

    Vom Unternehmen Facebook kommt das quelloffene Javascript-Framework React, das Weboberflächen geschickt mit Datenschätzen verknüpft. Insbesondere die Renderfunktion macht sich dabei nützlich.

  • Meteor 1.2 unterstützt Ecmascript 2015, React und Angular

    Meteor, das Javascript-Framework für Anwendungsentwicklung, hat mit Version 1.2 das nach eigener Aussage bislang umfangreichste und "ambitionierteste" Release veröffentlicht.

comments powered by Disqus

Stellenmarkt

Artikelserien und interessante Workshops aus dem Magazin können Sie hier als Bundle erwerben.