existiert. Diese ist auch im AppModule referenziert. Im Template der AppComponent finden wir sogar ein passendes Element mit dem Namen hello. An dieser Stelle möchten wir noch nicht auf die Details eingehen, jedoch scheinen die beiden Komponenten in einer Beziehung zueinander zu stehen. Mehr hierzu erfahren Sie in den nächsten Kapiteln!
Zusammenfassung
Glückwunsch! Es ist geschafft, der Schnellstart mit Angular ist uns gelungen. Wir haben gelernt, wie eine Angular-Anwendung grundsätzlich aufgebaut ist und welche Abhängigkeiten untereinander bestehen.
Die Anwendung wird im Browser ausgeführt, deshalb ist die Datei index.html der Einstiegspunkt. Über die Datei main.ts wird unser zentrales Angular-Modul AppModule geladen (»gebootstrappt«). Von dort aus wird die erste Komponente AppComponent eingebunden. Wir haben gelernt, dass Komponenten die wichtigsten Bausteine unserer Webprojekte sind. Eine Komponente besteht immer aus einem im Browser sichtbaren Template und einer TypeScript-Klasse, die die Logik für das Template beinhaltet.
Wir haben außerdem einen ersten Blick auf den »JavaScript-Dialekt« TypeScript geworfen. Für alle Einsteiger befindet sich im Abschnitt ab Seite 27 eine Einführung in TypeScript.
Die Plattform StackBlitz ist ein nützliches Hilfsmittel zum schnellen Setup einer Angular-Anwendung und läuft vollständig im Browser. Mit diesem Tool können Sie schnell Prototypen entwickeln und Features ausprobieren, ohne das komplette Tooling auf Ihrem Rechner aufsetzen zu müssen. Den Link zu einem StackBlitz-Projekt können Sie übrigens auch weitergeben, sodass andere Personen Ihre Anwendung betrachten können. Wir haben ebenfalls ein kleines Beispielprojekt für Sie aufgesetzt, das wir sehr gerne mit Ihnen teilen:
Demo und Quelltext: https://ng-buch.de/b/stackblitz-start
2Haben Sie alles, was Sie benötigen?
»Angular’s best feature is its community.«
Dave Geddes
(ehem. Organisator der Konferenz ng-conf)
Die Plattform StackBlitz ist für kleine Projekte und Spielwiesen bestens geeignet. Für eine »richtige« Anwendung sollten wir die Entwicklungsumgebung allerdings lokal auf unserer Maschine aufsetzen. Bevor wir also mit der Entwicklung beginnen, möchten wir sicherstellen, dass Sie für die Entwicklung mit Angular bestmöglich gewappnet sind. Darum widmen wir uns zunächst der Einrichtung aller erforderlichen Werkzeuge. Wir geben Ihnen in diesem Kapitel außerdem Tipps zur Konfiguration der Programme mit.
Falls Sie bereits über eine integrierte Entwicklungsumgebung (IDE) für die Webentwicklung verfügen und mit Tools wie Node.js und NPM vertraut sind, können Sie dieses Kapitel überspringen.
2.1Visual Studio Code
Unser empfohlener Editor für Angular
Visual Studio Code (VS Code)1 ist eine quelloffene Entwicklungsumgebung unter der MIT-Lizenz. Der Editor ist unter den Betriebssystemen Windows, macOS und Linux lauffähig. VS Code lässt sich leicht durch neue Pakete erweitern. Der Editor verfügt nicht nur über eine moderne Oberfläche, sondern unterstützt auch zahlreiche Programmiersprachen. Da die TypeScript-Integration sehr ausgereift ist, verwenden wir diesen Editor für die Entwicklung von Angular-Anwendungen. VS Code bringt weiterhin eine sehr gute automatische Codevervollständigung und Codedokumentation mit sich. Außerdem besitzt der Editor von Haus aus eine Git-Integration.2 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-Format3 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
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.4 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. |
|
| ||
