Angular – Moderne Webprogrammierung

Angular ist ein leistungsfähiges OpenSource-Framework zur Entwicklung moderner und komplexer Web-Anwendungen. Es ist der Nachfolger des Frameworks AngularJS und basiert auf der Sprache TypeScript. Wir benutzten im folgenden Beispiel Angular Version 7.

In diesem Tutorial werden zunächst einige Konfigurationen vorgenommen um anschließend ein neues Angular Projekt zu erstellen und zu starten.

Entwicklungsumgebung konfigurieren

Um eine Angular-App zu erstellen benötigst du die Angular CLI (Command Line Interface). Mit Hilfe dieser kannst du Anwendungen über einfache Terminalbefehle erstelllen. Die Angular CLI benötigt wiederum eine aktuelle Node.js Version.

Besorge dir also zunächst eine aktuelle Node.js Version:
https://nodejs.org/en/

um anschließend über ein Terminal die Angular CLI zu installieren:

npm install -g @angular/cli

Neues Projekt erstellen und Starten

Angular Projekt erstellen

ng new first-angular-application

Während der Erstellung einer neuen Angular Anwendung aktivierst du das Angular Routing, indem du die Frage „Would you like to add Angular Routing?“ mit Ja beantwortest. Außerdem muss angegeben werden welches Sylesheetformat benutzt werden soll. In unserem Beispiel wählen wir SCSS.

Folgende Ordnerstruktur wird erstellt:

Build erstellen

ng build

Ein neuer Ordner dist wird im Projektverzeichnis abgelegt. Der Build kann später z.B. über FTP auf einen Server transferiert werden.

Anwendung starten

ng serve

Öffnen sie anschließend über Ihren Browser http://localhost:4200 um die Anwendung zu starten.