Serie: Einführung in den MEAN Stack
- Teil 1: Definition des MEAN Stacks
- Teil 2: Setup des MEAN Stacks
- Teil 3: Node.js
- Teil 4: npm
- Teil 5: Connect
- Teil 6: Express
- Teil 7: MongoDB
- Teil 8: Mongoose
- Teil 9: REST
- Teil 10: Baucis
- Teil 11: Bower
- Teil 12: AngularJS
- Teil 13: Restangular
Bevor wir eine Webapplikation mit AngularJS entwickeln stelle ich euch in diesem Artikel Bower vor. Dieses Tool benötigen wir um clientseitige Frameworks zu verwalten.
Bower ist ein von Twitter entworfener Package Manager für clientseitige Module. Es selbst ist jedoch ein Node-Modul, welches einfach über npm installiert werden kann. Da wir Bower als Command Line Tool verwenden wollen, werden wir es global installieren:
$ npm install -g bower
Die aktuellste Version von Bower ist zum Zeitpunkt des Schreibens 1.2.7.
Die Verwendung von Bower ähnelt npm sehr stark. Mit folgendem Befehl installiert man bspw. AngularJS:
$ bower install angular
Anschließend wird ein Ordner namens bower_components erstellt in welchem sich ein weiterer Ordner namens angular befindet. Dieser enthält die aktuellste stabile Version von AngularJS in einer einzelnen JavaScript-Datei und noch einmal die gleiche Datei in minifizierter Form.
Bower hat einige allgemeine Probleme, die nicht unerwähnt bleiben sollten. Es ist jünger als npm, inkonsistenter und nicht so weit verbreitet. Während man bei AngularJS über Bower nur die fertige JavaScript-Datei herunterlädt, würde man beim Framework Bootstrap den kompletten Entwicklungsordner herunterladen mit allen Quell- und Builddateien herunterladen. Die Bower Community ist sich uneinig darüber, ob eine Bower Komponente Entwicklungsdateien (Build, Tests, etc.) enthalten sollte oder nicht. Dieses Problem lässt sich manuell umgehen, da Bower intern Git verwendet und jedes beliebige Git Repository über Bower installiert werden kann. So kann man – wenn nötig – immer den vollständigen Projektordner herunterladen. Dieses inkonsistente Verhalten solltet ihr im Hinterkopf behalten. Für uns ist dies nicht weiter relevant, da wir im späteren Verlauf für AngularJS nicht den vollständigen Entwicklungsordner benötigen.
Analog zur package.json von npm bietet Bower mit der bower.json die Möglichkeit die Abhängigkeiten eines Projekts zu anderen Modulen deklarativ festzulegen. Für unser Beispiel benötigen wir diese Datei nicht. Hier könnt ihr nachlesen, wie man die bower.json verwendet. Wie auch die package.json wird sie vor allem dann relevant, wenn man mit anderen Entwicklern zusammenarbeitet (damit sie auf einem Blick die Abhängigkeiten zu andere Modulen sehen können) und wenn man sein Projekt veröffentlichen möchte.
Die Deinstallation von einer Bower Komponente erfolgt analog zu npm mit folgendem Befehl:
$ bower uninstall angular
Eine globale Installation einer Komponente ist bei Bower jedoch nicht möglich.
Da wir nun wissen wie man Bower verwendet, können wir uns im nächsten Artikel AngularJS widmen.
