Angular 2: Entwicklungsumgebung einrichten

Ich habe mich bereits vor einiger Zeit mit Google’s Angular 2 beschäftigt. Dabei war eine der ersten Hürden, eine entsprechene Entwicklungsumgebung einzurichten. Da ich hier anfangs einige Schwierigkeiten hatte – vor allem was das Verständnis angeht – schreibe ich Euch hier eine kleine Anleitung, wie man die erste „Hello World!“ Anwendung schreibt.

Visual Studio Code

Als erstes brauchen wir einen Code Editor, der TypeScript und im Besten Fall Angular 2 unterstützt. Hierfür empfehle ich den „Visual Studio Code“ Editor von Microsoft. Dieser eignet sich im Übrigen auch wunderbar für die Programmierung von Webseiten – hier habe ich schon einige Editoren ausprobiert (z.B. Notepad++, Brackets).
Für diesen Editor gibt es bereits zahlreiche Extensions, außerdem ein Terminal, das uns lästiges ALT + TAB geswitche erspart. Auch git ist bereits integriert und man kann wunderbar im Team arbeiten.

node.js

Außerdem brauchen wir node.js. Das ist eine Plattform zum Betrieb von Netzwerkanwendungen, u.a. auch Webserver (wie sparen uns also XAMPP). Außerdem kann man mit dem npm (node.js package manager) sehr schnell abhängige Module nachinstallieren. Ladet euch node.js auf dieser Webseite herunter: https://nodejs.org/en/ Wählt hier bitte immer die Current Version (Last Features). Das MSI Paket einfach installieren.

GitHub Desktop

Jetzt brauchen wir noch GitHub Desktop, um auf das Angular 2 Repository zugreifen zu können. Das widerrum brauchen wir für das Angular CLI (Command Line Interface). Auf https://desktop.github.com/ gibt es die Setup Datei zum Herunterladen. Passt die Installation, v.a. was Pfade usw angeht, euren Bedürfnissen an.
Nach der Installation ist GIT allerdings nicht in der PATH Umgebungsvariable eingetragen. Der Pfad zur Exe ist bei einer Standardinstallation folgender: „C:\Users\<Benutzername>\AppData\Local\GitHub\PortableGit_<wirre Zahlen und Buchstaben>\cmd“.Ich empfehle Euch hier, die Dateien in diesem Verzeichnis in ein neues Verzeichnis zu kopieren und dieses dann in die PATH Variable einzutragen.

Machen wir uns also dran, die Mutter aller Programme zu schreiben, nämlich „Hello World!“. Puh, aber womit starten wir? Glücklicherweise gibt es das angular-cli, mit dem wir uns ein lauffähiges Grundgerüst erstellen können. Dazu müssen wir uns zunächst aber erstmal das angular-cli installieren. Hierzu öffnen wir Visual Studio Code (VSC) und öffnen im VSC den Ordner, in dem wir unser Programm ablegen wollen (in meinem Fall wäre es C:\dev\angular). Dann öffnen wir das integrierte Terminal unter Anzeigen (Strg + ö) und es erscheint unten eine cmd Box.

angular-cli für Angular 2

Hier geben wir den Befehl npm install -g angular-cli (-g steht für global) ein, um das Command Line Interface von angular zu installieren. Das Ganze dauert eine Weile. Einige WARN Hinweise mit deprecated Meldungen können wir einfach ignorieren.

Um jetzt zu prüfen, ob das cli installiert wurde, geben wir ng --version ein und es werden die Versionshinweise ausgegeben.

angular-cli: 1.0.0-beta.17
node: 6.7.0
os: win32 x64

TIPP: Wenn ihr möglicherweise bereits eine App schreiben habt, diese aber mit dem angular-cli anreichern wollt, gebt einfach in dem entsprechenden Verzechnis den Befehl ng init ein.

Hello World!

So, jetzt sind wir bereit, um unser erstes Programm zu „schreiben“. Das CLI gibt uns hierzu die praktische Funktion „new“ mit. Geben wir also in unser Terminal ng new hello-world ein. Es werden jetzt alle benötigten Verzeichnisse und Dateien angelegt sowie via npm alle abhängigen Module installiert.

Testen wir gleich mal unser Programm. Dazu müssen wir zuerst den Webserver starten. Wechseln wir in unserem Terminal in das Verzeichnis der App mittels cd hello-world und geben den Befehl ng serve ein. Gleich in der ersten Zeile steht, auf welchem Port der Webserver horcht, das sollte im Normalfall 4200 sein. Wenn wir einen Browser unserer Wahl, also Chrome, öffnen und die URL http://localhost:4200 eingeben, kommt die Webseite mit der Anzeige app works!

Angular 2: Visual Studio Code Editor mit angular-cli
Angular 2: Visual Studio Code Editor mit angular-cli

Der große Vorteil an angular-cli ist „hot reloading“. Als Test können wir die Datei ./src/app/app.component.html ändern. Tauschen wir {{title}} gegen Hello World! aus. Sobald wir die Datei speichern, sehen wir im Terminal „webpack: bundle is now INVALID.“ und ng startet mit der Neukompilierung der Daten und refresht unser Browser Fenster.

Hier habe ich für Euch noch ein paar Tutorials, mit denen ich mir Angular 2 angeeignet habe.

  • https://angular.io/docs/ts/latest/guide/
  • https://angular-university.io/home

 

Bitte bewerten Sie meinen Beitrag

Alexander Jungwirth ist Webentwickler bei einem Ingolstädter Verlagshaus und ist Inhaber der Firma Webdesign Manching. Seine Leidenschaft ist HTML, seine Passion PHP, seine Hingabe CSS und seine Inbrunst jQuery. Alexander lebt in Manching mit seiner liebevollen Frau und seinen wunderbaren Kindern.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.