Angular. Ferdinand Malcher

sich. Außerdem besitzt der Editor von Haus aus eine Git-Integration.² Somit lassen sich Änderungen am Projektcode über die grafische Oberfläche des Editors gut nachvollziehen.

      Abb. 2–1 Die Oberfläche von Visual Studio Code

       Kommentare im JSDoc-Format

      Visual Studio Code evaluiert automatisch Quellcode-Kommentare, die im JSDoc-Format³ notiert sind. Bei der Entwicklung werden damit automatisch nützliche Informationen zu dokumentierten Übergabeparametern, Beispielen, Rückgabewerten und vielem mehr angezeigt. Starten wir im TypeScript einen Codeblock mit /** und drücken , so wird der Kommentarblock automatisch geschlossen und beim Einfügen einer neuen Zeile mit einem vorangestellten * versehen.

      Somit können wir unseren Code schon während der Entwicklung gut dokumentieren und helfen anderen Entwicklern, sich im Projekt schnell zurechtzufinden und effizient zu arbeiten.

       Erweiterungen für VS Code

      Wir empfehlen zusätzlich noch die Installation einiger Erweiterungen (Extensions). Mit Erweiterungen lassen sich Funktionalitäten des Editors optimal ausnutzen, und die Produktivität bei der Entwicklung mit Angular kann gesteigert werden. Erweiterungen für VS Code können über den Marketplace von Visual Studio bezogen werden.⁴ Die Installation der Plug-ins erfolgt am einfachsten über den in den Editor integrierten Extensions Browser (Abbildung 2–2). Hier können wir den Marketplace nach Plug-ins durchsuchen und die installierten Erweiterungen verwalten.

      Abb. 2–2 Erweiterungen in VS Code

Erweiterung		Kurzbeschreibung
	EditorConfig for VS Code5	Verarbeitet Informationen einer .editorconfig-Datei und konfiguriert entsprechend den Editor. Somit können editorenübergreifende Einstellungen für die Anzahl von Leerzeichen, verwendete Zeichencodierung etc. geschaffen werden.
	TSLint6	Ist eine Integration des Tools TSLint7. Verstöße gegen festgelegte Codestil-Richtlinien (festgelegt in der Datei tslint.json) werden grafisch im Editor dargestellt.
	Angular Language Service8	Editor-Unterstützung für Angular-Templates. Ermöglicht Autovervollständigung, Typprüfung und Typinformationen in den Templates.
	Path Intellisense9	Autovervollständigung für Pfad- und Dateinamen

      Tab. 2–1 Empfohlene Erweiterungen für Visual Studio Code

      Tabelle 2–1 zeigt eine Liste von Erweiterungen, die wir für die Entwicklung mit Angular empfehlen. Alle Erweiterungen lassen sich über den Extensions Browser installieren oder mit den folgenden Befehlen:

      $ code --install-extension EditorConfig.EditorConfig

      $ code --install-extension ms-vscode.vscode-typescript-tslint-plugin

      $ code --install-extension Angular.ng-template

      $ code --install-extension christian-kohler.path-intellisense

       2.2Google Chrome

      Zur Darstellung der Angular-Anwendung und für das Debugging nutzen wir Google Chrome¹⁰. Wir setzen auf diesen Browser, weil er ein umfangreiches Set an Debugging-Tools mitbringt. Diese Chrome Developer Tools schauen wir uns im Powertipp ab Seite 177 genauer an.

      Mit der Erweiterung Augury¹¹ steht uns außerdem ein Debugging-Tool für Angular-Anwendungen zur Verfügung. Wir werden im Powertipp auf Seite 271 mehr über dieses Tool erfahren.

       2.3Paketverwaltung mit Node.js und NPM

       JavaScript ohne Browser

      Das Angular-Tooling setzt auf Node.js.

      Node.js¹² ist eine Laufzeitumgebung zur Ausführung von JavaScript auf dem Server. Es basiert auf der Google V8 Engine¹³, die auch in Google Chrome zum Einsatz kommt. Mit Node.js können serverbasierte Dienste mit JavaScript implementiert werden. Das hat den Vorteil, dass JavaScript für die Entwicklung von Backends und Frontends eingesetzt werden kann. Das Anwendungsspektrum ist nicht auf Webserver und REST-Schnittstellen begrenzt, sondern es können viele weitere skalierende Szenarien abgebildet werden. Seine Stärke zeigt Node.js bei der Arbeit mit asynchronen Operationen, die ein elementares Paradigma bei der Entwicklung mit dieser Laufzeitumgebung sind. Node.js wird von vielen Tools verwendet, die die Webentwicklung für den Programmierer komfortabler gestalten. CSS-Präprozessoren wie Less oder Sass, Tests mit Karma oder Protractor, der Bundler Webpack und noch vieles mehr – alle basieren auf Node.js. Wir verwenden Node.js in diesem Buch nur zum Betrieb der Tools, die wir für die Entwicklung mit Angular benötigen. Das HTTP-Backend, das wir im Kapitel zu HTTP ab Seite 189 vorstellen, basiert übrigens auch auf Node.js.

       NPM-Pakete

      Die Plattform Node.js bietet eine Vielzahl von Paketen, die sich jeder Entwickler zunutze machen kann. Zur Verwaltung ist der hauseigene Paketmanager Node Package Manager (NPM)¹⁴ das richtige Werkzeug. Damit kann auf die Online-Registry aller Node.js-Module zugegriffen werden. Wer möchte, kann mit der Webseite http://npmjs.org nach den passenden Paketen suchen.

      Pakete lassen sich sowohl lokal als auch global installieren. Die lokalen Pakete werden je Projekt installiert. Dazu werden sie auch im jeweiligen Verzeichnis gespeichert. Damit wird erreicht, dass ein Paket in verschiedenen Versionen parallel auf dem System existieren kann.

      Globale Pakete werden von NPM in einem zentralen Verzeichnis¹⁵ auf dem Computer gespeichert. Darin befinden sich meist CLI-Pakete (CLI steht für Command Line Interface), die von der Konsole aufgerufen werden können. Bekannte Beispiele dafür sind: @angular/cli, typescript, webpack oder nativescript. All diese Pakete sind dazu da, andere Dateien auszuführen, zu verarbeiten oder umzuwandeln.