Skip to Content

<angular/> – ein radikal neuer Weg, Ajax Applikationen zu schreiben

Posted on    2 mins read

JavaScript, Ajax und DHTML sind nicht wirklich meine Welt. Zum einen, weil ich einfach grundsätzlich eher mit dem Backend einer Software als mit dem Frontend zu tun habe, zum anderen, weil ich immer schon das ungute Gefühl hatte, in diesem Bereich muss man einfach deutlich zu viel Code produzieren um damit dann gefühlt deutlich zu wenig zu erreichen.

Umso mehr hat <angular/> mein Interesse geweckt. Die Autoren versprechen:

Write less code. A lot less. Forget about writing all that extra JavaScript to handle event listeners, DOM updates, formatters, and input validators. comes with autobinding and built-in validators and formatters which take care of these. And you can extend or replace these services at will. With these and other services, you’ll write about 10x less code than writing your app without .

In einem Video versucht Miško Hevery zu erklären, was <angular/> eigentlich ist, und stellt fest dass diese Erklärung schwierig ist:

Mein Verständnis ist in erster Linie: <angular/> bringt JavaScript-Logik und das dazugehörige HTML Dokument deutlich näher zueinander als bestehende Frameworks wie beispielsweise jQuery. Es entfernt gleich mehrere Ebenen an Abstraktion, die ein Stück JavaScript-Code und das DOM-Element, auf welchem der Code operieren möchte, voneinander trennen.

Während man bei traditioneller JavaScript-Programmierung stets gezwungen ist, explizit das HTML Dokument mit JavaScript-Code zu manipulieren, macht <angular/> die Verbindung zwischen Logik und HTML-Repräsentation implizit – etwas, das mich übrigens stark an die Mechanik erinnert, die Max Winde für siqqel einsetzt.

Spielen wir ein einfaches Beispiel durch, welches ich dank der rein clientseitigen Arbeitsweise von <angular/> problemlos direkt hier im Post zum laufen bringen kann.

Zuerst binde ich die <angular/> JavaScript Bibliothek ein:

<script type="text/javascript"
 src="http://angularjs.org/ng/js/angular-debug.js" ng:autobind>
</script>

Nun definiere ich ein Input Feld sowie einen <angular/>-Platzhalter, welche beide in einer Beziehung zueinander stehen:

Dein Name: <input type="text" name="deinname" value="Manuel"/>
<br />
Hallo {{deinname}}!

Wodurch entsteht diese Beziehung? Sie ist dank Autobinding implizit, und mappt alleine aufgrund des Formularfeldnamens und des Platzhalternamens beide zusammen.

Das Ergebnis sieht man hier – einfach den Inhalt des Textfeldes ändern:

Eingabe: – Hallo {{yourname}}!

Dieses Beispiel geht natürlich maximal als Spielerei durch. Es zeigt aber schon, wieviel weniger Code nötig ist, als dies mit einem klassischen Framework der Fall wäre.

Ein etwas praxisnäheres Beispiel findet man unter http://angularjs.org/Cookbook:BasicForm. In diesem Beispiel geht es um den klassischen Fall, Eingaben in ein Textfeld per JavaScript clientseitig zu validieren – dies ist einfach möglich durch folgende schlanke und ausdrucksstarke Syntax:

<input type="text" name="user.address.state" size="2"
 ng:required ng:validate="regexp:/^\w\w$/"/>

Für weitere Informationen verweise ich auf http://angularjs.org/Overview.