Angular JS

von s.vogel@gentics.com am 13.5.2013

Für statische Inhalte ist HTML sehr gut geeignet, dagegen versagt es wenn dynamischer Inhalt dargestellt werden soll. Die meisten JavaScript Frameworks wie Google Web Toolkit oder ExtJS umgehen dieses Problem in dem sie versuchen HTML weg zu abstrahieren. Angular.js geht genau den entgegen gesetzten Weg: es erweitert das Vokabular von HTML um dynamische Elemente und verspricht so eine schnelle und einfache Entwicklung von JavaScript-Frontend-Applikationen.


Das Framework wird gesponsert von Google und ist mittlerweile auch schon in einigen Google-Applikationen im Einsatz, zum Beispiel in der Youtube-App für die Playstation3 und in Googles Werbenetzwerk Doubleclick. Es ist darüber hinaus sehr schlank, minified ist es nur 80kb groß also sogar kleiner als jQuery und verspricht Unterstützung für alle gängigen Browser. Internet Explorer wird ab Version 7 unterstützt.

Entwickeln und Templating


Mit Angular.js kann das MVC-Design Pattern in der Frontend-Applikation sehr konsequent umgesetzt werden. Model und Controller werden zur Gänze in JavaScript umgesetzt, für den View, also für alle Dinge die der User sieht kommt die innovative Templating-Logik des Frameworks zum Einsatz. Über Attribute auf HTML-Elementen können Anweisungen an das Programm gegeben werden. In dem einfachen „Hello-World“-Beispiel (siehe Screenshot) wird definiert dass der Wert des Input-Felds zum Model „yourName“ gehört. Die Daten aus dem Model werden weiter unten durch die in geschwungenen Klammern geschriebene Anweisung wieder ausgeben.

Dabei wird ein sogenanntes Two-Way-Data-Binding verwendet, sprich jede Änderung an den Daten im Hintergrund, wird sofort an den User im HTML ausgeben. Dasselbe gilt auch umgekehrt, ändert der User einen Wert, beispielsweise in einem Formularfeld, dann wird die Änderung sofort ins Model übernommen und das Programm kann darauf reagieren.

Erweitern und Anpassen


Angular.js ist noch ein relatives junges Projekt, trotzdem gibt es schon einige Erweiterungen, besonders interessant ist hier vor allem Angular UI und Angular UI Bootstrap. Diese stellen vorgefertigte Widgets wie Datepicker, Bildergalerien, Tooltips und Dialogboxen zur Verfügung. Auch eigene Erweiterungen können im Rahmen von Angular Modulen entwickelt werden und das Framework so sehr einfach an Kundenwünsche anpasst werden.

Alles Testen


Für Entwickler interessant ist auch dass in Angular.js fast die gesamte Funktionalität durch Unit-Tests und Integrationstest überprüfbar ist. Für Einsteiger bietet Angular.js ein gutes Tutorial in dem eine einfache Applikation inkl. Unit-Tests Schritt für Schritt entwickelt wird. Auch die Dokumentation ist mittlerweile sehr umfangreich, trotzdem sind hier und da noch einzelne Teile leider nicht bzw. nur schlecht dokumentiert.

Für Fortgeschrittene


Alles in allem ist AngularJS ist ein sehr flexibles und leistungsstarkes Framework, allerdings ist es auch relativ komplex. Die tollen Dependency-Injection-Mechanismen beispielsweise stellen ein mächtiges Werkzeug dar, sind aber für unerfahrene Entwickler nur schwer durchschaubar. Für Teams mit fortgeschrittenen JavaScript-Entwicklern ist AngularJS aber auf jeden Fall einen Versuch wert.

Links:


http://angularjs.org/
http://angular-ui.github.io/bootstrap/
http://angular-ui.github.io/



Keine Kommentare vorhanden

Kommentar hinterlassen