Winkelentwurfsmuster: MVC, MVVM oder MV *?

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?

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?

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.

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

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.

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).

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.