Seite 5: Resümee

Inhaltsverzeichnis

Verwalten von Routen und Ansichten

In Single-Page-Anwendung ist das Verwalten von Routen und Ansichten besonders wichtig. AngularJS unterstützt dies mit Services und Direktiven, von denen die wichtigste ng-view ist. Sie definiert einen Platzhalter, in den AngularJS abhängig von der angesteuerten Route die gewünschte Ansicht lädt:

<div ng-view>
</div>
 

Die Konfiguration der Routen erfolgt beim Start der Webanwendung über deren config-Funktion, die dafür auf den $routeProvider-Service zurückgreift:

app.config([  '$routeProvider', function ($routeProvider) {
  $routeProvider.
    when('/articles', {
      templateUrl: 'articlesView.html',
      controller: ArticlesController
    }).
    when('/articles/:id', {
      templateUrl: 'articleDetailsView.html',
      controller: ArticleDetailsController
    }).
    otherwise({ redirectTo: '/articles' });
}]);

So praktisch und komfortabel das auf den ersten Blick in der Theorie erscheint, so ernüchternd ist die Praxis. Die ng-view-Direktive weist nämlich gleich zwei gravierende Nachteile auf:

• Erstens lassen sich nicht mehrere ng-view-Direktiven in eine Ansicht integrieren. Damit ist es nicht möglich, mehrere unabhängige Bereiche in Abhängigkeit einer Route auszutauschen.
• Zweitens kann man die Direktive nicht verschachteln, sodass es keine Option gibt, komplexe Ansichten zu erstellen, die sich ihrerseits aus untergeordneten Ansichten zusammensetzen.

Die ng-include-Direktive ist hierbei nur ein schwacher Trost, da sie lediglich eine andere Ansicht statisch einbettet, aber nicht an die Routenverwaltung gekoppelt ist.

Einen Ausweg stellt die zusätzliche Komponente UI-Router dar, die im Rahmen des AngularUI-Projekts entwickelt wird. Sie ersetzt die Verwaltung von Routen und Ansichten durch einen eigenen Ansatz, bietet dafür aber die gewünschte Flexibilität und eignet sich daher auch für komplexere Anwendungen.

Der größte Haken der Komponente ist die zumindest anfangs etwas ungewohnte Konfiguration, um die man sich allerdings nur ein einziges Mal kümmern muss. Da sie stets auf dem gleichen Weg erfolgt, lässt sie sich anschließend für jedes weitere Projekt kopieren und in puncto Routen und Ansichten entsprechend anpassen.

Stärken und Schwächen

Sieht man von der etwas schwachen Routenverwaltung ab, gibt es an AngularJS wenig auszusetzen. Der Einstieg gelingt vergleichsweise schnell, sodass sich auch Einsteiger zügig zurechtfinden. Der integrierte DI-Container trägt enorm dazu bei, dass man den Code von vornherein sauber strukturiert und Funktionen in Controller, Services und Direktiven zerlegt, was beim Wiederverwenden in anderen Projekten hilft.

Ein wenig gewöhnungsbedürftig ist zu Beginn die $apply-Funktion, mit der man sich einige Male auseinandersetzen muss, bis man verstanden hat, wann man sie braucht und wann nicht. Ähnliches gilt für das Schreiben von Direktiven, da hier relativ viel Code erforderlich ist, der zumindest einen Anfänger zunächst überfordert. Allerdings gibt es zu diesem Thema zahlreiche gute Tutorials.

Abgesehen davon ist allerdings deutlich weniger Code zu schreiben als bei Backbone.js, man erhält eine deutlich übersichtlichere Struktur, kann weitgehend auf Bibliotheken von Drittanbietern wie jQuery verzichten und kommt schnell voran.

Der eingebaute $http-Service bietet darüber hinaus nützliche Hilfsmittel. Für REST-basierte Webdienste ist dennoch eine zusätzliche Komponente wie Restangular empfehlenswert, da sie dem Entwickler viel Arbeit abnimmt. Gleiches gilt für den UI-Router, den man in jedes Projekt integrieren sollte: Der geringe zusätzliche Aufwand macht sich spätestens dann bezahlt, wenn die Ansichten komplexer werden.

Fazit

Mehr Infos

MVC- und MVVM-Framework für JavaScript im Vergleich

Der vorliegende Artikel ist der dritte Teil einer Serie, in der verschiedene JavaScript-MV*-Frameworks vorgestellt werden. In der nächsten Folge geht es um ein weiteres noch junges Framework, das gerade erst in Version 1.0 erschienen ist: Ember.js.

AngularJS nimmt viele zukünftige Konzepte von HTML vorweg: Der Fokus auf das Erzeugen eigener HTML-Elemente und -Attribute, die deklarative Entwicklung und das Verwenden isolierter Kontexte entspricht ungefähr der Idee der Web Components und des Shadow DOM, wenn auch mit einigen Abstrichen.

Im direkten Vergleich zu Knockout und Backbone.js kann AngularJS in nahezu jeglicher Hinsicht glänzen: Letztlich verheiratet es die besten Ideen aus beiden Welten und stattet sie mit einem äußerst leistungsfähigen, skalierbaren und zeitgemäßen Unterbau aus. AngularJS eignet sich für kleine und große Webanwendungen gleichermaßen, weshalb es kaum einen Grund gibt, auf seinen Einsatz zu verzichten.

Golo Roden
ist Gründer und Geschäftsführer der "the native web UG", eines auf native Webtechniken spezialisierten Unternehmens. Für die Entwicklung moderner Webanwendungen bevorzugt er JavaScript und Node.js und hat mit "Node.js & Co." das erste deutschsprachige Buch zum Thema geschrieben. (jul)