AngularJS App unter OS X erstellen

In diesem Artikel möchte ich aufzeigen, wie unter OS X (getestet mit 10.11) eine einfache AngularJS App erstellt werden kann. Es wird dabei gezeigt, welche Abhängigkeiten installiert werden müssen und wie danach eine einfach App mit Unterstützung von Yeoman erstellt wird.

Homebrew installieren

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Abhängigkeiten via NPM installieren

brew install node #installiert node.js inkl. npm
npm install -g bower grunt-cli yo #installiert weitere Abhängigkeiten
  1. bower als package manager für das Frontend
  2. grunt für das builden der App
  3. Yeoman (yo) bietet die Möglichkeit eine neue Angular App mit allen Abhängigkeiten zu generieren. Es werden automatisch eine bower Datei für die Abhängigkeiten und ein Gruntfile erstellt.

Falls im späteren Projekt Sass verwendet werden soll, muss zuerst Compass installiert werden.

gem install compass

Um über Yeoman eine Angular App zu erstellen, muss zuerst der entsprechende Generator installiert werden.

npm install -g generator-angular

App erstellen

Danach kann via Konsole in das Verzeichnis gewechselt werden, in dem die App erstellt werden soll. Dort drin kann folgender Befehl ausgeführt werden.

yo angular

Es werden einige Fragen gestellt, welche Komponenten installiert werden sollen. Unter anderem kann Bootstrap gleich installiert werden. Auch lässt sich auswählen, ob Sass verwendet werden soll.

Danach läuft der Installer einige Minuten durch, dabei werden unter anderem gleich alle bower Abhängigkeiten installiert.

Testen und publizieren

Ist die Installation abgeschlossen, können unter anderem folgenden Befehle verwendet werden.

grunt serve

Startet einen lokalen Webserver und öffnet die App im Standardbrowser. Werden Änderungen im Quelltext durchgeführt, sind diese im Browser gleich ersichtlich.

grunt build

Erstellt die Webseite im dist/-Verzeichnis. Der Inhalt des Verzeichnisses lässt sich später auf den Webserver transferieren.

Ein Gedanke zu „AngularJS App unter OS X erstellen

Kommentar verfassen