How-To

Datenmodellierung in Angular: Die Architektur einer Angular-Applikation richtig gestalten

Seite 2 / 3

Für die Implementierung stellt Angular alles nötige bereit. Die Anwender des Frameworks erzeugen in der Komponentenklasse der Kindkomponente zunächst eine Eigenschaft des Typs „EventEmitter“. Die Objekte dieses Typs stellen die emit-Methode bereit, mit der die Nachricht über Veränderungen an die Elternkomponente verschickt wird. Die Eigenschaft markieren Entwickler mit dem @Output-Decorator. Dadurch können sie im Template der Elternkomponente über das Eventbinding von Angular einen Eventhandler an das Event der Kindkomponente anbinden und eine entsprechende Routine auslösen.

Implementierung der Kindkomponente:

@Component({
 selector: 'account-item',
 template: '<li>{{account.name}}</li>'
})
export class ItemComponent {
 @Input() account: Account;
 @Output() accountChanged = new EventEmitter();
}

Data Services

Mit dem bisher vorgestellten Property- und Eventbinding lässt sich der Informationsfluss durch einen Komponentenbaum sehr gut abbilden. Häufig werden die Informationen in einer Applikation jedoch nicht in direkt zusammenhängenden Komponenten dargestellt oder – noch schwieriger – die Informationen sollen an mehreren Stellen modifiziert werden können. Hier können die Informationen entweder über eine gemeinsame Elternkomponente fließen oder es kommen Data Services zum Einsatz. Je nach Umfang der Applikation kann die gemeinsame Elternkomponente relativ weit entfernt liegen. Das bedeutet, dass Entwickler die Informationen durch eine große Anzahl von Komponenten leiten müssen. Dieser Ansatz ist also in vielen Fällen keine Option.

Ein Data Service hat eine event-basierte Architektur, sodass Entwickler Komponenten an verschiedenen Stellen einer Applikation bei diesem Service registrieren und über Aktualisierungen informiert werden können. Dabei müssen sie dieses Event-System nicht von Grund auf erfinden, sondern können auf die RxJS-Bibliothek zurückgreifen und sich so einiges an Arbeit sparen.

Ihre Implementierung hat den Vorteil, dass man Informationen nur einmal in einer Applikation vorhalten muss und sich an dieser zentralen Stelle auch gleich um die Server-Kommunikation kümmern kann. Außerdem bleiben die Informationen immer konsistent, da es eine „Single Source of Truth“ gibt.

Der Data Service ist zunächst ein ganz gewöhnlicher Angular Service, den Entwickler in ihrem Applikationsmodul registrieren müssen, um ihn über die Dependency Injection jedem Modul zur Verfügung zu stellen. Der Service exponiert ein „Behaviour Subject“, über das die Komponenten die aktualisierten Daten erhalten. Dieses Subject soll lediglich die Daten konsumieren. Für Änderungen stellt der Service eine Reihe von Methoden bereit.

Über diese können Angular-Entwickler beispielsweise Datensätze hinzufügen, verändern oder löschen. Neben dieser einheitlichen Schnittstelle für den Datenzugriff speichert der Data Service auch die Informationen auf dem Server – und das spart wiederum Arbeit.

Die Schnittstelle mit dem Service besteht aus verschiedenen Methoden, mit denen sich Datensätze hinzufügen oder verändern lassen. Sie sorgen zunächst für die Persistenz der Informationen zum Server und lösen dann auf dem „Behavior Subject“ ein Event aus, das alle Subscriber benachrichtigt.

Angular Data-Service:

@Injectable()
export class AccountService {
 private accounts: Account[];
 public accounts$: BehaviorSubject<Account[]>;
 constructor(private http: Http) {}
 addAccount(account: Account) {
 this.http.post('/todo', todo).subscribe((res) => {
 this.accounts.push(account);
 this.accounts$.next(this.accounts);
 });
 }
}

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Schreib den ersten Kommentar!

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung