Webanwendungen mit AngularJS
Die HTML ursprünglich zugrunde liegende Idee war der schnelle und strukturierte Austausch wissenschaftlicher Dokumente. Seither wurde die Sprache zwar weiterentwickelt, jedoch nie an die Bedürfnisse komplexer Webanwendungen angepasst. Die Entwickler von AngularJS versuchen zu helfen.
- Golo Roden
Die HTML ursprünglich zugrunde liegende Idee war der schnelle und strukturierte Austausch wissenschaftlicher Dokumente. Seither wurde die Sprache zwar deutlich weiterentwickelt, jedoch nie an die Bedürfnisse komplexer Webanwendungen angepasst. Die Entwickler von AngularJS versuchen zu helfen.
Während Knockout das moderne Entwurfsmuster Model View ViewModel (MVVM) verwendet, setzt Backbone.js auf dessen Vorgänger Model View Controller (MVC). Das von Google entwickelte Open-Source-Framework AngularJS favorisiert weder das eine noch das andere Entwurfsmuster, sondern verknüpft beide auf elegantem Weg. Genau wie Knockout implementiert AngularJS MVVM, um eine bidirektionale Datenbindung zwischen HTML und JavaScript zu ermöglichen, gleichzeitig strukturiert es jedoch den grundlegenden Aufbau von Webanwendungen mit MVC (s. Abb. 1).
Für die Verdrahtung der Komponenten verfügt AngularJS über einen integrierten Dependency-Injection- Container (DI). Statt die Verbindungen statisch vorzunehmen, registriert man die Komponenten als eigenständige, isolierte Module und beschreibt ihre Abhängigkeiten, die AngularJS im Anschluss auflöst, deklarativ.
Das hervorstechendste Merkmal des Frameworks ist jedoch die Möglichkeit, eigene HTML-Elemente und -Attribute definieren zu können, die innerhalb der Webanwendung als eigenständige Komponenten zur Verfügung stehen. Auf diesem Weg lässt sich eine Brücke zwischen Entwicklern und Designern schlagen und die Semantik von HTML für eigene Belange erweitern.
An die Stelle zahlreicher tief verschachtelter div-Elemente tritt dadurch deutlich besser lesbarer und damit leichter verständlicher Code, wie der folgende Ausschnitt einer mit AngularJS arbeitenden Webanwendung zeigt:
<image-uploader accepted-type="image/png" enable-drag-drop>
</image-uploader>
Die Philosophie von AngularJS sieht vor, dass eine Webanwendung ihre Darstellung ausschließlich als Reaktion auf Veränderungen des zugrunde liegenden View-Modells anpasst. Der zahlreichen Webentwicklern vertraute direkte Zugriff auf das Document Object Model (DOM) gilt in AngularJS in nahezu allen Fällen als unerwünscht. Daher enthält AngularJS von Haus aus zahlreiche Direktiven, deren Namen allesamt das Präfix ng- tragen.
Implementieren der Konzepte
Um eine Webseite in eine AngularJS-Anwendung umzuwandeln genügt es, die von der Projektseite heruntergeladene Skriptdatei angular.min.js einzubinden und dem Wurzelelement der Anwendung die vorgefertigte Direktive ng-app hinzuzufügen. Im einfachsten Fall entspricht das Wurzelelement dem html-Element der Webseite:
<!doctype html>
<html ng-app>
<head>
<title>My AngularJS app</title>
</head>
<body>
// ...
<script type="text/javascript" src="angular.min.js"></script>
</body>
</html>
Alternativ lässt sich die ng-app-Direktive einem beliebigen anderen, dem html-Element untergeordneten Element hinzufügen. In diesem Fall wandelt AngularJS lediglich den ausgewählten Bereich in eine Webanwendung um. Das ist unter anderem für die Migration bestehender Webanwendungen nach AngularJS hilfreich, da sich eine Umstellung nach und nach vornehmen lässt. Außerdem kann man so mehrere unabhängige Anwendungen innerhalb einer Seite unterbringen.
Zusätzlich zur Ansicht benötigt man einen Controller. Er entspricht in AngularJS einer gewöhnlichen Konstruktor-Funktion, die allerdings einen Parameter namens $scope entgegennimmt. Der wiederum kommt dem Kontext des HTML-Elements gleich, dem man den Controller mit Hilfe der ng- controller-Direktive zuweist:
<div ng-controller="AppController"></div>
function AppController($scope) {
// ...
}
Die Verbindung zwischen dem $scope-Parameter und dem zugehörigen div-Element wird deutlich, sobald man im Controller eine Eigenschaft hinterlegt und sie in HTML auswertet:
<div ng-controller="AppController">{{greeting}}</div>
function AppController($scope) {
$scope.greeting = 'Hello world!';
}
