Winkelentwurfsmuster: MVC, MVVM oder MV *?

70

Angular 1.x (AngularJS) folgte aufgrund seiner bidirektionalen Datenbindungsfunktionalität mehr oder weniger dem MV * -Designprinzip.

Angular2 verwendet eine komponentenbasierte Benutzeroberfläche, ein Konzept, das React-Entwicklern möglicherweise vertraut ist. In gewisser Weise verschwimmen die Angular 1.x-Controller und -Anweisungen in der neuen Angular 2-Komponente.

Dies bedeutet, dass es in Angular 2 keine Controller und keine Anweisungen gibt. Stattdessen verfügt eine Komponente über einen Selektor, der dem HTML-Tag entspricht, das die Komponente darstellt, und eine @ -View, um eine HTML-Vorlage für die zu füllende Komponente anzugeben.

Angular2 implementiert immer noch eine bidirektionale Datenbindung, besteht jedoch nicht aus Modellen, wenn ich beispielsweise eine habe @Component, die eine Liste von Artikeln anzeigt, und eine class, die das Artikelobjekt definiert:

class Article {
title: string;
link: string;
votes: number;

constructor(title: string, link: string, votes?: number){
    this.title = title;
    this.link = link;
    this.votes = votes || 0;
}

Dies würde im MVC-Muster als Modell betrachtet.

In Anbetracht dessen, welches Entwurfsmuster Angularfolgt am nächsten?

AnonDCX
quelle

Antworten:

73

Angular 2 ist nicht wirklich MVC (aber ich nehme an, Sie können Parallelen ziehen). Es ist komponentenbasiert. Lassen Sie mich erklären:

Winkel 1 ist MVC und MVVM (MV *). Angular 1 war aus mehreren Gründen wegweisend, aber einer der Hauptgründe war die Verwendung von Dependency Injection. Dies war ein neues Konzept im Vergleich zu anderen JS-Frameworks wie Backbone und Knockout.

Dann kam React heraus und veränderte die Front-End-Architektur vollständig. Das Front-End dachte mehr über andere Optionen als MVC und MVVM nach. Stattdessen entstand die Idee einer komponentenbasierten Architektur. Dies kann als eine der bedeutendsten Veränderungen der Front-End-Architektur seit HTML und JavaScript angesehen werden.

Angular 2 (und Angular 1.5.x) entschieden sich für den React-Ansatz und die Verwendung der komponentenbasierten Architektur. Sie können jedoch leichte Parallelen zwischen MVC, MVVM und Angular 2 ziehen, weshalb ich denke, dass dies etwas verwirrend sein kann.

Allerdings gibt es in Angular 2 keine Controller oder ViewModels (es sei denn, Sie erstellen sie von Hand). Stattdessen gibt es Komponenten, die aus einer Vorlage (wie einer Ansicht), Klassen und Metadaten (Dekoratoren) bestehen.

Die Modelle sind beispielsweise die Klassen, in denen die Daten gespeichert sind (z. B. ein Datenvertrag zum Speichern von Daten, die vom http-Dienst unter Verwendung von @ angle / http zurückgegeben werden). Wir können eine neue Klasse erstellen, die Methoden und Eigenschaften (Logik) hinzufügt, und dann das Modell und die Klasse zusammenführen. Dadurch wird so etwas wie ein ViewModel erstellt. Wir könnten dieses ViewModel dann in unserer Komponente verwenden.

Es ist jedoch nicht richtig, die Klasse oder den Dienst einer Komponente als ViewModel oder Controller zu bezeichnen. Die Komponente enthält die Vorlage und die Klasse. IMO ist es ein bisschen wie Liskovs Theorie - eine Ente ist keine Ente - versuchen Sie nicht, das MVC- oder MVVM-Muster in Komponenten zu zwingen, da diese unterschiedlich sind. Stellen Sie sich Angular 2 als Komponenten vor. Aber ich kann sehen, warum Menschen Parallelen ziehen, um ihr anfängliches Verständnis zu verbessern.

Angular verwendet auch Module, die Teil einer kommenden Version von JavaScript (ECMAScript 6) sind. Dies ist sehr leistungsfähig, da JavaScript immer Probleme mit Namespaces und der Code-Organisation hatte. Hier kommen Importe und Exporte zu Komponenten ins Spiel.

Nützliche Links:

https://medium.com/javascript-scene/angular-2-vs-react-the-ultimate-dance-off-60e7dfbc379c

Ist angle2 mvc?

Belfield
quelle
1
Der dritte Link ist defekt.
Emanuele Benedetti
Danke, habe gerade den 404 Link entfernt
Belfield
Ich bin nicht sicher, ob man davon ausgehen muss, dass die Komponentenhierarchie und die Struktur der einzelnen Komponenten exklusiv sind und nicht in Frameworks wie Ext JS. Auch wenn Angular nicht MVVM ist, war es für mich hilfreich, die Eigenschaften der an die Ansicht gebundenen Komponentenklasse als Ansichtsmodell zu betrachten, um Implementierungen als Änderungen des Zustands im Laufe der Zeit und nicht als Methoden oder prozedurale Manipulationen des DOM zu realisieren. Wie bei anderen MVVM-Frameworks hilft dies, den Spaghetti-Code und die allgemeine Komplexität zu reduzieren.
Trevor Karjanis
24

Sowohl Angular 1 als auch Angular 2 folgen dem MVC-Muster (Model, View, Controller).

In Winkel 1 ist HTML-Markup die Ansicht, Controller ist der Controller und der Dienst (wenn er zum Abrufen von Daten verwendet wird) ist das Modell.

In Angular 2 ist die Vorlage die Ansicht, die Klasse der Controller und der Dienst (wenn er zum Abrufen von Daten verwendet wird) das Modell.

Da Angular ein clientseitiges Framework ist, kann das MVC-Muster, dem Angular folgt, als MVVC (Model, View, View Controller) bezeichnet werden.

siva636
quelle
Kann ein bisschen mehr erklären warum MVVC? Vielen Dank.
Anatoly
14
Der Service ist nicht das Modell. Das Modell ist das Modell. Normalerweise gibt es in MVC-bezogenen Frameworks zwei Modelltypen: (1) Das Domänenmodell (2) Das Modell, das das Domänenmodell an die Ansicht anpasst (manchmal auch als ViewModel bezeichnet).
Gusgorman
1
@gusgorman Service ist das Modell in Angular 2+, da es Daten abruft, die in der MVC-Architektur ausgeführt werden sollen.
Don Dilanga
Service ist kein Modell, Service ist nur eine injizierbare Logik, die Daten abrufen kann oder nicht.
Gerardo Buenrostro González
ungültige Antwort :(
Guido Mocha
13

Ich bin nicht besonders begeistert von der Verwendung der M ** -Notation (irgendwie missbraucht und neblig). Meiner Meinung nach ist der einfachste und effektivste Weg, dies auszudrücken, der in Angular2:

Die Klasse (in Ihrem Fall Artikel) repräsentiert das Modell

Die Komponente führt die Ansicht (in der Vorlage) und den Controller (die Typescript-Logik) zusammen.

Ich hoffe, es hilft

Picci
quelle
5

MVC und MVVM mit AngularJS

MVC-Entwurfsmuster

Zunächst ist das MVC-Entwurfsmuster nicht AngularJS-spezifisch. Sie müssen dieses Muster in vielen anderen Programmiersprachen gesehen / implementiert haben.

Das MVC-Entwurfsmuster ist in AngularJS zu sehen, aber bevor wir darauf eingehen, wollen wir uns ansehen, was das MVC-Entwurfsmuster alles beinhaltet:

Modell: Modell ist nichts als Daten. Ansicht: Ansicht repräsentiert diese Daten. Controller: Controller vermittelt zwischen den beiden.

Wenn wir in MVC Änderungen an der Ansicht vornehmen, wird diese im Modell nicht aktualisiert. In AngularJS haben wir jedoch gehört, dass es eine sogenannte 2-Wege-Bindung gibt, und diese 2-Wege-Bindung ermöglicht das MVVM-Entwurfsmuster.

MVVM beinhaltet grundsätzlich 3 Dinge:

Modellansicht View Model Controller wird im MMVM-Entwurfsmuster tatsächlich durch View Model ersetzt. Das Ansichtsmodell ist nichts anderes als eine JavaScript-Funktion, die wiederum einem Controller ähnelt und für die Aufrechterhaltung der Beziehung zwischen Ansicht und Modell verantwortlich ist. Der Unterschied besteht jedoch darin, dass, wenn wir etwas in der Ansicht aktualisieren, es im Modell aktualisiert wird, alles im Modell geändert wird wird in der Ansicht angezeigt, was wir als 2-Wege-Bindung bezeichnen.

Aus diesem Grund sagen wir, dass AngularJS dem MVVM-Entwurfsmuster folgt.

Ashish Kamble
quelle
1
Falsch: "Modell ist nichts als Daten." Tatsächlich handelt es sich um Daten, Metadaten, Geschäftslogik und Datenbankschnittstelle. Falsch: "Controller vermittelt zwischen den beiden." In der Tat macht der Controller so etwas nicht. Die Ansicht reagiert auf Änderungsereignisse im Modell ohne Aufforderung durch die Steuerung. Die Aufgabe des Controllers beginnt mit Benutzerereignissen, die Sie nicht einmal erwähnen.
IAM_AL_X
1
Der Status "Modell anzeigen ist nichts anderes als eine JavaScript-Funktion, die wieder wie ein Controller ist" ist falsch
Guido Mocha
1
siehe @Belfield Antwort ...
Guido Mocha
@ GuidoMocha bitte bearbeiten und aktualisieren Antworten, ich genehmige es gerne.
Ashish Kamble
4

Meiner bescheidenen Meinung nach können Sie in Angular 2 mit MVVM entwickeln, wenn Sie einige Konventionen verwenden möchten:

  1. Eine Komponente enthält die Ansicht (die Vorlage) und das Ansichtsmodell (die Klasse).
  2. Sie vermissen nur das Modell und können es als normale TypeScript-Klasse erstellen und als Konstruktorparameter an das Ansichtsmodell übergeben.

Die Technologie ist der in PRISM und WPF verfügbaren ziemlich ähnlich und dort entwickeln Sie alles mit MVVM (wenn Sie möchten).

Ignacio Soler Garcia
quelle
2

In Angular (ausgenommen Version 2 und höher) verwenden wir die Datenbindungsfunktion. Diese Datenbindungsfunktion erzwingt das MVVM-Muster in der ng-Anwendung, da der Controller in diesem Fall eine Bindung zwischen V & M verursacht (Änderungen an der Ansicht führen zu Änderungen im Modell und umgekehrt). In der MVC-Terminologie können wir also 'C' durch 'VM' ersetzen, was 'MVVM' ergibt.

Jai Narayan
quelle