Aufbau einer Angular Anwendung

In meinem letzten Beitrag habe ich beschrieben, welche Erfahrungen ich bei meinem Einstieg in die Angular-Entwicklung gemacht habe. Dabei habe ich meine Entwicklungsumgebung aufgesetzt und mein erstes lauffähiges Projekt erstellt. Heute möchte ich mir etwas genauer anschauen, wie ein Angular-Projekt typischerweise aufgebaut ist und aus welchen Grundbausteinen es besteht. Wenn du auch gerade in den Anfängen der Angular-Entwicklung steckst, nehme ich dich gerne mit auf diese Entdeckungsreise. Zuerst sollten wir uns anschauen, welche Dateien durch die Angular CLI innerhalb unseres Projekts erstellt wurden.

Struktur des Projekts

Wie schon im ersten Blog-Post erwähnt, gibt es den node_modules Ordner, der alle Abhängigkeiten unseres Projekts enthält. Zusätzlich finden sich in unserem Projekt-Ordner einige Konfigurationsdateien, wie z.B. die package.json, in der die Abhängigkeiten definiert sind. Für uns am wichtigsten wird aber erstmal der src-Ordner sein. Dort finden wir u.a. die Dateien index.html, main.ts und styles.css. Mit Angular werden grundsätzlich Single-Page-Applications erstellt und die index.html ist eben diese einzelne Seite. In main.ts findet sich die Logik, die beim Kompilieren unserer Anwendung zuerst ausgeführt wird und im Endeffekt für das Starten der Anwendung zuständig ist. Das Aussehen der Anwendung kann global in der styles.css definiert werden.
Hauptsächlich werden wir jedoch in den Dateien des app-Ordners arbeiten. Eine Angular-Anwendung besteht immer aus Komponenten. Mindestens eine Komponente muss für ein lauffähiges Projekt vorhanden sein. Da wir unser Projekt mit Angular CLI erstellt haben, ist das root Element, die app Komponente, schon vorhanden. Für diese Komponente gibt es nun eine Template-Datei für das HTML (app.component.html) und eine Logik-Klasse mit TypeScript-Code (app.component.ts). Außerdem gibt es noch eine css-Datei, in der das Aussehen spezifisch für diese Komponente definiert wird, und eine spec.ts-Datei, die für Tests verwendet wird.

Wie funktioniert die App-Komponente?

Schauen wir uns die Anwendung im Browser an, so steht ganz oben die Überschrift „Welcome to app!“. Woher kommt diese Überschrift? Als erstes schauen wir natürlich in der html-Datei nach. Dort finden wir auch tatsächlich einen h1-Tag für die Überschrift. Darin wird jedoch {{title}} verwendet und nicht ‚app‘. Schließlich werden wir in der ts-Datei fündig. Hier ist die Property title definiert. Durch String Interpolation wird JavaScript innerhalb der geschweiften Klammern durch Angular interpretiert und im HTML integriert. Zur Laufzeit wird {{title}} also durch den in der Property gespeichert Wert ‚app‘ ersetzt. Während also das Template definiert, wie die Komponente aussehen soll, werden in der Logik-Klasse der Inhalt und das Verhalten festgelegt.

Die Verbindung zwischen diesen beiden Klassen wird zusätzlich deutlich, wenn wir die Logik-Klasse genauer betrachten. Der Decorator @Component gibt an, dass es sich um eine Komponente handelt. An dieser Stelle werden die Pfade zum Template und den Styles für die Komponente hinterlegt. Außerdem gibt es noch den selector, im betrachteten Fall ‚app-root‘. Hier wird ein css-Selektor definiert, mit dem unsere Komponente in einem Template platziert werden kann. Da es sich bei app um die root Komponente handelt, ist sie in der index.html eingebunden. Für unsere weitere Entwicklung werden wir jedoch alle neuen Komponenten im Template der app-Komponente einbinden.

Modularer Aufbau

Wenn wir die App starten, wie wird dann unsere app Komponente gefunden?  Gehen wir zurück in unseren Projekt-Ordner und schauen uns die main.ts an, finden wir eine wichtige Zeile:

platformBrowserDynamic().bootstrapModule(AppModule)

Hier wird angegeben, dass beim Starten der Anwendung das Modul AppModule verwendet werden soll. Mit Komponenten entwickeln wir einzelne Teile unsere Anwendung. In Modulen werden die einzelnen Bestandteile gebündelt und wir können somit unsere Anwendung in Sinnabschnitte gliedern. Typischerweise enthält eine Anwendung Shared Modules, die wiederverwendbare Komponenten enthalten, und Feature Modules, in denen fachliche Komponenten gebündelt werden.

Das root Modul, das AppModule, wird aus der app.module.ts aus unserem App-Ordner importiert. In der app.module.ts wiederum finden wir den Decorator @NgModule. Innerhalb dieses Decorators können wir ein Modul genauer definieren. Im Declarations-Array werden alle Komponente aufgelistet, die unsere root Komponente verwendet. Außerdem wird über Bootstrap definiert, welche Komponente als root Element die erste Komponente beim Laden der App sein soll. In beiden Arrays wird unsere AppComponent referenziert. Deshalb wird beim Starten der Anwendung unsere App Komponente geladen.
Sobald wir eigene Komponenten entwickeln und in der App Komponente verwenden wollen, müssen wir diese dem Declarations-Array übergeben. Ein NgModule besitzt außerdem die Eigenschaft Imports. Hier können Module aus dem Angular Framework eingebunden werden.

Weitere Bausteine einer Angular-Anwendung

Um einen allgemeinen Überblick über die Bausteine von Angular zu erhalten, habe ich wieder eine Folge des Happy Angular Podcasts von Sebastian Dorn gehört. Dort werden neben den Komponenten und Modulen auch noch weitere Bausteine beschrieben: Direktiven, Services, Router, Formulare und Pipes. Außerdem gibt es eine Folge, die sich ausschließlich mit Komponenten beschäftigt und einige interessante Details liefert.

Da ich nun verstanden habe, wie eine Angular-Anwendung aufgebaut ist und wie die einzelnen Dateien zusammen funktionieren, kann ich mich beim nächsten Mal weiteren Bausteine von Angular widmen.