Restangular und RequireJS

Restangular ist eine Library, die uns in AngularJS weitere Funktionalitäten zur Kommunikation mit dem Server zur Verfügung stellt. Diese Kommunikation findet über eine REST Schnittstelle statt. Aufgrund der nicht vorhandenen AMD Konfiguration von Restangular ist es allerdings gar nicht so einfach, RequireJS in diese Gleichung miteinzubeziehen.

In diesem Artikel stelle ich daher eine Beispielkonfiguration zur Verfügung, die das Verwalten von Abhängigkeiten mit RequireJS und gleichzeitig die Verwendung von AngularJS mit Restangular ermöglicht.

Das Problem mit Restangular

Das Problem an unserer Anwendung ist die Tatsache, dass weder Restangular noch AngularJS die AMD (Asynchronous Module Definition) implementieren. RequireJS lädt Module nach dieser Definition und hat daher Probleme mit unseren zwei Bibliotheken. Außerdem müssen wir RequireJS in der Konfiguration noch mitteilen, dass AngularJS und Underscore.js zuerst geladen werden, da Restangular von beiden abhängig ist.

 

Die shim Konfiguration

Über die config Methode des requirejs Objekts können wir unsere Applikation konfigurieren. Ein wichtiger Parameter ist dabei das shim Objekt – in diesem können wir nämlich AMD-lose Module konfigurieren, die wir laden möchten. Nur dafür sollte diese Konfiguration verwendet werden, mit normalen Modulen können hier Fehler entstehen.
Sehen wir uns also die Konfiguration für unsere Beispielapplikation an – für unser Beispiel in der Datei main.js.

Zuerst legen wir die baseUrl fest, das ist der Unterordner in dem sich unsere JavaScript Dateien befinden und in dem RequireJS danach suchen soll.

Die paths sind sozusagen Abkürzungen. Kommen diese in einer Abhängigkeit vor werden die hier angegebenen Pfade (die direkt zu unseren Libraries in libs/angular.js, libs/underscore.js und libs/restangular.js führen) gesucht.

Nun zum interessanten Teil – die shim Konfiguration. Jeder Key, den wir in dieses Objekt einfügen, entspricht einem Modul das geladen werden soll.
Sehen wir uns die beiden Optionen an.

  • deps steht für dependencies. Das Laden des Moduls beginnt erst, wenn alle Abhängigkeiten geladen wurden. Dadurch können wir sicherstellen, dass sowohl AngularJS als auch Underscore.js zur Verfügung stehen, sobald Restangular geladen ist. Alles andere würde zu einem Fehler führen
  • exports steht für den Namen unter dem das geladene Modul innerhalb unserer RequireJS Umgebung zur Verfügung stehen wird

Außerdem ist noch der Part in der RequireJS Main Funktion interessant, wo wir unsere AngularJS Anwendung bootstrappen. Dies ist manuell nötig, da durch den asynchronen Ladeprozess ein automatisches Bootstrapping mit der ng-app Direktive zu Problemen führen kann.

 

 

Unsere testApp in AngularJS

Der nächste Schritt ist, unsere Testapplikation zu initialisieren. Diese haben wir oben im MainScript schon als Abhängigkeit angegeben, und zwar in der Datei testapp.js.

Wir definieren hier drei Abhängigkeiten die automatisch geladen werden. Immer, wenn dieses Modul geladen wird, muss gewährleistet sein, dass sowohl AngularJS als auch Restangular bereits geladen sind. Außerdem initialisieren wir noch einen TestController, in dem wir Restangular später verwenden werden. Weitere Controller können natürlich problemlos im Array und den Parametern hinzugefügt werden.

Im AngularJS Modul geben wir Restangular als Dependency an. Dadurch machen wir das Modul der AngularJS Dependency Injection bekannt. RequireJS hat sich also um das Laden der Datei und des Moduls und das Bekanntmachen gekümmert, AngularJS kümmert sich nun darum, dass Controller und Services Zugriff darauf bekommen.

 

Der TestController mit Restangular

Da Restangular nun in AngularJS bekannt ist können wir es über die normale Dependency Injection in Controller injecten.

Hier geschieht nicht viel Überraschendes wenn man sich bereits mit AngularJS auskennt. Wir definieren eine Konstruktorfunktion TestController, die Beispieldaten über Restangular lädt und diese in eine $scope Variable messages lädt.

Über das $inject Objekt geben wir die AngularJS Abhängigkeiten für unseren Controller an. Da wir Restangular bereits oben bekannt gemacht haben ist das hier kein Problem.

 

 

Eine Prise HTML

Um unsere Beispielapplikation abzuschließen benötigen wir natürlich auch noch ein HTML Gerüst.

Das Gerüst macht nichts weiter als RequireJS zu laden und ihm mit Hilfe des data-main Attributs mitzuteilen, wo es unser MainScript von oben findet. Der Rest passiert ab sofort automatisch und wir können unsere Applikation inklusive Restangular entwickeln.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*