Der Code für die Initialisierung der Daten soll ausgeführt werden, wenn die Komponente geladen wird. Man könnte dafür den Konstruktor der Klasse verwenden. In Angular kommt allerdings die Methode ngOnInit() zum Einsatz, wie im Listing 6–16 zu sehen ist. Diese Methode wird automatisch aufgerufen, wenn die Komponente vollständig initialisiert ist. Sie ist einer der sogenannten Lifecycle-Hooks von Angular. Details dazu finden Sie im Kasten auf Seite 99. Damit ist unsere Listenkomponente komplett!
ngOnInit() statt Konstruktor – die Lifecycle-Hooks von Angular
Eine Angular-Komponente hat einen definierten Lebenszyklus. Sie wird zunächst initialisiert und es werden ihre Bestandteile gerendert. Wird die Komponente nicht mehr benötigt, wird sie abgebaut und die Ressourcen werden freigegeben.
Mit den Lifecycle-Hooks von Angular können wir gezielt in diesen Lebenszyklus einer Komponente eingreifen. Wechselt die Komponente in einen bestimmten Zustand, können wir Aktionen an dieser Stelle im Ablauf ausführen. Im Beispiel haben wir die Methode ngOnInit() eingesetzt. Sie wird automatisch ausgeführt, wenn die Komponente geladen wurde. Damit die Methode korrekt definiert wird, sollte die Komponentenklasse immer das Interface OnInit implementieren.
Es existieren noch weitere Lifecycle-Hooks, auf die wir an dieser Stelle aber gar nicht näher eingehen wollen. Stattdessen widmen wir uns dem Lebenszyklus von Komponenten ab Seite 766 ausführlicher.
Merke: Statt dem Konstruktor der Klasse sollten wir zur Initialisierung immer die Methode ngOnInit() einsetzen.
Listenkomponente in die Anwendung einbinden
app.component.html leeren
Damit wir die neue Komponente sehen, muss sie in den Bereich eingebunden werden, der aktuell sichtbar ist: die Hauptkomponente AppComponent. Hier ist momentan noch das Beispiel-Template vorhanden, das von der Angular CLI generiert wurde. Wir können dieses Template getrost entfernen, denn wir wollen ja unsere eigene Anwendung entwickeln. Wir löschen also den gesamten HTML-Code aus der Datei app.component.html.
Anschließend fügen wir dort das HTML-Element <bm-book-list> </bm-book-list> ein. Es wird von Angular durch die BookListComponent ersetzt, denn die Komponente besitzt dafür den passenden Selektor bm-book-list. Auf diese Weise binden wir die Komponente in die Anwendung ein, und sie ist im Browser sichtbar.
<bm-book-list></bm-book-list>
Listing 6–17 Template der Hauptkomponente AppComponent (app.component.html)
Ein Präfix verwenden
Die Selektoren von Komponenten und Direktiven sollten in Angular immer mit einem Präfix versehen werden. Das Präfix soll vor allem dafür sorgen, dass Elemente der Anwendung gut von nativen HTML-Elementen unterschieden werden können. Wir beugen damit Konflikten mit anderen Elementen vor, die eventuell dieselbe Bezeichnung verdient hätten.
Beim Anlegen des Projekts mit der Angular CLI haben wir die Option --prefix=bm verwendet. Diese Angabe finden wir auch tief in der Datei angular.json wieder. Wenn wir Komponenten oder Direktiven mit der Angular CLI anlegen, wird das Präfix automatisch im Selektor verwendet. Diese Einstellung können wir in der angular.json auch ändern, sie gilt dann allerdings nur für neu angelegte Komponenten.
Bootstrapping
Damit die Anwendung funktioniert, muss die Hauptkomponente AppComponent von Angular gestartet werden. Die notwendige Anpassung hat die Angular CLI bereits für uns vorgenommen. Im AppModule in der Datei src/app/app.module.ts ist die AppComponent in der Eigenschaft bootstrap in den Metadaten des Moduls eingetragen.
Anwendung starten
Wir können die Anwendung nun mit dem Befehl ng serve starten. Rufen wir die URL im Browser auf, wird die Liste der Bücher angezeigt.
Abb. 6–2 Die Buchliste funktioniert.
Was haben wir gelernt?
Angular bricht die Template-Syntax in mehrere Konzepte auf. Mit den verschiedenen Bindings wird der Datenfluss zwischen Komponente und Template klar definiert. Hilfsmittel wie Pipes und Direktiven erleichtern uns dabei die Arbeit mit den Elementen im Template. Mit einem Blick auf ein Template ist bereits schnell erkennbar, wie sich eine Komponente verhält.
Komponenten sind die wichtigsten Bausteine einer Anwendung.
Eine Komponente besteht immer aus einer TypeScript-Klasse mit Metadaten und einem Template.
Komponenten werden an Elemente des DOM-Baums gebunden. Das ausgewählte Element wird das Host-Element der Komponente.
Für die Auswahl der DOM-Elemente wird in der Komponente ein CSS-Selektor festgelegt.
Angular verfügt über eine eigene Template-Syntax und eingebaute Direktiven, z. B. ngFor und ngIf.
Alle Bausteine der Anwendung werden mittels @NgModule() in Angular-Module organisiert. Wir nutzen Imports und Exports, um die Bausteine zu verknüpfen.
Eine Komponente muss immer in den declarations eines Moduls registriert werden.
Demo und Quelltext: https://ng-buch.de/bm4-it1-comp
Defekte Unit-Tests
Die Angular CLI legt für jede Komponente und für viele weitere Bausteine eine Unit-Test-Datei an. Die enthaltenen Tests sind trivial und dienen lediglich als Einstiegsbeispiel. Wenn wir allerdings die im Buch beschriebenen Änderungen am Sourcecode vornehmen, so werden die automatisch angelegten Tests fehlschlagen. Ein Test prüft zum Beispiel, ob der Text »book-monkey app is running!« erscheint. Da wir die Überschrift entfernt haben, ist die Prüfung ebenso obsolet geworden und kann entfernt werden.
In anderen Fällen reicht es aus, die Konstruktoren mit sogenannten Stubs zu versorgen bzw. mittels NO_ERRORS_SCHEMA unbekannte Eigenschaften an Elementen zu erlauben. Da es sich bei Softwaretests um ein anspruchsvolles Thema handelt, widmen wir uns in einem dedizierten Abschnitt den Unit-Tests (ab Seite 483). Dort stellen wir die verschiedenen Testing-Strategien ausgiebig vor. Zusätzlich können Sie die mit dem QR-Code markierten Demos des Book-Monkeys studieren. In den Repositorys werden Sie zusätzliche Unit-Tests, Integrations- und Oberflächentests finden, auf
