Angular – Struktureller Aufbau eines Modules

Datum

28.05.2018

Dieser Beitrag wurde verfasst von:

Andy Kurz

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.

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.

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.

“open-timer” – Template
“open-timer” – Template

Erfahren Sie mehr

Office 365 Groups als Evolution von SharePoint?
Blog
Blog

Office 365 Groups als Evolution von SharePoint?

Zusätzlich zu SharePoint erlauben die Office 365 Groups es mir als Anwender, schnell und einfach neue Gruppen anzulegen und selbständig Benutzer hinzuzufügen.

Das neuste Mitglied der Office 365 Familie: Delve
Blog
Blog

Das neuste Mitglied der Office 365 Familie: Delve

Microsoft legt nach: Mit Delve startet eine neue Form des Suchens und des Auffinden von Dokumenten und Informationen.

Ich bin im Flow! – Eine Übersicht zu Microsoft Flow
Blog
Blog

Ich bin im Flow! – Eine Übersicht zu Microsoft Flow

Die Power Platform wird aktuell von Microsoft sehr stark gepusht. Zeit, sich mit dem Potenzial der einzelnen Komponenten zu beschäftigen. Heute: Flow.

Sprechen Sie LUIS? – Der intelligente Chat-Bot im Praxistest
Blog
Blog

Sprechen Sie LUIS? – Der intelligente Chat-Bot im Praxistest

Mit LUIS, der Sprach- und Texterkennungssoftware von Microsoft, und dem Bot Framework von Azure haben wir eine Lösung für den IT-Support entwickelt.

novaCapta auf der Fachtagung für Interne Revision
Event
Event

novaCapta auf der Fachtagung für Interne Revision

Das Expertenteam der novaCapta präsentiert am 15. und 16. November ihre innovative Audit Management Lösung auf dem DIIR-Kongress in Dresden. Besuchen Sie unsere...

PowerApps – Neuigkeiten, Übersicht, Tipps & Tricks
Blog
Blog

PowerApps – Neuigkeiten, Übersicht, Tipps & Tricks

Neues aus der Welt von PowerApps

Nov
07
Webcast mit Microsoft: Das Intranet zu Ende gedacht
Webinar
Webinar

Webcast mit Microsoft: Das Intranet zu Ende gedacht

Am 07. November findet erneut eines unserer Webinare gemeinsam mit Mircosoft statt. Das Thema dieses Mal: Das Intranet zu Ende gedacht – Die Informationszentral...

Mit der HoloLens ein Stück Berlin nach Köln holen
News
News

Mit der HoloLens ein Stück Berlin nach Köln holen

Im Rahmen eines zweitägigen Hackathons haben sich einige Mitarbeiter der novaCapta der Microsoft HoloLens und dem Thema Mixed Reality gewidmet. Dabei haben wir...

May
04
novaCapta auf der dotnet Cologne
Event
Event

novaCapta auf der dotnet Cologne

In nächster Nachbarschaft zu unserem Kölner Büro findet am 04. und 05. Mai die dotnet Cologne im KOMED statt. Wir von der novaCapta sind auch dabei.

Azure Functions: Der Webservice ohne Webserver
Blog
Blog

Azure Functions: Der Webservice ohne Webserver

Azure Functions als Authentifizierungs-Helfer für clientseitige Lösungen mit 3rd Party APIs

Paket Dependency Manager für .NET
Blog
Blog

Paket Dependency Manager für .NET

Paket ist ein Dependency Manager für .NET, welcher es sich zum Ziel gesetzt hat einige Probleme von NuGet zu beheben.

DevOps und Container
Blog
Blog

DevOps und Container

DevOps an sich ist nicht an eine Technologie gebunden, jedoch haben sich Container-Technologien und DevOps als Verwandte im Geiste gefunden.