Читать книгу Angular - Ferdinand Malcher - Страница 31

Hauptkomponente der Anwendung

Hier sehen wir eine TypeScript-Klasse mit einer Besonderheit: dem Decorator @Component(). Hier wird später die Logik unserer Komponente untergebracht. Außerdem finden wir im selben Ordner die Datei app.component.html und eine CSS-Datei mit demselben Namen. Die HTML-Datei beinhaltet das Template der Komponente, also den Teil, der nachher tatsächlich im Browser zu sehen ist. In der CSS-Datei werden Stylesheets untergebracht, die zu dieser Komponente gehören.

Probieren Sie ein wenig herum: Bearbeiten Sie doch einmal das Template und sehen Sie, wie die Anwendung auf der rechten Seite automatisch aktualisiert wird.

Die genaue Bedeutung aller Angaben in der AppComponent betrachten wir bald. Wir werden im weiteren Verlauf dieses Buchs immer wieder mit Komponenten arbeiten und alle Aspekte klären.

Eine Angular-Anwendung startet jedoch nicht automatisch, nur weil eine passende Komponente vorhanden ist. Stattdessen muss die Verarbeitung der ersten Komponente explizit angestoßen werden. Dieser Schritt wurde bereits erledigt: Im AppModule finden wir unter bootstrap den Eintrag für unsere Hauptkomponente.

Die Hauptkomponente ins HTML einbinden

Wenn Sie die TypeScript-Klasse der AppComponent aufmerksam betrachtet haben, ist Ihnen sicher auch der Eintrag selector im Decorator aufgefallen. Mit diesem Eintrag können wir festlegen, in welchen Elementen unsere Komponente dargestellt wird. Und erinnern Sie sich? In der Datei index.html war bereits ein Element mit dem Namen <my-app></my-app> vorhanden. Dieses Element passt zum Selektor my-app der AppComponent. Der zuvor enthaltene Text »loading« verschwindet und wird durch den Inhalt der Komponente ausgetauscht.