Struktureller Aufbau eines Angular Modules

Dieser Blogbeitrag beschäftigt sich mit dem strukturellen Aufbau eines Angular Modules und der Kommunikation der einzelnen Komponenten. In unserem Beispiel geht es um die Auflistung von Timern, die mit bestimmten Funktionen wie Start, Stop, Speichern und Löschen ausgestattet sind.

Layout

Aufbau

Grundsätzlich sollte vor dem Programmieren ganz genau klar sein, wie die Anwendung strukturiert wird. Einzelne Komponenten sollten klein gehalten werden, das dient zum einen der Übersichtlichkeit und zum anderen sind die Zuständigkeiten ganz klar voneinander getrennt.
Das Module „time-tracking“ beinhaltet mehrere Komponenten, welche wir in den Ordern „components“ packen. Die „open-timer-list“-Komponente hat wiederum eine weitere Komponente („open-timer“) welche wir in einen gesonderten Ordner packen. So bleibt die Anwendung übersichtlich und man kann anhand der Struktur auch erkennen wo welche Komponente verwendet wird.

Aufbau TimeTracking Module

Kommunikation

Kommen wir also zur Kommunikation zwischen den Komponenten. In Angular lassen sich relativ einfach Custom-Events umsetzen, über die dann die Kommunikation erfolgt.
In unserem Beispiel wollen wir einen Timer aus der Timer-Liste löschen. Die eigentliche Funktion zum Löschen des Timers gehört natürlich in unsere „open-timer-list“-Komponente, doch der Button, der die Funktion auslöst, gehört in die „open-timer“-Komponente.
In folgendem Screenshot sieht man den Aufbau unserer „open-timer-list“-Komponente. Wir erzeugen im Constructor zwei Timer und stellen die Methode „onDelete“ bereit, welche ausgeführt wird, sobald unser Custom-Event getriggert wird.

Component “open-timer-list”

Das Template zu unserer Komponente sieht wie folgt aus und ruft pro Timer unsere „open-timer“-Komponente auf und übergibt in den [ ] – Input-Klammern den Timer. Das „delete“-Event wird in die ( ) – Output-Klammern geschrieben. Sobald dieses Event getriggert wird, wird unsere Funktion „onDelete()“ aufgerufen.

“open-timer-list” – Template

Nun kommen wir zu unserer „open-timer“-Komponente. Hier sehen wir einmal als @Input unseren Timer und zum anderen delete als @Output vom Typ Event Emitter und genau mit diesem Event Emitter definieren wir unser Custom-Event „delete“.
Klicken wir auf unseren Delete-Button, wird die Funktion „deleteTimer“ aufgerufen, welche dann unser Event triggert und den Timer als Übergabeparameter mitgibt.

“open-timer” – Template

 

Component “open-timer” 

Wird nun das Event “delete” getriggert, wird in unserer “open-timer-list”-Component das Event “onDelete” aufgerufen und löscht somit den Timer.

By |2018-05-28T10:51:32+02:00May 28th, 2018|Sonstiges, Web application|0 Comments

About the Author:

technology Specialist

Leave a Reply

%d bloggers like this:

novaCapta verwendet Cookies, um die Funktionalität dieser Website zu verbessern. Durch die Nutzung dieser Seite stimmen Sie der Verwendung von Cookies zu. Weiterlesen

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close