JavaScript für den Enterprise-Einsatz

Testgetriebene Entwicklung mit AngularJS


Kaum eine Konferenz oder Fachzeitschrift hat sich des Themas AngularJS noch nicht angenommen. Auch diverse Schulungs- und Projektanfragen bestätigen: AngularJS ist in Deutschland angekommen. Und das nicht zu Unrecht ...

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 in hohem Maße auf das Einhalten und Bilden von Schnittstellen.

In den beiden vorangegangenen Ausgaben haben wir bereits ein AngularJS-Projekt mit dem Namen Cube angelegt. Cube ist eine einfache Anwendung zur Visualisierung eines dreidimensionalen Würfels, bei dem wir den X-, Y- und Z-Rotationsgrad steuern können. In der vorherigen Ausgabe haben wir das Projekt so erweitert, dass Würfel nun auch dynamisch erstellt und wieder gelöscht werden können. Außerdem gibt es die Möglichkeit, die sechs Seiten eines Würfels mit thematischen Hintergrundbildern auszustatten (Abb. 1). Wir haben uns dafür entschieden, diese Bilder über das Flickr-API zu beziehen. Aus der technischen Perspektive betrachtet, haben wir uns also bereits die folgenden AngularJS-Konzepte angesehen: Zwei-Wege-Datenbindung, Templates, Scopes, Controller, Direktiven und Services.

In dieser Ausgabe wollen wir in erster Linie anschneiden, welche Möglichkeiten uns das Framework bietet, um testgetrieben entwickeln zu können. In AngularJS wird das Thema der Testbarkeit nämlich ganz groß geschrieben. Der Frameworkcode selbst zeigt eine außerordentlich hohe Testabdeckung auf, und auch alle Anwendungskomponenten wurden so konzipiert, dass wir sie sehr gut testen können. Die Ausrede, dass clientseitige Webanwendungen schwierig zu testen seien, greift also nicht mehr.

Bevor wir uns an das Testthema wagen, wollen wir unsere Cube-Anwendung zunächst jedoch noch um zwei Aspekte erweitern. Dazu werden wir im ersten Schritt unseren flickr-Service mithilfe eines Serviceproviders definieren und den Service somit konfigurierbar machen. Außerdem werden wir Routen einbauen, um zu zeigen, wie wir aus einer AngularJS-Anwendung eine vollwertige Single-Page-Applikation machen können.

tarasiewicz_1.tif_fmt1.jpgAbb. 1: Stand des Cube-Projekts aus dem zweiten Teil

Serviceprovider und Konfiguration

In der vorangegangenen Ausgabe haben wir den flickr-Service implementiert, der die ...

Neugierig geworden?

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