Ist Angular 2+ MVVM?
Dezember 06, 2016
Das habe ich jetzt an verschiedenen Stellen gelesen: „Angular ist MVVM“ oder „Angular ist MVC“. Hm, ist es das? Ich glaube nicht.
Eigentlich lässt sich die Frage nicht mit einem einfachen Ja oder Nein beantworten. Zunächst einmal ist Angular 2+ kein MVC! Ehrlich gesagt, ich weiß nicht, wie die Leute manchmal auf so etwas kommen.
Dies ist ein Affiliate Link. Wir erhalten möglicherweise eine Provision für Käufe, die über diesen Link getätigt werden.
Stattdessen folgt es einer komponentenorientierten Architektur. Es ist also auch kein MVVM. Allerdings implementiert Angular viele der Konzepte von MVVM. Man kann also sagen, dass Angular dem MVVM-Prinzip folgt, wenn es nötig ist. Um die Gemeinsamkeiten zu erkennen, werden wir uns das Prinzip im Kontext von Angular-Komponenten genauer ansehen.
„Sehr schön… aber was ist MVVM?“
MVVM steht für Model, View, ViewModel. Es ist ein Software Design Pattern und soll die Lesbarkeit und Wartbarkeit des Quellcodes erhöhen, indem es den Code in die 3 oben genannten Abschnitte unterteilt. Wie sieht es also in Angular aus?
Model
Ein Model ist ein Container, der die Struktur einer Entität definiert und dem objektorientierten Prinzip folgt. Es wird durch Ihren Inhalt definiert. Wenn Sie also ein Model für einen User verwenden wollen, könnte es so aussehen.
undefined
class User { name:string; email:string; address:string;}
In Angular verwenden wir normalerweise Typescript-Klassen oder -Schnittstellen, um das Model zu definieren. Models sind jedoch einfach nur alte Javascript-Objekte.
Beachten Sie, dass Models keine Logik enthalten sollten. Die gesamte Logik sollte im ViewModel definiert werden.
View
Die View ist die visuelle Schicht der Anwendung, einschließlich aller visuellen Elemente, die auf dem Bildschirm des Benutzers angezeigt werden. Im Falle von Angular 2 wird die View in einem Template definiert. Diese Templates sind in HTML und CSS geschrieben, enthalten aber auch Angular-spezifische Elemente. Diese Templates sind über Data-Binding mit dem ViewModel verbunden. Templates sind immer Teil einer Komponente.
ViewModel
Das ViewModel ist ein abstrakter Teil der View und verwaltet die Modelle und Eigenschaften, die auf dem Bildschirm angezeigt werden. Es enthält die gesamte Logik für die Seite. View und ViewModel sind oft über Datenbindung miteinander verbunden. Das bedeutet, dass Änderungen im ViewModel, z.B. an einer Eigenschaft, sofort auf die View übertragen werden und z.B. den auf dem Bildschirm angezeigten Text verändern. In Angular wird das ViewModel durch den Typescript-Teil einer Komponente dargestellt.
So haben wir herausgefunden, dass eine Angular-Komponente aus zwei Teilen besteht. Template (View) und einer Klasse (ViewModel). Hier ist ein Überblick über Angular-Komponenten.
Angular-Komponenten
Eine grundlegende Komponente in Angular besteht aus zwei Teilen. Der erste Teil ist die Komponentendefinition. Sie ist umgeben von @Component({}). Innerhalb dieser Definition kann man Eigenschaften der Komponente angeben, wie z.B. einen Selektor, der es uns ermöglicht, unsere Komponente über HTML zu platzieren.
In diesem Block definieren wir auch die Ansicht. Sie können dies tun, indem Sie HTML inline hinzufügen oder eine zusätzliche Datei verwenden. Ich bevorzuge in der Regel die zweite Option für eine bessere Lesbarkeit und eine klare Trennung dieser beiden Elemente. So könnte dieser Teil aussehen:
undefined
@Component({ selector:"nav-bar", templateUrl:"./component.html", styleUrls: })
Der zweite Teil ist die entsprechende Klasse zur Implementierung der Logik. Diese Klasse befindet sich in der gleichen Datei direkt unter der Definition. Es ist im Grunde eine normale Typescript-Klasse, also kann man dort machen, was man will.
undefined
export class NavBar{}
Um unsere Komponente auf dem Bildschirm zu zeigen, müssen wir sie an eine html-Ansicht anhängen, die bereits angezeigt wird. Der Startpunkt ist die app.component.html. Indem wir also
undefined
<nav-bar></nav-bar>
schreiben, wird unsere Komponente der Ansicht hinzugefügt. In Angular können Komponenten nicht von selbst da sein, sondern müssen immer einem Modul hinzugefügt werden. Dazu fügen wir unsere Komponente einfach in den Deklarationsabschnitt des übergeordneten Moduls ein. Das Root-Modul befindet sich in der app.module.ts
undefined
@NgModule({ declarations: })
Alles, was in der Html-Datei der Komponente definiert ist, wird innerhalb des Selector-Tags der Komponente platziert und somit auf dem Bildschirm angezeigt.
Dies ist ein Affiliate-Link. Wir erhalten möglicherweise eine Provision für Käufe, die über diesen Link getätigt werden.
Um mehr über Komponenten zu erfahren, lesen Sie meinen ausführlichen Leitfaden über Komponenten in Angular.