Komplexe Javascript Frameworks die um die Gunst der Web-Entwickler buhlen, gibt es viele da draußen. Mit ihnen können wir statisches HTML in hochdynamische, modulare Web-Anwendungen verwandeln. Häufig erwähnte sind z. B. Backbone, Ember oder Spine. Doch heute wollen wir euch AngularJS kurz vorstellen.
Auch AngularJS setzt auf modulares Javascript. Statt MVC (Model View Controller) heißt es hier jedoch MVVM (Model View View Model): Models kommunizieren mit dem ViewModel (auch bekannt als $scope-Object). Diese ViewModels lauschen auf Änderungen an den Models, welche letztlich an die Views zur Darstellung weitergegeben werden. Doch genug technischer Background. Das zugrunde liegende technische Konzept hinter AngularJS könnt ihr hier nachvollziehen. Kommen wir zu den Vorteilen und Besonderheiten dieses Frameworks:
Entwickelt von Google
AngularJS ist von Google Entwicklern gebaut. Vom Internetriese Google kennen wir gelungene, gerade auch technisch anspruchsvolle Web Apps wie z. B. GMail, den Google Calendar oder den Google Reader. Wenn von diesen Entwicklern dann ein JS-Framework zum Entwickeln von High Performance Web Apps vorgestellt wird, lohnt es sich genauer hinzusehen.
Data Binding
Ohne eine Zeile Javascript schreiben zu müssen, kann man DOM-Elemente miteinander verknüpfen. So kann man z. B. eine Eingabe aus einem Textfeld an einer anderen Stelle im Dokument ausgeben lassen ohne DOM Operationen, wie wir sie aus jQuery kennen ausarbeiten zu müssen. Ein Großteil des JS Codes in heutigen Websites basiert auf solchen und ähnlichen DOM Operationen. Mit AngularJS, spart ihr euch das Durchsuchen und Manipulieren des Dokuments um diverse Gimmicks zu erzielen.
Hier binden wir die Eingabe in einem input an ein h1-Element und haben unser erstes Hello World Skript in AngularJS:
<!doctype html>
<html ng-app>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
</head>
<body>
<p>
<label>Name:</label>
<input type="text" ng-model="name" placeholder="Name eingeben">
</p>
<h1>Hallo {{name}}!</h1>
</body>
</html>Templating
AngularJS beherrscht auch den Umgang mit Templates. Wie in verwandten Frameworks handelt es sich aber nicht um Strings oder eine Verkettung von Strings, sondern echten DOM-Objekten. In diesem Beispiel haben wir eine Reihe Bilder im fiktiven Video Controler definiert:
function VideoCtrl($scope) {
$scope.thumbs = [
{"thumbnail":"http://placehold.it/20x20", "description":"Image 01 description"},
{"thumbnail":"http://placehold.it/20x20", "description":"Image 02 description"},
{"thumbnail":"http://placehold.it/20x20", "description":"Image 03 description"},
{"thumbnail":"http://placehold.it/20x20", "description":"Image 04 description"},
{"thumbnail":"http://placehold.it/20x20", "description":"Image 05 description"}
];
}und geben sie hier mittels "ng-repeat" auf denkbar einfachste Art aus:
<div ng-controller="VideoCtrl">
<ul>
<li ng-repeat="thumb in thumbs">
<img ng-src="{{thumb.thumbnail}}" alt="{{thumb.description}}">
</li>
</ul>
</div>Die ersten Beispiele lassen erahnen wieviel Power in AngularJS steckt. Ein komplettes Tutorial könnt ihr hier nachbauen. Richtig zur Geltung kommt AngularJS in sogenannten Single Page Applications. Also Websites die gar nicht mehr "komplette" Requests an den Server schicken, um eine ganze Seite auszuliefern, sondern moderne Apps, die den angeforderten Content nachladen ohne ganze Seiten neuladen zu müssen -> SPAs.
Nächstes mal bauen wir ein erstes kleines Tool mit AngularJS. Bis dahin!