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/
0 Kommentare
An der Diskussion teilnehmenKeine Kommentare vorhanden
Kommentar hinterlassen