Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

t3n 47

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

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

Die schematische Darstellung des Informationsflusses in einer Angular-App mit ihren verschiedenen Komponenten und Data-Services (Grafik: Google)

Das JavaScript-Framework Angular eignet sich besonders, um Single-Page-Applikationen umzusetzen. Tipps und Lösungen für funktionierende Konventionen zur Datenmodellierung in Teams.

Wer Angular effizient nutzen will, sollte sich mit den Datenquellen und -flüssen seiner Applikation sowie deren Synchronisierung beschäftigen. Dazu sollten Angular-Entwickler der Aufbau und die Komponenten ihrer Applikation bekannt sein. Wenn saubere Konventionen zur Datenmodellierung nämlich fehlen, kommt es spätestens dann zu Problemen, wenn ein Team eine App programmiert, bei der die gleichen Informationen an unterschiedlichen Stellen auftauchen oder modelliert werden sollen.

Die Angular-Komponenten

Die wichtigsten Bausteine einer Angular-Applikation sind die Komponenten. Eine Angular-App gleicht einem ganzen Baum von Komponenten. Die so genannte Root-Komponente verzweigt sich dabei in Sub-Komponenten zu einer baumförmigen Programmstruktur. Die Flexibilität dieses Konstrukts können Entwickler zusätzlich erhöhen, wenn sie zur Laufzeit Komponenten ein- oder aushängen. Darüber hinaus kann der Angular-Router den Status einer Applikation in der URL abbilden und basierend darauf Komponentenbäume an bestimmten Stellen der Applikation einhängen.

Doch zurück zur Komponente: Diese besteht aus einem Template, einer Komponentenklasse und optional einem Stylesheet. Das Template ist für die Strukturierung der Benutzeroberfläche und die Präsentation der Informationen zuständig. Die Komponentenklasse stellt die View-Logik zur Verfügung, die zum Betrieb der Oberfläche erforderlich ist. Die eigentliche Business-Logik einer Applikation lagern Entwickler in separaten Services aus. Das sind spezielle Klassen, die sich mittels Dependency Injection in Komponenten einbinden lassen und eine Interaktion über definierte Schnittstellen bieten.

Eine einfache Angular-Komponente:

@Component({
 selector: ‘app’,
 templateUrl: ‘app.component.html’
})
class AppComponent {
 public title = ‘Hello World’;
}

Eine wichtige Anforderung an Komponenten ist, dass sie von anderen Komponenten so unabhängig wie möglich sein sollten. Das reduziert die Kopplung zwischen den Komponenten, erhöht also ihre Wiederverwendbarkeit und erleichtert insgesamt das Testen.

Informationsflüsse

Ein sehr einfaches Beispiel zeigt den Informationsfluss einer Applikation ganz gut: Eine Auflistung aller Benutzer-Accounts. Die erste Komponente, die zur Lösung dieser Aufgabe notwendig ist, ist die Liste selbst. Innerhalb der Komponentenklasse holen Angular-Entwickler durch die Dependency Injection eine Instanz des http-Services und starten eine GET-Anfrage an den Server, mit der die entsprechenden Daten eingeholt werden.

Für die Darstellung der Datensätze sorgt eine Kindkomponente, die die App in einer Schleife mehrfach wiedergibt. Doch: Wie kommen die Informationen in die Kindkomponenten? An dieser Stelle kommt das Property-Binding von Angular ins Spiel. Im Template der Elternkomponente weisen Entwickler dazu einfach der Eigenschaft „account“ der Kindkomponente dem Objekt aus der Elternkomponente zu.

Implementierung der Elternkomponente:

@Component({
 selector: 'account-list',
 template: `
 <ul>
 <account-item let *ngFor="let account of accounts" [account]="account">
 </ul>
 `,
 styleUrls: ['./list.component.css']
})
export class ListComponent implements OnInit {
 private accounts: Account[];
 constructor(private http: Http) {}
 ngOnInit() {
 this.http.get('/accounts')
 .map(res => res.json())
 .subscribe((accounts: Account[]) => {
 this.accounts = accounts;
 });
 }
}

Um in der Kindkomponente einen Zugriff auf das Objekt hinter der account-Eigenschaft zu erhalten, muss man in der Komponentenklasse angeben, dass es sich hierbei um eine Input-Eigenschaft handelt. Dies geschieht über den @Input-Decorator. Dadurch können Entwickler diese Eigenschaft als gewöhnlichen Teil ihrer Komponente behandeln. Allerdings gelangt das Objekt nicht als Kopie, sondern als Referenz in die Kindkomponente. Das bedeutet, dass sich jede Änderung in der Kindkomponente auch auf die Elternkomponente auswirkt.

Das JavaScript-Framework Angular wird von Google bereitgestellt. Es eignet sich besonders für Single-Page-Applikationen. (Screenshot: Angular)

Das JavaScript-Framework Angular wird von Google bereitgestellt. Es eignet sich besonders für Single-Page-Applikationen.
Diese impliziten Änderungen der Informationen in einer Applikation ist nicht erstrebenswert, da dies die Elternkomponente nicht benachrichtigt. Besser ist es, für den Informationsfluss von der Kindkomponente zur Elternkomponente ein eventbasiertes Output-Binding zu verwenden. So erhält die Elternkomponente bei einer Änderung eine Benachrichtigung und Entwickler können einen entsprechenden Eventlistener erstellen.

Sebastian Springer
Sebastian Springer

ist bei der MaibornWolff GmbH als Senior Software Architect tätig. Neben seiner Arbeit als JavaScript-Engineer ist er Dozent für JavaScript und Sprecher auf zahlreichen Konferenzen.

Finde einen Job, den du liebst

Eine Reaktion
gonzalezandresloan
gonzalezandresloan

Hallo,
Bist du ein Geschäftsmann oder eine Frau? Wenn in irgendeinem finanziellen Durcheinander oder benötigen Sie Geld, um Ihr eigenes Geschäft zu beginnen? Sie brauchen Kredit, um die Schulden zu bezahlen? Wenn Sie eine niedrige Kredit-Score und Bank / andere lokale Finanzinstitute haben Schwierigkeiten, Darlehen zu bekommen? Persönliche Darlehen, Business Expansion, Entrepreneurship und Training, Schuldenkonsolidierung, harte Geld Darlehen. Nun, Sie brauchen ein Darlehen oder Finanzierung aus irgendeinem Grund. Wir bieten Darlehen mit einem niedrigen Zinssatz von 2%, kontaktieren Sie uns bitte mit einem ständigen Begleiter von Kredit durch diese;

Gonzalez Andres Finanzgesellschaft
E-Mail: gonzalezandresloan@gmail.com
Webseite: gonzalezandresblog.wordpress.com

Antworten
Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Hinweis

Du hast gerade auf einen Provisions-Link geklickt und wirst in Sekunden weitergeleitet.

Bei Bestellung auf der Zielseite erhalten wir eine kleine Provision – dir entstehen keine Mehrkosten.


Weiter zum Angebot