© DrHitch/Shutterstock.com
Moderne Webanwendungen mit AngularJS

1 Erstellung einer Projektstruktur


AngularJS ist ein JavaScript-Framework für die Entwicklung von modernen clientseitigen Webanwendungen. Erstmalig halten bewährte Konzepte wie Dependency Injection und konsequente testgetriebene Entwicklung Einzug in die JavaScript-Welt und machen diese somit attraktiv für den Enterprise-Einsatz. Das Framework bietet hier einige sehr intuitive APIs und achtet im hohen Maße auf das Einhalten und Bilden von Schnittstellen.

In diesem shortcut wollen wir Sie an die Entwicklung mit AngularJS heranführen und Ihnen einen Teil der Tool-Chain vorstellen, die sich um das Framework gebildet hat, um den Entwicklungsprozess zu vereinfachen. Insbesondere werden wir Ihnen zeigen, wie Sie sich mithilfe der Zwei-Wege-Datenbindung (Two-Way Data Binding) große Teile von Boilerplate-Code sparen können. Außerdem stellen wir Ihnen das Konzept der Direktiven vor. Damit sind Sie in der Lage, HTML um eigene Elemente und Attribute zu erweitern, um auf diese Weise wiederverwendbare UI-Komponenten und Anwendungsbausteine zu erstellen.

Das Cube-Projekt

Um die soeben erwähnten Konzepte an einem praktischen Beispiel zu erklären, werden wir mit AngularJS ein kleines Projekt entwickeln. Wir haben diesem Projekt den Namen Cube verpasst. Cube ist eine einfache Anwendung zur Visualisierung eines dreidimensionalen Würfels, bei dem wir den X-, Y- und Z-Rotationsgrad steuern können. Ein Kern;aspekt der Anwendung wird also sein, das entsprechende <cube>-HTML-Tag zu definieren, hinter dem sich die Logik und die Darstellung eines Würfels verbergen.

Tool-Chain für das Beispiel

In einer der nächsten Ausgaben werden wir für das Beispiel einige Tests schreiben. Dazu benötigen wir Karma, eine Testausführungsumgebung für JavaScript-Anwendungen. Karma benötigt Node.js als Laufzeitumgebung. Der Node.js-Installer kann unter [1] für alle gängigen Plattformen heruntergeladen werden. Nachdem wir Node.js installiert haben, können wir Karma mit dem folgenden Konsolenbefehl installieren:

npm install -g karma

Das Beispiel erfordert darüber hinaus, dass wir die Applikation mithilfe eines Webservers ausliefern. Wer noch keinen lokalen Webserver installiert hat, kann sich mit dem folgenden Befehl das http-server-Modul für Node.js installieren:

npm install -g http-server

Mit dem Befehl http-server kann nun in jedem Verzeichnis ein HTTP-Server gestartet werden, der standardmäßig über Port 8080 das aktuelle Verzeichnis ausliefert.

Die Projektstruktur

Zunächst wollen wir allerdings klein anfangen, indem wir die grundlegende Projektstruktur erstellen und AngularJS einbinden. Dazu erstellen wir für unser Projekt ein Hauptverzeichnis mit dem Namen cube. In diesem Verzeichnis legen wir zwei Unterverzeichnisse app und test an. Wie wir hier an dem test-Verzeichnis erkennen können, wollen wir hinterher für unsere Anwendung auch Testfälle schreiben. An dieser Stelle machen wir jedoch zunächst weiter, indem wir in dem app-Verzeichnis die Datei index.html erstellen. Diese Datei dient als Einstiegspunkt in unsere Applikation.

Wir beginnen damit, in der index.html eine simple HTML-Struktur aufzubauen und AngularJS einzubinden (Listing 1.1). Die verschiedenen Versionen der Frameworks können wir auf [2] herunterladen. Für unser Beispiel nutzen wir AngularJS in Version 1.2.4. Die entsprechende Datei, die wir benötigen, um das Framework in unserer Anwendung verfügbar zu machen, heißt angular.js, und wir können sie unter [3] herunterladen. Wie in Listing 1.1 durch das <script>-Tag angedeutet ist, erwartet unsere Anwendung, dass sich das Framework in dem Verzeichnis lib/angular/ befindet. Somit müssen wir in dem app-Verzeichnis noch das Verzeichnis mit dem Namen lib erstellen und in diesem das angular-Verzeichnis anlegen. In Letzteres kopieren wir schließlich die Datei angular.js. Damit wären wir mit dem Aufsetzen der Projektstruktur auch schon fertig.

<!DOCTYPE html>
<html ng-app>
<head>
<title>Cube</title>
</head>
<body>
<input type="text" ng-model="text"/>
<p>Hello {{ text }}!</p>

<script src="lib/angular/angular.js"></script>
</body>
</html>

Listing 1.1

Hello AngularJS!

In Listing 1.1 sehen wir bereits eine einfache AngularJS-Anwendung. Der ausschlaggebende Faktor dafür, dass das Framework in diesem Dokument eine AngularJS-Anwendung findet, ist das ng-app-Attribut, mit dem wir das <html>-Element annotieren. Was auf den ersten Blick aussieht wie ein unbekanntes HTML-Attribut, ist in der Welt von AngularJS eine so genannte Direktive. Mithilfe der ngApp-Direktive zeichnen wir aus, in welchem Abschnitt des DOMs (Document Object Model) unsere Anwendung „werkeln“ soll. Dadurch, dass wir hier das <html>-Element mit dieser Direktive ausgezeichnet haben, definieren wir, dass das komplette DOM Teil unserer Anwendung sein soll. Somit ist es logisch, dass wir auch problemlos mehrere AngularJS-Anwendungen in einem HTML-Dokument definieren können. Das beste Beispiel dafür ist die offizielle Webseite von AngularJS [4]. Dort wurde für jedes Beispiel eine eigene Anwendung mithilfe der ngApp-Direktive definiert.

Als Nächstes schauen wir uns das <input>- und <p>-Element an. Das <input>-Eingabefeld ist mit einer weiteren Direktive annotiert: der ngModel-Direktive. Diese sorgt dafür, dass zwischen dem Eingabefeld und der Variable text eine Zwei-Wege-Datenbindung hergestellt wird. Somit wird bei jeder Änderung des Eingabewerts automatisch der Wert der Variable text entsprechend angepasst. Der Begriff lässt bereits vermuten, dass diese automatische Synchronisierung auch in die Gegenrichtung funktioniert („Zwei-Wege-“). Das bedeutet, dass AngularJS ebenfalls den Wert im Eingabefeld automatisch anpasst, wenn sich der Wert der Variable text verändert. Aber warum ist das wichtig?

Die Antwort finden wir in dem <p>-Element. Der Ausdruck in den doppelten geschweiften Klammern ({{ text }}) ist eine so genannte Expression und sorgt dafür, dass der Wert der Variable text an dieser Stelle ausgegeben wird. Dadurch, dass Expressions ebenfalls Teil des Zyklus der Zwei-Wege-Datenbindung sind, wird AngularJS dort auch jeweils den aktuellen Wert der Variable einsetzen.

Das heißt, dass sich die Ausgabe („Hello {{ text }}!“) immer automatisch der Eingabe anpasst. Wenn wir das Beispiel im Browser ausführen (Abb. 1.1), können wir im Feld einige Eingaben tätigen. Wenn wir keinen Fehler gemacht haben, werden wir dabei feststellen, dass die automatische Aktualisierung tatsächlich funktioniert. Der geneigte Leser sei an dieser Stelle aufgefordert, sich einmal vorzustellen, was man alles anstellen müsste, um das äquivalente Beispiel in reinem JavaScript zu implementieren.

tarasiewicz_1.png

Abb. 1.1: Einfache Zwei-Wege-Datenbindung mit AngularJS

Scopes

Es verbleibt die Frage, wo genau die Variable text denn nun definiert wird. Doch nicht etwa in dem globalen Java...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang