Kategorien
JavaScript & jQuery Programmierung

AngularJS erweitert HTML um Anwendungslogik und Web Components

Vor zwei Tagen stellte ich das Mozilla-Projekt X-Tag an dieser Stelle vor. Mit X-Tag ist es möglich, auf der Basis von Javascript eigene HTML-Elemente zu entwerfen und zu verwenden, als würden sie im Standard so bereit gestellt. X-Tag basiert locker auf dem aktuellen Stand der Diskussion des W3C Arbeitspapiers zu Web Components, wobei es sich auf den Teilbereich Custom Elements beschränkt. Googles AngularJS schlägt in die gleiche Kerbe, ist dabei aber nicht nur auf Custom Elements beschränkt, sondern liefert einen anwendungslogischen Teil mit. Wir werfen einen Blick auf Googles Vorschlag.

AngularJS: Model Driven Views und Custom Elements

AngularJS ist ein komplexes Javascript-Framework, entworfen mit dem Ziel, HTML fitter für Web Apps zu machen. Mit AngularJS wird HTML dynamischer und kann in begrenztem Umfang direkt auf Benutzereingaben reagieren. Im Grunde liefert AngularJS keine wirklich alleinstellenden Leistungsmerkmale. So kann alles, was mit AngularJS möglich ist, auch auf andere Weise, etwa mittels jQuery, das AngularJS übrigens integriert, erreicht werden. Der Unterschied besteht nicht in der Leistungsfähigkeit, sondern in der Art und Weise der Umsetzung. Und die ist in der Tat anders…

Wie bei X-Tag ist es auch bei AngularJS sinnvoll, sich die Vorgehensweise anhand eines Codebeispiels zu verdeutlichen. Der folgende Code erzeugt ein Eingabefeld, in welches der Benutzer einen Namen schreiben soll. Schon während der Eingabe wird der Name ausgelesen und in dem H1-Element weiter unten dynamisch ausgegeben.



  
    
  
  
    

Hello {{yourName}}!


Texteingabefeld und Rückgabe der Werte anhand des zugegebenermaßen unlustigen Beispiels Chuck Norris…

Mehrere Dinge fallen neben der Einbindung des AngularJS im HTML-Quelltext auf. Der HTML-Tag wurde um die Bezeichnung ng-app erweitert. Das Input-Element wurde um ein ng-model mit der Eigenschaft yourName ergänzt und im H1-Tag findet sich ein Platzhalter gleichen Namens in zwei geschweiften Klammern.

Ng-app zeigt AngularJS an, in welchem Bereich der Seite es aktiv sein soll. Dasjenige HTML-Element, welches um ng-app erweitert wird, ist sozusagen der Root der Anwendung. Im oben gezeigten Beispiel soll AngularJS demnach auf der gesamten Seite aktiv, man könnte es aber auch auf andere Tags setzen und so den Wirkungsbereich einschränken.

Ng-model bezeichnet das Modell, dessen Daten später zu einem View führen sollen. Die Eigenschaft ist eine frei deklarierte Variable, die nur insofern hinsichtlich ihrer Namensgebung von Relevanz ist, als sie weiter unten in dem Bereich mit den geschweiften Klammern, dem eigentlichen View bzw. der Data Binding Location, wieder korrekt referenziert werden muss. Durch die automatisierte Anbindung des Modells an die Location findet die Übernahme der Daten im Zeitpunkt der Eingabe statt.

Trotz einer nicht ganz unbeachtlichen Funktionalität, die auf diese simple Art und Weise in das HTML-Dokument injiziert wurde, bleibt der Code kurz, lesbar und vor allem verständlich. Natürlich ändert sich das mit steigender Komplexität der Anwendung, dennoch bleibt die Lesbarkeit innerhalb der HTML-Datei weit besser als bei einer Implementation von reinem Javascript. Auf dieses Javascript kann natürlich auch bei AngularJS nicht verzichtet werden. Es wird vielmehr ausgelagert und in Form sogenannter Controller für einzelne Web App-Funktionalitäten auf herkömmliche Weise per Script-Tag wieder eingebunden. Für die Anbindung an Cloud-Datenbanken stehen Javascript-Module bereit, so etwa für Mongolab.com. Komplexere Bausteine für die mehrfache Wiederverwendung und das Sharing mit anderen Webworkern verpackt man in sogenannte Components.

Auch bei AngularJS ist, ebenso wie bei Mozillas X-Tag, ein schrittweiser “Rückbau” der Funktionen hin zum Standard, so er denn dereinst kommen sollte, vorgesehen. Bis dahin kann man mit Googles Framework vor allem bereits jetzt erreichen, was erst irgendwann standardisiert möglich sein wird.

Google stellt AngularJS unter der MIT-Lizenz zur kostenfreien Nutzung bereit. Der Download kann über die Website zum Produkt oder über GitHub erfolgen. Wer schnell einen Eindruck des Projekts erhalten will, schaut sich die Präsentation des Googlers Igor Minar unter dem Titel “Re-imagining the browser” anlässlich der Konferenz Fluent vor gut zwei Wochen an.

Von Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design.

6 Antworten auf „AngularJS erweitert HTML um Anwendungslogik und Web Components“

Ich finde das ein Vergleich zum X-Tag gar nicht gut gewählt ist. X-Tag mag für sich vielleicht eine Alternativ zu AngularJS’s Direktiven sein, bzw. umgekehrt. Ein wenig tiefer in der Materie jedoch bemerkt ganz neue Möglichkeiten. Jenes Two-Way-Data-Binding allein bringt so viel Potenzial mit, das zusätzliches Javascript für ewaitige dynamische Änderungen in vielen Fällen unnötig wird. Bspw:

Text Text text…
Div verstecken

Hier braucht es keine eigene Zeile JavaScript. Und das ist nur ein sehr simples Beispiel. AngularJS biete viele solche vorgegeben Direktiven. Man kann auch seine eigenen kreieren, als Element, als Attribut und/oder als CSS-Klasse.

Controller, wie von Florian erwähnt, dienen dem MVC. Im Grunde gibt AngularJS nicht vor, wie man es umsetzt, bietet aber mit Services (bspw. Abstraktionschicht für Dienste) und den Dependency Injection, der die nötigen Services (o.ä.) automatisch instanziert und übergibt. Klingt kompliziert, funktioniert aber sehr simpel. Bspw. an eine Funktion wie foobar($scope, $http, $eigenerDienst){} werden automatisch die benötigten Objekte übergeben, ohne das dies irgendwo definiert werden müsste ($eigenerDienst muss einmalig definiert werden).

Dies beschreibt wie gesagt nur der Anfang. Das ist nicht mit X-Tag zu vergleichen oder als alternative zu sehen. X-Tag bedient ein völlig anderen Ansatz. (Momentan bspw. setze ich eine Anwendung um, die bis auf Datenbeschaffung (Roh-Daten) keine serverseitige Logik bedarf.)

Gute Frage, Ähnlichkeiten gibt es ja, man siehe nur die Tags „tabs“ und „panl“. Allerdings immernoch für mich keine Lösung. Eine Vereinfachung für den Entwickler ist keine schlechte Sache, da geht es ja vor allem um Geschwindigkeit, aber im Endeffekt als eventueller Nachteil für den Benutzer, denn dann noch eine Rückfallmöglichkeit zu entwickeln wenn kein JS aktiviert ist …

Will man es benutzen wäre es in meinen Augen eine Alternative zu X-Tag,
da es ja ähnliche bzw. erweiterte Möglichkeiten bietet wie z.B. Anwendungslockig im HTML. Geschmackssache.

Ich finde AngularJS sehr gelungen: Schöner Model-View-Controller-Ansatz (MVC), deklarativ Views aus „normalem HTML“ mit einigen leichte Erweiterungen, Two-Way-Data-Binding .. was will man mehr :-)

Vom Ansatz und der Vorgehensweise recht ähnlich zu Adobe Flex.

Habe letztens zu AngularJS auch ein Tutorial geschrieben, das die wichtigsten Funktionen zeigt:
http://html5-mobile.de/blog/angularjs-javascript-mvc-framework-tutorial

Viele Grüße Florian

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.