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

Komponentenkleber

Ursprünglich sollte Angular 2 ECMA-Script 6 unterstützen, den aktuellen Sprachstandard für Javascript. Nun übernimmt Typescript diese Rolle, eine von Microsoft erdachte Obermenge von Javascript. Das ergänzt die Ausdrucksstärke und Robustheit von ECMA-Script durch Sprachmittel und Plausibilitätsprüfungen. Tabelle 1 vergleicht Typescript mit den relevanten Standards von ECMA-Script und legt einen Fokus auf die Sprachmittel von Angular 2. Sie zeigt auch, wie tief in die Trickkiste Typescript greifen muss, um eine Anwendung nach ECMA-Script 5 zu übersetzen.

Tabelle 1

Vergleich von Sprachmitteln

Sprachmittel

ECMA-Script 5

ECMA-Script 6

ECMA-Script 7

Typescript

Statische Typen

-

-

-

ja

Klassen

-

ja

ja

ja

Interfaces

-

-

-

ja

Dekoratoren

-

-

ja

ja

Observablen

-

-

ja

ja

Aufgrund der damit verbundenen Vorteile sollten Angular-2-Anwender künftig besser Typescript verwenden, wenn sie neue Apps schreiben. Alternativ greifen sie zu Javascript oder auch zu Googles Programmiersprache Dart [9].

Listing 4 zeigt den Handler aus der Datei »app.componenten.ts« . Er kümmert sich um die Direktive »myApp« (Listing 2) und ist als Component umgesetzt. Die zweite Zeile importiert den Dekorator »Component« und das Interface »OnInit« aus Angulars Core-Paket, die nächste Zeile holt die Klassen »StackService« und »Weather« aus den Dateien »stack.service.ts« (Listing 5) und »weather.ts« (Listing 6).

Listing 4

app/app.component.ts

01 // Die Component ersetzt die Direktive <myApp> durch die eigentliche Anwendung
02 import { Component, OnInit } from '@angular/core';
03 import { Weather }      from './weather';
04 import { StackService } from './stack.service';
05
06 @Component({
07   selector: 'myApp',
08   templateUrl: 'app/app.component.html',
09 })
10 export class AppComponent implements OnInit {
11   datas: Weather[] = [];
12   model: Weather = new Weather(8, 1080);
13   constructor(private stackService: StackService) {}
14   avg(field: string): number { return this.stackService.avg(field); };
15   add(): void { this.stackService.add(new Weather(this.model.temp, this.model.press)); };
16   ngOnInit(): void { this.datas = this.stackService.datas}
17 }

Der Code legt die Component »AppComponent« als Klasse an. Dazu versieht der Dekorator »@Component« zunächst die Klassendefinition (Zeile 10) mit den Eigenschaften einer Component, wozu die beiden Konfigurationsobjekte dienen. In Zeile 7 wählt »selector« die benutzerdefinierte Direktive »myApp« , die auch in der »index.html« steckt (Listing 2), als Betätigungsfeld aus, »templateUrl« verlinkt das Template eine Zeile später mit der HTML-Datei aus Listing 3.

Anders als sein Vorgänger erlaubt Angular 2 Templates nur noch in Verbindung mit Components. Die Typendeklaration einer Variablen erfolgt unter Typescript nach dem Doppelpunkt (Listing 4, Zeile 11). So nimmt »datas« eine Liste des benutzerdefinierten Typs »Weather« aus Listing 6 auf und speichert alle Sätze von Messwerten. Die Variable »model« ist hingegen einfach vom Typ »Weather« und dient dazu, über die Direktive »[(ngModel)]« Messwerte aus ihren Formularfeldern (Listing 3, Zeilen 5 und 6) auszulesen. Im Übrigen reicht bereits ein einfaches »(ngModel)« zum Lesen aus.

Die Component implementiert nebenbei noch das Interface »OnInit« . Klassen, die es implementieren, nehmen Dienste wie »StackService« auf. Praktischerweise kann Angular Dienste als Singleton [10] erzeugen. Dann verteilt es sie – wie Components oder Pipes – über die Konstruktorfunktion der Direktiven (Zeile 13). Der Handler »ngOnInit()« verlinkt dann die Liste »datas« mit der gleichnamigen Komponente aus dem Objekt vom Typ »StackService« . Die Methoden »avg()« und »add()« umhüllen die namensgleichen Methoden aus »StackService« .

Injektion

Listing 5 zeigt den Dienst »StackService« – einen einfachen Datenspeicher aus der Datei »app/stack.service.ts« . Zeile 2 importiert zunächst den Dekorator »Injectable« . Dieser macht die Klasse »StackService« injizierbar. Die Anwendungsdaten speichert die Liste »datas« in Zeile 6. Der Datentyp »any« garantiert einen universell verwendbaren Datenspeicher, da »any« jeden Datentyp akzeptiert.

Die Methode »add()« dient als Schnittstelle zum Speichern neuer Elemente. Eine Zeile darunter bildet »avg()« für die im Aufrufparameter »fld« übergebene Komponente den arithmetischen Mittelwert aller gespeicherten Objekte.

Listing 5

app/stack.service.ts

01 // Dienstklasse zum Speichern von Anwendungsdaten
02 import { Injectable } from '@angular/core';
03
04 @Injectable()
05 export class StackService {
06   public datas: any[] = [];
07   add(obj: any): void { this.datas.push(obj); };
08   avg(fld: string): number {
09     if (this.datas.length > 0) {
10       return this.rnd(this.datas.reduce((s, o) => s + parseFloat(o[fld]), 0)/this.datas.length);
11     };
12     return 0;
13   };
14   rnd(val: number, digits: number = 2) {
15     let pre = Math.pow(10, digits);
16     return Math.round(val*pre)/pre;
17   };
18 }

Ist die Liste nicht leer, summiert die Methode »reduce()« über die Komponente alle gespeicherten Objekte. Die Summe dividiert sie dann durch die Länge der Liste (Zeile 10). Dann rundet »rnd()« den errechneten Mittelwert auf zwei Stellen hinter dem Komma. Für die leere Liste gibt »avg()« hier zu Demozwecken 0 zurück.

Die Hilfsmethode »rnd()« übernimmt in Zeile 14 in »val« die zu rundende Zahl und in »digits« die Anzahl der Nachkommastellen. Die Zeile darunter bildet die Potenz 10digits. Die letzte Zeile rettet die erwünschten Nachkommastellen durch Multiplikation zunächst vor dem Runden, um sie dann wieder per Division hinter das Komma zu schieben.

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.