Warum AngularJS auch für Java-Entwickler interessant ist

Direktiven

Schauen wir uns zum Schluss noch ganz kurz die bereits mehrfach erwähnten Direktiven an. Direktiven können in AngularJS für zwei Arten von Aufgaben verwendet werden: UI-Komponenten und DOM-Manipulationen. Ein einfaches Beispiel für beide Aufgaben sehen wir in Listing 4 und Listing 5. Zwar wird wohl niemand den blink-Tag aus den frühen Zeiten von HTML ernsthaft vermissen, zumal man Text auch per CSS blinken lassen kann. Dennoch wollen wir blink nachbauen, um zu zeigen, wie unsere Direktive jegliche DOM-Manipulation kapselt und wir HTML an unsere Bedürfnisse anpassen können. Blinkender Text ist gedruckt schwierig zu präsentieren, das Beispiel ist aber unter [6] live zu bewundern.

Listing 4
  

This is a paragraph with a blinking text inside.

Listing 5
angular.module('app', [])
.directive('blink', function($timeout) {
  return {
    restrict: 'E',
    replace: true,
    transclude: true,
    template: '',
    link: function(scope, element, attrs) {
      var speed = 1000;
      if (attrs.speed !== undefined) {
        var speedAttr = parseInt(attrs.speed, 10);
        if (angular.isNumber(speedAttr)) {
          speed = speedAttr; 
        }
      }
      
      $timeout(hide, speed);
      
      function show() {
        element.css("visibility", "visible");
        $timeout(hide, speed);
      }
      
      function hide() {
        element.css("visibility", "hidden");
        $timeout(show, speed);
      }
    }
  };
});

Wie in Listing 4, Zeile 2 zu sehen, stellt unsere Direktive einen Tag bereit. Dafür registrieren wir sie in Listing 5, Zeile 2 mit dem Tag-Namen an unserem Modul. Damit die Direktive als Tag verwendet werden kann, geben wir in Zeile 4 ein E (wie Element) an. Die Property replace sorgt dafür, dass unser Template den blink-Tag ersetzt. transclude und ng-transclude im Template sorgen dafür, dass der Inhalt des blink-Tag in das Template übernommen werden. In unserer Link-Funktion lesen wir zunächst das speed-Attribut aus (Zeile 9-15). Anschließend werden per $timeout zwei Funktionen zum Ein- bzw. Ausblenden abwechselnd aufgerufen. Fertig ist unser blink-Tag!

Abb. 2: einfache Tabs mit eigener Direktive

Ein sinnvolleres, aber für diesen Artikel leider zu langes Beispiel einer Direktive ist in Abbildung 2 zu sehen. Bootstrap verwendet mehrere geschachtelte div-Tags mit bestimmten CSS-Klassen, um Tabs und deren Titel und Inhalt zu beschreiben. Das ist nicht nur schwierig zu merken, sondern auch unleserlich. Einfacher wäre es doch, wenn wir unsere Tabs wie in Listing 6 beschreiben könnten. Mit AngularJS und einer passenden Direktive ist das kein Problem.

Listing 6

    Just some conntent
  
    Some other content
  
Fazit

Die im ersten Teil des Artikels aufgeführten Nachteile von GWT und JSF sind natürlich kein Grund, gleich alles über Bord zu werfen und mit AngularJS neu umzusetzen. Angular bringt aber viele, gerade im Java-Bereich etablierte Konzepte in den Browser und stellt somit einen Funktionsumfang bereit, mit dem sich erstaunlich schnell auch komplexere Frontends entwickeln lassen. Somit stellt es gerade für neue Projekte eine ernstzunehmende Alternative dar.

Da Angular nur den mit ng-app markierten Bereich verarbeitet, lässt es sich aber auch sehr gut mit anderen Bibliotheken kombinieren und sehr gezielt in ältere Webanwendungen einbauen. Bei der WeigleWilczek GmbH setzen wir AngularJS beispielsweise erfolgreich in einer recht alten JSP-/Struts-Anwendung ein.

In diesem Artikel konnte ich von den Konzepten und Möglichkeiten, die AngularJS bietet, natürlich nur einen Bruchteil vorstellen. Wessen Interesse ich damit wecken konnte, dem sei die AngularJS-Website [3] empfohlen, die eine sehr gute Dokumentation mit vielen direkt ausführbaren Beispielen enthält.

Philipp Burgmer arbeitet bei der WeigleWilczek GmbH im Bereich Software Development. Er beschäftigt sich überwiegend mit modernen Webanwendungen, neuen Frameworks wie AngularJS und User Interfaces im Allgemeinen.
Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.