Hinweis

Die in diesem Artikel vorgestellten Tools Bower und Gulp lassen sich über den Paketmanager NPM installieren. NPM selbst lässt sich hervorragend über andere Paketmanager oder einfach unter http://nodejs.org/ herunterladen und installieren.

Einleitung

Angular ist super, um schnell dynamische Web-Apps zu bauen. Hohe Performance und im Vergleich zu herkömmlichen JS-Methoden deutlich minimierter Code. Wer sequentielle Programmierabläufe gewohnt ist, mag die asynchrone Vorgehensweise und die ungewohnte Syntax anfangs zwar noch etwas verwirrend finden. Aber keine Angst, das legt sich schnell.

Bevor es mit dem ersten AngularJS-Projekt los geht, lasst uns kurz einen Blick auf mögliche Tools und ein mögliches Setup werfen. Normalerweise reicht ja schon eine einzige index.html und eine in dessen Head eingebundene angular.js-Datei für einen Schnellstart.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.js"></script>

Falls das Projekt allerdings größer werden sollte, wird unausweichlich die Einbindung vieler extern bereitgestellter Ressourcen vonnöten. Zum Beispiel für Overlays, für Autovervollständigung, für Cookies und vielem mehr. Zur Einbindung dieser sogenannten Module, Plugins und Direktiven bietet sich die Nutzung einiger Tools an, die einem viel Arbeit abnehmen.

Bower

Anfänglich wird hauptsächlich Bower von großem Nutzen sein. Bower ist ein Paketverwaltungstool, das das Hinzufügen und Entfernen externer AngularJS-Ressourcen über die Kommandozeile ermöglicht. Sobald erstmalig der Befehl zur Installation eines Plugins aufgerufen wird, erzeugt Bower einen Unterordner bower_components in eurem Projekt und legt die Quelldateien dort ab. Darin wiederum ist eine nach dem Plugin benannte JS-Datei enthalten, die nur noch nachträglich mittels script-tag in den HTML-Head eingebunden werden muss. Fertig. Nichts mehr herunterladen, verschieben und entpacken. Das macht Bower alles allein.

$ bower install ngDialog

Um ein an das Projekt angeschlossenes Git-Repositorium möglichst klein zu halten, kann der bower_components-Ordner ausgeschlossen werden und die entstandenen Abhängigkeiten in einer bower.json-Datei festgehalten werden. Sobald sich die Kollegen das Repositorium gezogen haben, brauchen sie nur noch den bloßen Befehl „bower install“ aufrufen und die Ressourcen werden automatisch wieder in das Projekt heruntergeladen. Zur Erzeugung der bower.json-Datei kann einfach der Befehl „bower init“ genutzt werden und über den Zusatz „--save“ hinter einen neu hinzuzufügendem Plugin, wird dieses fortan automatisch als Abhängigkeit in die bower.json eingetragen.

$ bower init
$ bower install ngDialog --save

Gulp

Wenn das Projekt nun aber riesig wird und man zum Beispiel nicht für jedes einzelne der einhundert für das Projekt benötigten Angular-Plugins die Einbindung im HTML-Head händisch vornehmen möchte, weil es einfach nervig ist, dann wird ein sogenannter Taskrunner interessant. Taskrunner übernehmen routinierte Aufgaben. Zum Beispiel kann so ein Taskrunner wunderbar watch-Aufgaben übernehmen, wie das Kompilieren von CSS aus SASS oder eben das Injizieren der nötigen script-Tags in den HTML-Head sobald ein neues Angular-Modul hinzugefügt wurde.

Wir entscheiden uns für Gulp! Gulp lässt sich im Vergleich zu seinem Konkurrenten Grunt verständlicher und schlanker programmieren. Nachdem Gulp per „npm install gulp“ vorliegt, können einzelne Tasks in einer gulpfile.js definiert und mit dem simplen Befehl „gulp“ aufgerufen werden. Aber halt! Damit auch Gulp bei den Kollegen ankommt, bietet sich die vorherige Erzeugung einer packages.json per „npm init“ an. Genau wie die bower.json kann auch die packages.json nun automatisch mit allen Abhängigkeiten befüllt werden, in dem man dem Befehl zur Installation eines Gulp-Paketes den Zusatz „--save“ anhängt.  So bekommen nun auch die Kollegen automatisiert Gulp und alle notwendigen Packages geliefert, sobald sie sich das Repositorium gezogen haben und „npm install“ aufrufen.

$ npm init
$ npm install gulp --save
$ npm install gulp-watch --save
$ gulp

AngularJS Wegweiser und Verwendung
Zusammenfassung:

Tools

  • NPM, damit Bower und Gulp installiert werden können
  • Bower zum Installieren externer AngularJS-Zusatzpakete
  • Gulp als Taskrunner

Initialisierung

  • „npm install“ installiert was in der packages.json steht (Gulp, Gulp-Plugins)
  • „bower install“ installiert was in der bower.json steht (AngularJS-Module)
  • „gulp“ rennt alle Tasks aus der gulpfile.js durch (z.Bsp. HTML-Head injects, CSS Kompilierung etc.)