Ursprünglich von Google-Entwicklern ins Leben gerufen, um HTML mit Dynamik zu versehen,  erlaubt es die Modularisierung von JavaScript-Logik und die Trennung statischer Oberflächenbeschreibung von dynamischer Kontrolllogik nach dem MVC-Paradigma. Im Rahmen des Modern Business Applications Day 1 auf der BASTA! 2013 zeigte Ingo Rammer, Mitbegründer und Consultant von thinktecture, wie wartbare, testbare und lesbare Anwendungen mittels AngularJS aussehen können.

An sich sei es ja ein ketzerisches Thema: „HTML5-Anwendungen im Silverlight-Stil“. Aber der Blick über den Tellerrand hin zu Single Page Applications (SPAs), also große clientseitige Anwendungen, lohnt sich.

Alle MVC/SPA-Frameworks bieten drei Themen an: Model Binding, clientseitiges Routing und UI-Templating – dahinter stecken aber je nach Framework ganz unterschiedliche Designideen.

„Sie als Entwickler haben die Qual der Wahl“, so Rammer.  Auf http://todomvc.com kann man 66 Versionen der gleichen App auf unterschiedlichen Frameworks ansehen. Generell  sei bei der Framework-Vielfalt Achtung geboten: „Viele sind für Einzelfälle konzipiert worden, auf die möchte man nicht mit seiner Business-Applikation setzen.“

Warum also AngularJS?

Knockout  sei technisch sehr nah an Silverlight angelegt, aber das Kernteam besteht nur aus zwei Leuten ­– „Das wäre mir für Großprojekte zu riskant.“ Ember.js sei für diesen Use Case Rammers zweite Wahl.

AngularJS macht das Rennen, da es sich sehr gut für HTML-zentrische SPAs eignet und ein Komponentenkonzept hat, was es für große Applikationen sehr tauglich macht. Es ist einbettbar, DI-basierend und testbar.

Model Binding: Wie kommen die Daten ans UI?

Zur Kommunikation zwischen Model, Controller und View verwendet AngularJS Scopes: Namensräume, abgebildet als einfache JavaScript-Objekte. Jede AngularJS-Anwendung hat genau ein Root-Scope-Objekt, von dem weitere Scope-Objekte abgeleitet werden. So verfügt jeder Controller über einen eigenen Scope, über den wiederum die Kommunikation mit der zugeordneten View erfolgt.

Da AngularJS alle Scope-Objekte überwacht, werden Veränderungen eines Datenmodells sofort registriert und weitere Aktionen können ausgeführt werden.

Datenmodelle sind im AngularJS-Kontext immer Eigenschaften eines Scope-Objekts und nur in der View sichtbar, die dem Controller zugeordnet ist.

Eine Sache sei unbedingt zu beachten: „DOM-Manipulation werden nie aus dem Controller gemacht, das gehört in die Directive“.

AngularJS kann Directives

Das kann sonst kein Framework: Views werden in AngularJS in einfachem HTML definiert und durch Directives mit JavaScript-Logik versehen. Dazu bringt AngularJS eine Reihe vordefinierter Directives mit, die als Attribut, Klassen- oder Element-Name deklariert werden.

Der Code kann mit den Directives sehr verschachtelt werden. Davon sollten sich Unerfahrene aber nicht abschrecken lassen, rät Rammer.

Routing

AngularJS bietet ein Routing-System zur Navigation über die Bedienelemente des Browsers oder für das Setzen von Lesezeichen. Die Unterstützung des Browser-Verlaufs funktioniert so, dass AngularJS an den URL einen Hash anhängt. Der wird durch ein „#“ gekennzeichnet.

Keine Angst vor HTML

Die Directives in AngularJS sorgen für eine sauberen Trennung von statischer UI-Beschreibung und dynamischer Anwendungslogik. Der Code zur DOM-Manipulation entfällt, was die Testbarkeit von Controller– und Service-Komponenten erhöht. Komponenten mittels AngularJS-Modulen zu modularisieren, erleichtert die Wartbarkeit von JavaScript-Anwendungen un macht sie besser strukturierbar. Das Routing-Konzept löst das SPA-Problem des Browser-Verlaufs.

Auch .NET-Entwickler können also durchaus von HTML und JavaScript profitieren und finden in AngularJS vieles aus der Silverlight-Entwicklung wieder.

Die Modern Business Applications Days auf der BASTA! 2013 in Mainz gehen heute in die zweite Runde.