Open Source im professionellen Einsatz
Linux-Magazin 01/2017
545

Finetuning

Listing 6 zeigt die Klasse Weather aus der Datei »app/weather.ts« . Sie speichert die Messwerte (Zeilen 4 und 5). Weather lässt sich wie »number« oder »any« als Datentyp verwenden. Die Konstruktor-Funktion ab Zeile 6 bindet die übergebenen Aufrufparameter an gleichnamige Attribute der Instanz. Das Fragezeichen hinter »date« macht die Angabe optional, ohne erzeugt Zeile 9 den aktuellen Zeitstempel.

Listing 6

app/weather.ts

01 //  Weather lässt sich auch als Datentyp in einer Typdeklaration verwenden
02 export class Weather {
03   date: string;
04   temp: number;
05   press: number;
06   constructor(temp: number, press: number, date?: string) {
07     this.temp = temp;
08     this.press = press;
09     this.date = (date)?date:(new Date()).toISOString();
10   }
11 };

Vor dem finalen Praxistest ist noch die fertige Anwendung in ein Angular-Modul zu verwandeln. Diesen Job übernimmt die Datei »app.module.ts« (Listing 7). Sie importiert zunächst den Dekorator »NgModule« , dann die Direktiven aus »BrowserModule« und »FormsModule« und die Klassen aus den Listings 4 und 5.

Listing 7

app/app.module.ts

01 // App zu einem Angular-Modul zusammenfassen
02 import { NgModule } from '@angular/core';
03 import { BrowserModule } from '@angular/platform-browser';
04 import { FormsModule } from '@angular/forms';
05 import { AppComponent } from './app.component';
06 import { StackService } from './stack.service';
07
08 @NgModule({
09   imports:      [ BrowserModule, FormsModule],
10   declarations: [ AppComponent ],
11   bootstrap:    [ AppComponent ],
12   providers:    [ StackService]
13 })
14 export class AppModule { }

Ab Zeile 8 von Listing 7 formt der Dekorator »NgModule« aus der am Anfang noch leeren Klassendefinition in Zeile 14 ein passendes Angular-Modul. Bei dieser Gelegenheit vererbt der Dekorator zugleich auch alle eingebauten Direktiven modulweit.

Weitere Direktiven importiert der Code in Zeile 9 in die App. So liefert »BrowserModule« beispielsweise die Direktiven »ngFor« und »ngIf« , während »FormsModule« die Direktive »ngModel« holt. Eine Zeile darunter sammelt »declarations« sämtliche benutzerdefinierten Direktiven ein – wozu Components, Pipes und sonstige gehören.

Zeile 11 legt schließlich mit »bootstrap« die »AppComponent« als Wurzel-Komponente fest, welche die App beim Start aufruft. Schließlich instanziiert und verteilt »providers« Dienste, hier »StackService« , über die benutzerdefinierten Direktiven. Speichert der Entwickler das letzte Listing selbsttätig, aktualisiert sich die Anwendung direkt im Browser (Abbildung 5).

Abbildung 5: Ein HTTP-Server liefert die Angular-2-Anwendung aus, auf die der User per Browser zugreift.

Fazit

Angular 2 punktet mit flexibleren Databindings und setzt den Fokus dabei mehr als zuvor auf Components. Zugleich beschleunigt der neue Compiler das Framework mit Hilfe von JiT oder AoT. Typescript hievt den Code des Frameworks sowie der darin geschriebenen Anwendungen auf einen zeitgemäßen Stand der Programmierkunst – die native Umsetzung gängiger Sprachmittel in den Browsern hinkt dagegen oft Jahre hinterher. In der vorliegenden, modernistischen Form dürfte Angular 2 viele neue Freunde finden, nur eine umfassende Sammlung von UI-Widgets, wie sie etwa Ext.js [11] bietet, trennt Entwickler jetzt noch vom großen Glück.

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

Ausgabe 11/2017

Digitale Ausgabe: Preis € 6,40
(inkl. 19% MwSt.)

Stellenmarkt

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