Dateien im App-Ordner

Bevor wir uns mit der Hauptkomponente beschäftigen, betrachten wir die Dateien im App-Ordner und deren Aufgaben in der Anwendung.

Beim Erstellen eines neuen Angular-Projekts beginnt alles im App-Ordner. Hier befinden sich die Kern-Dateien, die die Struktur der Anwendung definieren. In diesem Abschnitt untersuchen wir den Inhalt dieses Ordners und betrachten die Hauptkomponente genauer, die als Einstiegspunkt für die Benutzeroberfläche dient.

Hauptkomponente

Nun betrachten wir die Hauptkomponente, AppComponent, genauer. Diese Komponente wird standardmäßig beim Ausführen des Befehls ng new erstellt und dient als Wurzelkomponente der Anwendung.

In Angular werden Komponenten mithilfe von Dekoratoren erstellt. Ein Dekorator ist eine spezielle Funktion, die einer Klasse zusätzliche Funktionalität hinzufügt.

Im @Component-Dekorator werden wichtige Einstellungen festgelegt, die das Aussehen und Verhalten der Komponente bestimmen. Im Folgenden eine Übersicht:

Zentrale Elemente in der Datei app.component.ts:

• Selector (selector) – definiert, wie die Komponente im HTML benannt wird. In diesem Fall kann sie als <app-root></app-root> verwendet werden;

• Imports (imports) – eine Liste von Abhängigkeiten, die für die Funktionsfähigkeit der Komponente erforderlich sind. In diesem Beispiel wird RouterOutlet verwendet, das die Anzeige von Inhalten basierend auf der Route steuert;

• Template (templateUrl) – der Pfad zur HTML-Datei (app.component.html), die das Template der Komponente enthält;

• Styles (styleUrls) – der Pfad zur CSS-Datei (app.component.css), die das Erscheinungsbild der Komponente definiert.

Verwendung der Hauptkomponente

Der Prozess beginnt in der Datei index.html, die sich im Ordner src befindet. Sie enthält keinen typischen Inhalt, sondern nur eine Grundstruktur mit einem speziellen Tag:

Dieses <app-root>-Tag entspricht dem selector in app.component.ts. Wenn Angular initialisiert wird, findet es dieses Tag und ersetzt es durch den Inhalt aus app.component.html.

Fazit

Die Hauptkomponente ist das Herzstück der Anwendung. Sie wird zuerst geladen und verwaltet das zentrale Template. Alles, was auf dem Bildschirm angezeigt wird, läuft über sie. Das <app-root>-Tag in index.html ist der Einstiegspunkt, über den Angular die Seite betritt.