© saicle/Shutterstock.com
Mit AngularJS-Modulen Problemstellungen bei der Entwicklung von Webapplikationen lösen

Ein Modul für alle Fälle


AngularJS ist momentan eines der populärsten JavaScript-Frameworks, wenn es darum geht, umfangreiche Webapplikationen zu erstellen. Und genau da fangen die Probleme an. AngularJS ist lediglich das Basisframework und bietet Ihnen eine Reihe von Hilfsmitteln. Dies geht allerdings nur begrenzt weit, denn das Framework stellt keine Universallösung für sämtliche Probleme dar. Allerdings können einige dieser Schwierigkeiten mit verschiedenen AngularJS-Modulen bearbeitet werden.

Video: Interview mit Phil Tarasiewicz

AngularJS sieht einen modularen Aufbau von Applikationen vor, sodass es ein Leichtes ist, wiederverwendbare Komponenten zu erstellen. So hat sich um das Framework eine rege Community gebildet, die sehr aktiv an der Entwicklung verschiedenster Erweiterungen arbeitet. Im Zuge dieses Artikels möchte ich Ihnen einige der häufigsten Problemstellungen bei der Entwicklung von Webapplikationen und die dazu passenden AngularJS-Module vorstellen.

Einbindung von Modulen

Die Vorgehensweise bei der Einbindung externer Module ist stets – bis auf einige modulspezifische Besonderheiten – die gleiche. Zunächst müssen Sie sich das Modul herunterladen. Diese Aufgabe können Sie sich vereinfachen, wenn Sie den Paketmanager Bower [1] verwenden, dessen Installation und Verwendung in der Dokumentation des Werkzeugs detailliert beschrieben wird. Haben Sie Bower installiert, müssen Sie nur noch den Namen des zu installierenden Pakets kennen. Das Herunterladen und Speichern übernimmt dann Bower für Sie. Ein weiterer Dienst, den Ihnen Bower bietet, ist die Auflösung von Abhängigkeiten. Wird beispielsweise für ein bestimmtes Modul die jQuery-Bibliothek benötigt, sorgt Bower dafür, dass diese ebenfalls heruntergeladen wird. Egal, ob Sie die AngularJS-Module mit oder ohne Bower installieren, wichtig ist nur, dass die erforderlichen Dateien auf Ihrem Server verfügbar sind.

Nachdem Sie die Dateien heruntergeladen und in Ihrer Applikation gespeichert haben, müssen Sie die Dateien mittels eines script-Tags in Ihre Seite einbinden. Wächst Ihre Applikation und strukturieren Sie sie über mehrere Dateien hinweg, benötigen Sie sehr viele script-Tags, was früher oder später unübersichtlich werden kann. Hinzu kommt, dass in manchen Fällen die Reihenfolge der script-Tags eine Rolle spielt. So muss AngularJS geladen sein, bevor Sie ein AngularJS-Modul einbinden. Ein Hilfsmittel, das Sie bei diesen Problemen unterstützt, ist RequireJS [2]. Diese kleine Bibliothek bietet Ihnen einen Modul-Loader, der sich darum kümmert, alle benötigten Dateien zu laden und Abhängigkeiten unter den Dateien aufzulösen. Als Bonus erhalten Sie außerdem noch einen Optimizer, der Ihre JavaScript-Applikation und sämtliche Bibliotheken zu einer einzigen Datei zusammenfasst, diese optimiert und sämtliche unnötigen Zeichen entfernt. Auch hier gilt: RequireJS wird nicht zwingend benötigt, wenn Sie Applikationen mit AngularJS bauen, es erleichtert Ihnen lediglich die Arbeit.

Die meisten AngularJS-Module werden durch einen Aufruf von angular.module erstellt. Das bedeutet, dass Sie das Modul ganz einfach einbinden können, indem Sie seinen Namen bei Ihrer eigenen Moduldefinition angeben. Trägt Ihre Applikation beispielsweise den Namen app und Sie möchten den AngularUI Router einbinden, führt das zu folgendem Aufruf: angular.module('app', ['ui.router']);.

Nach Abschluss dieser Schritte können Sie das Modul verwenden. Damit sind wir bei der ersten Aufgabenstellung angelangt: Wie können Sie aus einer AngularJS-Applikation heraus mit einem Server kommunizieren?

REST-Kommunikation zum Server

AngularJS bietet Ihnen einen Service mit dem Namen $http. Dieser dient zur asynchronen Kommunikation mit dem Server. Den $http-Service können Sie sich als eine Abstraktion des XMLHttpRequest-Objekts vorstellen, mit dem Sie HTTP-Aufrufe an Ihr Backend absetzen können. Dieser Service hat zwei Gründe. Zum einen bietet er Ihnen eine angenehme und einheitliche Schnittstelle, zum anderen können Sie ihn zu Testzwecken ganz einfach austauschen und benötigen so kein umfangreiches Serversystem zum Testen. Die meisten modernen Webapplikationen nutzen jedoch nicht nur die Methoden GET und POST, sondern versuchen, per REST mit dem Server zu sprechen. Ob es sich bei dieser Kommunikation um wirkliches REST wie aus dem Lehrbuch oder eine Abwandlung davon handelt, führt zwar oft zu leidenschaftlichen Diskussionen, hat allerdings wenig Auswirkungen auf den Einsatz der hier vorgestellten Module.

Wie so oft in der Webentwicklung gibt es nicht nur einen Weg zum Ziel. So ist es auch hier. In der AngularJS-Community gibt es zwei populäre Module für die REST-Kommunikation mit dem Server: ngResource und Restangular.

ngResource: Das ngResource-Modul [3] wird von den Entwicklern von AngularJS selbst entwickelt, ist allerdings dennoch ein eigenständiges Modul, das Sie separat einbinden müssen. Installiert wird es mit Bower über den Befehl bower install angular-resource; anschließend binden Sie es in Ihr Modul über den Namen ngResource ein.

Den Kern von ngResource bildet ein Service, den Sie Ihren Anforderungen entsprechend konfigurieren können. Sie können ngResource entweder direkt verwenden oder eigene Services für Ihre Ressourcen definieren, die dann die gesamte Konfiguration enthalten. Generell ist es empfehlenswert, Ressourcen in eigenen Dateien zu verwalten.

Der von ngResource zur Verfügung gestellte Service akzeptiert folgende vier Parameter, von denen allerdings nur der erste zwingend erforderlich ist:

  • url: Dies ist der URL, der auf dem Server angesprochen werden soll. Platzhalter im URL werden durch einen vorangestellten Doppelpunkt gekennzeichnet, z. B. / user/:userId.

  • paramDefaults: Dieses Objekt dient zur Befüllung der Platzhalter im URL. Wird dem Wert ein @-Zeichen vorangestellt, wird er direkt aus dem später übergebenen Objekt genommen. Ansonsten werden einfach die Platzhalter durch die entsprechenden Werte des Objekts ersetzt beziehungsweise übrige Werte als Query-String an den URL angehängt.

  • actions: Mit diesem Objekt werden die verfügbaren Methoden des resultierenden Ressourcenobjekts konfiguriert. Die Standardmethoden sind: get, save, query, remove und delete. Geben Sie hier ein Objekt an, werden die Standardmethoden überschrieben. Sie können hier unter anderem die HTTP-Methode angeben und ob es sich bei der Antwort des Servers um ein Array oder ein einzelnes Objekt handelt.

  • options: Mit diesem Objekt können die Schrägstriche am Ende der Anfrage automatisch entfernt werden.

Haben Sie die Ressource konfiguriert, können Sie auf dem resultierenden Objekt die verschiedenen Methoden aufrufen.

Listing 1: Beispiel von ngResource

angular.module('todo.resource', ['ngResource']) .factory('todoResource', todoResource); todoResource.$inject = ['$resource']; function todoResource($resource) { return $resource( '/todo/:id', {id: '@id'}, { findOne: {method: 'GET', isArray: true}, findAll: {method: 'GET', isArray: true}, create: {method: 'POST'}, update: {method: 'PUT'}, remove: {method: 'DELETE'} } ); }

Wie bereits erwähnt, ist ngResource nicht die einzige Lösung für dieses Problem. Das Modul Restangular versucht, einige Nachteile von ngResource zu umgehen und stellt aus diesem Grund eine ernstzunehmende Alternative dar.

Restangular: Die Installation von Restangular [4] ist ähnlich einfach wie die von...

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