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.
