Zur Entwicklung schnell reagierender, dynamischer Web-Frontends kommen in aller Regel JavaScript und Ajax zum Einsatz. Wer dabei auf Googles Open Source Framework AngularJS setzt, kann reaktionsschnelle Frontends erzeugen und gleichzeitig seinen JavaScript und HTML Code bestens organisieren. Da auch wir bei doubleSlash AngularJS bereits in mehreren Projekten für unterschiedliche Kunden einsetzen, möchten wir es in diesem Beitrag einmal vorstellen.

AngularJS ist ein client-seitiges Java Script Framework von Google Inc. zur Erstellung dynamischer, schnell reagierender Webseiten. Im Vergleich zu backend-seitigen Frameworks wie z.B. PHP oder Java Server Faces konzentriert sich Angular rein auf das Erstellen von Frontend-Applikationen mit Browsertechnologien (HTML und JavaScript).

AngularJS: Schnelle Aktualisierung von Seiteninhalten

Besonders effektiv ist der Einsatz von AngularJS bei sogenannten Single-Page-Webanwendungen. Diese bestehen entsprechend ihrem Namen aus einer einzelnen Webseite, deren Inhalte (oder Teile davon) dynamisch ausgetauscht bzw. nachgeladen werden. Während bei einem klassischen Page-Refresh ganze Seiten inklusive referenzierter Dateien (z.B. CSS- und JavaScript-Dateien) vom Webserver angefordert und nachgeladen werden, führt Angular einen responsive Page-Refresh durch. Dieser fordert nur die benötigten Daten zur Aktualisierung der Seite an und fügt diese in die bereits angezeigte Seite ein.

Die folgende Grafik veranschaulicht wie ein solcher responsive Page Refresh mit Angular nach Klick auf einen Link aussehen kann:

Für das Laden der Seite wird zunächst ein ganz normaler Page-Request ausgeführt, welcher die Seite inklusive aller Referenzen lädt. Nachdem der Benutzer auf einen Link klickt, führt Angular einen responsive Page-Request an den Webserver aus. Dieser verarbeitet die Anfrage und antwortet mit den erforderlichen Änderungen der Anzeige in Form von JSON-Daten. Angular fügt diese Änderungen in die bestehende Seite ein.

Organisation von Code und Modularisierung

Angular setzt das MVVM-Muster (Model View ViewModel) ein, um Präsentation und Logik einer Applikation sauber zu trennen. UI-Design und Entwicklung der UI-/Geschäftslogik einer Applikation können so getrennt voneinander umgesetzt werden.
Für eine bestimmte Ansicht innerhalb einer Webseite (eine sogenannte View) wird ein ViewModel mit zugehöriger benötigter Logik in einem Controller definiert. Ein Controller bestimmt so das Verhalten der Applikation durch Funktionen und Werte. Ein oder mehrere Controller werden zu einem Modul zusammengefasst, das in aller Regel genau eine bestimmte Funktion der Gesamtapplikation übernimmt. Das Organisieren einer Anwendung in einzelnen Modulen macht den Code lesbarer, wartbarer und testbarer. Module können voneinander abhängig sein und so Funktionalitäten anderer Module nutzen.

Die Einbinden der Module in die Applikation sowie das Auflösungen von Abhängigkeiten der Module untereinander erfolgt durch Dependency Injection. Angular bringt hierfür einen integrierten Dependency Injection Container mit, welcher diese Aufgabe übernimmt.

Verbinden von Model und View

Das Verbinden der Controller inklusive ihrer Attribute und Funktionen mit den Inhalten der HTML-Dateien erfolgt mittels Direktiven. Direktiven sind HTML-Elemente oder -Attribute, die Angular zum Ausführen oder Referenzieren von JavaScript-Code anweisen. Angular definiert hierbei eine ganze Reihe von Built-In Direktiven vor, die durch den ng-Namensraum erkennbar sind. Diese werden als Attribute zu HTML-Tags hinzugefügt, um ein gewünschtes Verhalten des jeweiligen Elements herbeizuführen (z.B. ng-show, ng-hide zum Ein-/Ausblenden eines Elements).

Durch Expressions können dynamische Werte in HTML eingefügt werden. Expressions ermöglichen u.a. das Ausführen von String- oder numerischen Operationen, sowie das ausgeben der Werte von Eigenschaften eines Controllers.

Die folgenden beiden Beispieldateien zeigen, wie eine einfache AngularJS App aussehen kann:

< !DOCTYPE html>

  
	
	
  
  
    

        
{{blogCtrl.article.title}}
        
{{blogCtrl.article.content}}
    
  

index.html

// Modul 'blog' definieren
var app = angular.module('blog', []);

// Controller 'BlogController' zum Modul 'blog' hinzufügen
app.controller('BlogController', function() {
   this.article = {
      title: 'Effektive JavaScript-Frontends mit AngularJS',
      content: 'AngularJS ist ein client-seitiges Java Script Framework...'
   };
});

app.js

In der Datei app.js wird ein Modul mit dem Namen blog definiert und diesem ein Controller mit dem Namen BlogController hinzugefügt. Dieser Controller verfügt über das Attribut article, welches einen Blogbeitrag als JSON-Daten beinhaltet. In der Datei index.html wird das Modul mittels der Direktive ng-app geladen. Mit der Direktive ng-controller wird der BlogController dem Gültigkeitsbereich des Div-Elements zugewiesen. Innerhalb dieses werden die Daten des Attributs article dann über Expressions ausgegeben.

Templates und benutzerdefinierte Direktiven

Für einen übersichtlichen Aufbau von HTML-Code und das Wiederverwenden bestimmter Views oder Bausteine bietet Angular gleich mehrere Möglichkeiten an. Mit der vordefinierten Direktive ng-include können HTML-Snippets (HTML-Dateien mit Code-Teilen) als Inhalt eines Elements in die Hauptseite oder ein anderes HTML-Snippet eingefügt werden. Als weitere Option ermöglicht Angular das Erzeugen benutzerdefinierter Direktiven, also eigener HTML-Elemente oder -Attribute. Diese können (falls benötigt) Controller-Logik beinhalten und referenzieren ein HTML-Snippet als Template für ihre Darstellung.

Das Verwenden benutzerdefinierter Direktiven in AngularJS hat aber auch noch einen weiteren Vorteil: Es ermöglicht das Schreiben von HTML, welches das Verhalten der Applikation ausdrückt und macht den Code dadurch gut lesbar.