Single Page Application mit Angular erstellen

angular-cli

Heutzutage werden immer mehr Anwendungen und Websites als Single Page Application umgesetzt. Das Angular Framework von Google gehört zu den beliebtestens Technologien mit der man SPAs umsetzen kann. Dies möchte ich mir mithilfe der Angular-CLI genauer anschauen.

Angular CLI installieren

Zu beginn müssen wir sicherstellen das Node.js installiert ist: node -v. Wenn dies noch nicht der Fall ist, könnt ihr das hier nachlesen.

Wenn alles bereit ist könnt ihr Angular CLI ganz einfach über npm global auf eurem System installieren.

sudo npm install -g @angular/cli

Anschließend ng --version ausführen um zu prüfen ob alles O.K ist.

Prüfen ob alles geklappt hat

Projektverzeichnis erstellen

Wir müssen jetzt einen Pfad erstellen wo wir unser Projekt speichern wollen. Ich persönlich lege dazu ein Verzeichnis im Root Pfad an.

sudo mkdir /projekte
sudo chown gnome /projekte/
cd projekte/

Anstelle von gnome müsst ihr natürlich euren aktuellen Benutzer eintragen.

Projekt pfad erstellen
Projektpfad erstellen

Angular Projekt initialisieren

Nun können wir das eigentliche Angular Projekt mit folgendem Befehl initialisieren und wechseln anschließdens ins Angular Projektverzeichnis. Die Projektbezeichnung könnt ihr beliebig gestalten.

ng new meinprojekt
cd meinprojekt/
Angular CLI Dateistruktur

Development Server starten

Die Angular CLI stellt uns einen Entwicklungsserver zur Verfügung. Was es damit aufsicht hat, kannst du hier nachlesen. 

ng serve

Nachdem ihr den Entwicklungsserver gestartet habt, ist dieser unter http://localhost:4200/ zu erreichen.

Angular Welcomepage

Woher komm's