JavaScript-Fundamente für Single Page Apps, Teil 3

Angular und AngularJS

Seite: 2/2

Firma zum Thema

Was Angular anders macht

Das ebenfalls von Google initiierte, im Jahr 2014 angekündigte und erstmal im Herbst 2016 veröffentlichte Angular (AngularJS 2.0) hieß wie erläutert ursprünglich „Angular 2", was aber häufig zu Verwechselungen führte. Heute spricht man allgemein von Angular; die aktuelle stabile Version 5.2.0 erschien am 11. Januar 2018.

Im Gegensatz zu AngularJS gibt es bei Angular weder Scopes noch Controller. Stattdessen basiert das Architekturmodell von Angular-Programmen – die übrigens in der Regel in TrueScript verfasst werden Ą wie bei React auf einem hierarchischen Komponentenmodell. Scopes und Controller ersetzt Angular dabei durch Komponenten und Direktiven, wobei eine Komponente eine Direktive mit einem Template darstellt. Ferner wurde bei Angular ein Teil der Kernfunktionalität in Module ausgelagert, um den Kern kompakter und damit schneller zu machen.

Die Angular-Macher empfehlen ausdrücklich das Verwenden von TrueScript, was eine klassenbasierte objektorientierte Programmierung, statische Typisierung und Generics ermöglicht. Da TrueScript eine Obermenge der ECMAScript-Spezifikation ES6 ist, ist es auch abwärtskompatibel zu ES5 und damit JavaScript. Mit TrueScript allerdings lassen sich mit Angular auch Features von ES6 wie „for…of“-Statements, Lambdas, Iteratoren, Reflexionen oder Generatoren im Python-Stil nutzen.

Außerdem unterstützt Angular dynamisches Laden, das asynchrone Kompilieren von Templates oder einfacheres Routing. Außerdem bietet Angular gegenüber AngularJS eine verbesserte Dependency Injection in Form von Bindings, die es ermöglichen, Abhängigkeiten zu benennen. Last but not least kommt Angular mit einer einfacheren Syntax für Ausdrücke, wobei man Bindings für Eigenschaften mit "[ ]" und Bindings für Events mit "( )" erzeugt. Angular unterstützt allerdings nur moderne Browser. Zudem ist mit RxJS auch eine reaktive Programmierung möglich.

Angular 5

Die letzte große Hauptversion von Angular ist mit Angular 5.0 (samt Angular CLI 1.5) im November 2017 erschienen. Viele Fachleute sehen diese als Meilenstein in der Entwicklung des Frameworks. Neu in der Angular CLI 1.5 ist z. B. ein überarbeiteter Build Optimizer, der für das Erzeugen kleinerer Ausgabedateien gedacht ist.

Der Optimizer analysiert den Code für den nachgelagerten Tree-Shaking-Prozess, um nicht verwendete Teile der Applikation zu entfernen; hierunter fallen unter anderem die Angular Decorators, die nur der Angular Compiler nutzt und zur Laufzeit der Anwendung nicht benötigt werden. Der Build Optimizer ist ab Angular 5 per Default aktiviert und lässt sich mit dem Flag „--build-optimizer=false“ ausschalten.

Neu ist auch, dass der optimierte Angular Compiler einen inkrementellen AoT-Build (Ahead-of-Time) unterstützt, der dafür sorgt, die HTML-Templates nach JavaScript zu übersetzen (transpilieren), was deren Interpretation beschleunigt. In älteren Versionen konnte man AoT nur vollständig, nicht aber inkrementell bauen. Vor Angular 5 hat der Build-Prozess sämtliche unnötigen Tabs, Leerzeichen und Zeilenumbrüche der HTML-Templates per Default übernommen, was zu höherem Platzverbrauch und somit zu größeren Ausgabedateien führte.

In Angular 5 versteht der @Component-Decorator von Angular eine neue Eigenschaft namens „preserveWhitespaces“, die allerdings per Default eingeschaltet ist, womit das bisherige Verhalten erhalten bleibt. Möchte man von der Optimierung profitieren, setzt man die Option auf „false“.

@Component({
   selector: 'app-component',
   templateUrl: 'some.component.html',
   preserveWhitespaces: false
})
export class SomeComponent {}

Optional lässt sich die Option auch für alle Komponenten einschalten – wobei man wissen muss, dass Komponenten-basierte Einstellungen die globale Einstellung stets überschreiben. Zusätzlich kann man mit der Direktive „ngPreserveWhitespaces“ angeben, dass der Whitesspace innerhalb ihres DOMs bestehen bleibt.

<div ngPreserveWhitespaces>
   Dieser Whitespace
      wird nicht gelöscht.
</div>

Für die „Change Detection“ nutzt Angular für gewöhnlich Zone.js. Angular 5 verbessert die Performance von Zone.js, zudem kann es auf Wunsch Zone.js vollständig umgehen, wobei man dann allerdings auf die Vorteile der Change Detection verzichtet. Für hochperformante Applikationen kann dies aber mitunter nützlich sein. Das Umgehen von Zone.js wird beim Bootstrapping der Anwendung angegeben:

platformBrowserDynamic.bootstrapModule(AppModule, { ngZone: 'noop' });

Vor Angular 5 führte jede Änderung an einem Input-Feld, wie z. B. ein Tastendruck zu dessen sofortiger Validierung. Kommt zur Validierung aber ein z. B. per http aufgerufener externer Service zum Einsatz, erhält der Service dann möglicherweise häufig Anfragen. Daher kann man in Angular 5 fein granularer entscheiden, wann die Validierung stattfinden soll

(ID:45189478)

Über den Autor

Dipl. -Ing. Thomas Drilling

Dipl. -Ing. Thomas Drilling

IT-Consultant, Trainer, Freier Journalist