Wie setze ich meine erste Angular-Applikation auf?

In diesem Blog möchte ich einen Blick auf die Dateien und Ordner werfen, die man braucht, um mit seiner ersten Angular-Applikation zu beginnen.

Beim Aufsetzen der Applikation gibt es mehrere Ansätze. Wir sehen hier nur einen davon. Das Folgende soll sich auf einen minimalistischen Ansatz beschränken und nur Essenzielles zeigen.

Wo sollte man beginnen?

Angular-Applikationen werden normalerweise in einem Ordner entworfen, der in verschiedenen geschachtelten Ebenen alle Dateien zum Ecosystem von Angular sowie die Applikationsfiles selber enthält.

Zusätzlich wird ein Webserver gebraucht, der die Files ausliefert. Das ständige Deployen zur Entwicklungszeit ist mühsam, daher kann man andere Module wie den Lite-Server oder das Serve-Modul von Node nutzen.

Welche Files brauche ich?

Viele Frameworks und Tools haben eine oder mehrere Konfigurationsdateien oder andere Einstellungen, sodass für mehr Frameworks auch mehr Files benötigt werden. Folgender Aufbau für einen Start mit SystemJS als Module-Loader ist jedoch ein guter Start:

Yarn.lock

Der Yarn-Paketmanager speichert alle Abhängigkeiten und die Abhängigkeiten der Kind-Abhängigkeiten etc. in einem Lock-File, das mit in die Sourcecode-Verwaltung eingecheckt werden kann. So wird das Problem der «weichen» Versionsangaben im package.json gelöst und der node_modules-Folder braucht nicht in die Sourcecode-Verwaltung eingecheckt werden.

Tslint.json

Das tslint.json konfiguriert den Linter für alle Typescript-Dateien auf gleichem Level und darunter. Hier können Team-Guidelines festgelegt werden, nach denen entwickelt wird. So kann schon beim Entwickeln überprüft werden, ob der Code den festgelegten Regeln entspricht.

Tsconfig.json

Die tsconfig.json konfiguriert den Typescript-Compiler (tsc) für diesen Ordner. Innerhalb dieses Ordners wird bei jedem «tsc» Command diese Datei als Konfigurationsdatei herangezogen. In ihr können das Ausgabeformat der Module, die Javascript-Version etc. angegeben werden. Dies vereinfacht die Kontrolle über das generierte Javascript und hält es einheitlich.

Systemjs.config.js

Falls der Module-Loader SystemJS zum Einsatz kommt (Alternative: Webpack) muss dieser konfiguriert werden. Dies geschieht über diese Datei. In ihr stehen die Pfade zu den externen Modulen und sie ist der Ort, an dem Third-Party-Libraries eingesetzt werden sollten.

Damit eine Konfiguration möglich ist, muss diese Datei geladen werden, nachdem die SystemJS-Source-Datei geladen wurde.

Package.json

Die package.json enthält alle Abhängigkeiten des Projekts. Hierbei werden Developemt-Dependencies (devDependencies) und Runtime-Dependencies (dependencies) unterschieden.

Weiter können hier Commands für das Projekt in npm (run) commands zusammengefasst werden. So können Task-Runner wie Gulp/Grunt, Moduleloader wie Webpack oder Cleanup- sowie Build-Mechanismen etc. versteckt und geordnet angeboten werden.

Tipp: Einen Überblick über alle zur Verfügung stehenden Kommandos kann man mit «npm run» auf der Konsole darstellen.

Index.html

Die index.html ist der Startpunkt der Applikation und benutzt SystemJS zum Laden der Applikation.

Mit dem Einsatz von Webpack werden die Javascript-Files nicht mehr einzeln geladen, sondern schon zur Entwicklungszeit in einem Bundle zusammengefasst und als einzelnes File (*.js) in der index.html angegeben.

App-Folder

Der App-Folder enthält in dem Fall die eigentliche Applikation.

Jede Angular-Applikation besteht aus mindestens einem Modul und mindestens einer Komponente. Die Dateien «app.component.html» und «app.component.ts» stellen hier Template und Logik unserer Applikationskomponente dar.

App.module.ts ist unser Applikationsmodul, was u.a. als Container für unsere Komponenten, Services, Pipes, Direktiven etc. dient.

Main.ts hält die Verantwortlichkeit zum Bootstrappen unserer kompletten Applikation.

Wieso ist das Bootstrappen der Applikation in ein eigenes File ausgelagert?

Das Starten der Applikation kann je nach Umgebung unterschiedlich sein. Nativescript-Applikationen lassen sich über eine andere Funktion starten als Browser-Applikationen. Durch das Abstrahieren des Vorgangs in ein separates File kann der Prozess angepasst werden und die komplette restliche Codebasis für den Bootvorgang bleibt unangetastet.

Ich hoffe, ich konnte eine Übersicht geben, welches Files in den Startvorgang involviert sind, welche Files meine Applikation definieren und welche Files uns Entwicklern das Entwickeln im Frontend einfach machen sollen.

Viel Spass beim Programmieren!