Hands of man using online virtual app on mobile phone. Millennial guy chatting on smartphone, using banking services, reading text message, typing, shopping, making call, browsing internet. Close up

Angular – Struktureller Aufbau eines 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.

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.

Screenshot Code: Aufbau „open-timer-list“-Komponente

Screenshot Code: Timer erzeugen und die Methode „onDelete“ einstellen

“open-timer” – Template

novaCapta: Ihr Partner für die digitale Transformation mit Microsoft Technologien

Blog 22.03.18

Angular 5 Custom Filter in Angular Material Data-Table

In diesem Blogbeitrag will ich euch darlegen, wie man einen Custom Filter für das Angular Material Data-Table Modul erstellt.

Blog 20.12.18

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.

Happy male business team leader talking to employees at corporate meeting, discussing work project, sharing jokes, laughing. Positive mentor training diverse group of interns, having fun

Blog 16.11.23

Tipps & Tools für eine erfolgreiche interne Kommunikation

Firmenevents bergen Herausforderungen für die interne Kommunikation. In unserem Blogbeitrag zeigen wir, wie und mit welchen Tools novaCapta diese Aufgabe gemeistert hat.

Training_Anfrage

Das Einmaleins zum Aufbau eines Intranets

Ein Intranet muss sorgfältig geplant, regelmäßig betreut und gezielt weiterentwickelt werden. Unser Einmaleins enthält die wichtigsten Organisationstipps für den Aufbau eines neuen Intranets.

Blog 28.06.18

Angular Route-Guards

Was versteht man eigentlich unter Angular Route-Guards?

Referenz

Aufbau von Infrastruktur und Middleware Plattform

Ein deutscher Onlinehändler hat eine Infrastruktur mit dem WebSphere Enterprise Service Bus (ESB) als zentrales Element etabliert. Entwickler der X-INTEGRATE trugen zur Qualitätsverbesserung bei.

Lösung

Knowledge Management erfolgreich aufbauen

Wir unterstützen Sie mit unserem Fachwissen dabei, eine optimal auf Ihr Unternehmen abgestimmte, lebendige Wissensplattform zu erstellen.

Closeup of woman finger touching on mobile phone screen. Asian woman using smartphone while sitting at table with laptop computer at home office, online shopping, mobile banking, internet payment

Offering

Aufbau einer Endpoint Management Strategie

Endpunkte stellen den Ausgangspunkt für Zusammenarbeit und Integration in die IT-Infrastruktur dar. Um das Beste herauszuholen, ist ein ganzheitliches Endpoint Management essenziell.

Blog

9 Tipps & Tricks für Angular

Angular ist unter Webentwicklern ein beliebtes Framework für das Programmieren von Web-, Desktop- und mobilen Anwendungen. Neun Tipps & Tricks für Angular-Einsteiger und Profis.

Blog 16.05.24

Angular 18: Das nächste Kapitel

Angular 18 bringt Leistungsverbesserungen, neue Features und Entwicklerwerkzeuge mit sich. Erfahren Sie mehr über Zoneless Angular, verbesserte Bundling-Strategien und Barrierefreiheitsverbesserungen.

Blog 30.10.19

Testen von Angular Anwendungen mit Cypress

Cypress ist ein End-to-End Testing Framework, mit dem man einfache Tests erstellen kann, die in Echtzeit ausgeführt werden. Mit Cypress kann man auch Snapshots von den einzelnen Schritten während der Testausführung sehen. Tests können schnell erstellt werden, ohne dass bestimmte Server oder Driver benötigt werden.

Training_Master

Modul 1: IT-Security-Beauftragter

Training_Anfrage

Modul 1: IT-Security-Beauftragter

Training_Master

Modul 2: IT-Security-Manager

Training_Anfrage

Modul 2: IT-Security-Manager

Training_Master

Angular – Struktureller Aufbau eines Modules

Aufbau

Kommunikation

Erfahren Sie mehr

Angular 5 Custom Filter in Angular Material Data-Table

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

Tipps & Tools für eine erfolgreiche interne Kommunikation

Angular Grundlagen

Angular Vertiefung

Angular Vertiefung

Angular Grundlagen

Das Einmaleins zum Aufbau eines Intranets

Angular Route-Guards

Aufbau von Infrastruktur und Middleware Plattform

Knowledge Management erfolgreich aufbauen

Aufbau einer Endpoint Management Strategie

9 Tipps & Tricks für Angular

Angular 18: Das nächste Kapitel

Testen von Angular Anwendungen mit Cypress

Modul 1: IT-Security-Beauftragter

Modul 1: IT-Security-Beauftragter

Modul 2: IT-Security-Manager

Modul 2: IT-Security-Manager

Modul 3: IT-Security-Auditor

Bleiben Sie mit dem TIMETOACT GROUP Newsletter auf dem Laufenden!