Um sicher mit Modulen zu experimentieren, sollte eine Kopie des bestehenden Projekts erstellt werden. Diese Änderungen dienen ausschließlich Übungszwecken und beeinflussen das Originalprojekt nicht. In späteren Kapiteln liegt der Fokus wieder auf dem Erstellen von Anwendungen mit Standalone-Komponenten.

Erstellen eines Moduls für die TaskComponent

In diesem Schritt wird ein Modul für die TaskComponent erstellt. Das Modul deklariert die Komponente, eine zugehörige Direktive und eine Pipe.

Zum Generieren eines Moduls in Angular gibt es einen speziellen CLI-Befehl:

Nachdem die Datei task.module.ts im Ordner task erstellt wurde, kann sie implementiert werden.

Dieses Modul deklariert die TaskComponent, die zugehörige Direktive und eine benutzerdefinierte Pipe. Es importiert das CommonModule, um strukturelle Direktiven wie *ngIf und *ngFor zu ermöglichen. Die TaskComponent wird exportiert, sodass sie in anderen Modulen wiederverwendet werden kann.

Erstellen eines Moduls für die TaskListComponent

In diesem Schritt wird ein Modul für die TaskListComponent erstellt. Erstellen Sie ein neues Modul im Ordner task-list:

Nachdem die Datei task-list.module.ts im Ordner task-list erstellt wurde, können wir sie implementieren

Dieses Modul deklariert TaskListComponent, das für die Darstellung einer Aufgabenliste verantwortlich ist. Es importiert TaskModule, um auf die Aufgabenkomponente zuzugreifen, sowie FormsModule für Funktionen wie Aufgaben-Erstellungsformulare. Die Komponente wird exportiert, sodass sie in anderen Modulen verwendet werden kann.

Erstellen des Root-Moduls

In diesem Schritt wird das Hauptmodul definiert, das als Ausgangspunkt der gesamten Anwendung dient.

Jede Angular-Anwendung benötigt ein Root-Modul, das Angular mitteilt, wie die App gestartet werden soll. Dieses Modul vereint alle notwendigen Bestandteile: eingebaute Angular-Funktionen, eigene Module und die Root-Komponente.

Ein neues Modul im Ordner app erstellen:

Das Flag --flat weist die Angular CLI an, die Moduldatei ohne das Anlegen eines separaten Ordners zu erstellen.

Dieses Modul dient als Einstiegspunkt der Anwendung. Es importiert das BrowserModule, das für den Betrieb von Angular im Browser erforderlich ist, sowie das TaskListModule, das die Hauptfunktionalität zur Aufgabenverwaltung bereitstellt. Die AppComponent wird als Root-Komponente festgelegt, um die Anwendung zu starten.

Konfiguration des Einstiegspunkts

In diesem Schritt wird der Einstiegspunkt der Anwendung so angepasst, dass sie mit dem Root-Modul statt mit einer Standalone-Komponente gestartet wird.

Öffnen Sie main.ts und ersetzen Sie den Inhalt durch Folgendes:

Dieser Code startet die Anwendung mit AppModule. Diese Konfiguration veranschaulicht die modulare Architektur: Die Anwendung ist in Module unterteilt, die jeweils ihre Komponenten, Direktiven, Pipes, Services und mehr kapseln.

Die modulare Architektur in Angular hilft dabei, die Anwendung in logische Blöcke zu gliedern, wodurch der Code skalierbar, gut strukturiert und wiederverwendbar wird.