Modèle de conception Angular : MVC, MVVM ou MV* ?

Question

Angular 1.x (AngularJS) suivait plus ou moins le principe de conception MV* en raison de sa fonctionnalité de liaison de données bidirectionnelle.

Angular2 adopte une interface utilisateur basée sur les composants, un concept qui pourrait être familier aux développeurs React. En un sens, les contrôleurs et directives d'Angular 1.x se fondent dans le nouveau composant d'Angular 2.

Cela signifie que dans Angular 2, il n'y a pas de contrôleurs ni de directives. Au lieu de cela, un composant possède un sélecteur qui correspond à la balise html que le composant représentera et un @View pour spécifier un modèle HTML à remplir par le composant.

Angular2 implémente toujours la liaison de données bidirectionnelle mais ne consiste pas en des modèles ; par exemple, si j'ai une @Component qui affiche une liste d'articles et une class qui définit l'objet article :

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;
}

Dans le modèle MVC, cela serait considéré comme le modèle.

En considérant ceci, quel modèle de conception fait Angular suivre le plus proche ?

Answer 1

Angular 2 n'est pas vraiment MVC (mais je suppose que vous pouvez établir des parallèles). Il est basé sur les composants. Laissez-moi vous expliquer :

Angular 1 est MVC et MVVM (MV*). Angular 1 était révolutionnaire pour plusieurs raisons, mais l'une des principales était l'utilisation de l'injection de dépendances. C'était un nouveau concept par rapport à d'autres frameworks JS comme Backbone et Knockout.

Puis React est apparu et a complètement transformé l'architecture frontale. Il a fait réfléchir le front-end à d'autres options que MVC et MVVM. Il a plutôt créé l'idée d'une architecture basée sur les composants. Cela peut être considéré comme l'une des transformations les plus importantes de l'architecture frontale depuis HTML et JavaScript.

Angular 2 (et Angular 1.5.x) a décidé de suivre l'approche de React et d'utiliser l'architecture basée sur les composants. Cependant, vous pouvez établir de légers parallèles entre MVC, MVVM et Angular 2, c'est pourquoi je pense que cela peut être un peu confus.

Cela dit, il n'y a pas de contrôleurs ou de modèles de vues dans Angular 2 (à moins que vous ne les fabriquiez vous-même). Au lieu de cela, il existe des composants, qui sont constitués d'un modèle (comme une vue), de classes et de métadonnées (décorateurs).

Par exemple, les modèles sont les classes qui contiennent les données (par exemple, un contrat de données pour contenir les données renvoyées par le service http en utilisant @angular/http). Nous pouvons créer une nouvelle classe qui ajoute des méthodes et des propriétés (logique), puis fusionner le modèle et la classe. Cela crée quelque chose comme un ViewModel. Nous pouvons ensuite utiliser ce ViewModel dans notre composant.

Mais appeler la classe d'un composant ou un service un ViewModel ou un contrôleur n'est pas vraiment correct. Le composant contient le modèle et la classe. IMO, c'est un peu comme la théorie de Liskov - un canard n'est pas un canard - n'essayez pas d'imposer le modèle MVC ou MVVM dans les composants car ils sont différents. Pensez à Angular 2 comme à des composants. Mais je peux comprendre que les gens fassent des parallèles pour faciliter leur compréhension initiale.

Angular utilise également les modules, qui font partie d'une prochaine version de JavaScript (ECMAScript 6). C'est très puissant car JavaScript a toujours eu des problèmes avec les espaces de noms et l'organisation du code. C'est là que les importations et les exportations entrent en jeu dans les composants.

Liens utiles :

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

Est-ce qu'angular2 est mvc ?

Answer 2

Angular 1 et Angular 2 suivent tous deux le modèle MVC (Model, View, Controller).

Dans Angular 1, le balisage HTML est la vue, le contrôleur est le contrôleur et le service (lorsqu'il est utilisé pour récupérer des données) est le modèle.

Dans Angular 2, le modèle est la vue, la classe est le contrôleur et le service (lorsqu'il est utilisé pour récupérer des données) est le modèle.

Angular étant un framework côté client, le modèle MVC suivi par Angular peut être appelé MVVC (Model, View, View Controller).

Answer 3

Je ne suis pas très enthousiaste à l'idée d'utiliser la notation M** (un peu abusée et brumeuse). Quoi qu'il en soit, à mon avis, la façon la plus simple et la plus efficace de le dire est que dans Angular2 :

la classe (Article dans votre cas) représente le modèle

Le composant fusionne la vue (dans le modèle) et le contrôleur (la logique Typescript).

J'espère que cela vous aidera

Answer 4

MVC et MVVM avec AngularJS

Modèle de conception MVC

Pour commencer, le modèle de conception MVC n'est pas spécifique à AngularJS, vous avez certainement vu/mis en œuvre ce modèle dans de nombreux autres langages de programmation.

Le modèle de conception MVC peut être vu dans AngularJS, mais avant d'entrer dans le vif du sujet, voyons ce que comprend le modèle de conception MVC :

Modèle : Le modèle n'est rien d'autre que des données. Vue : La vue représente ces données. Contrôleur : Le contrôleur sert de médiateur entre les deux.

En MVC, si nous faisons un changement dans la vue, il n'est pas mis à jour dans le modèle. Mais dans AngularJS, nous avons entendu dire qu'il y a quelque chose appelé liaison à double sens et cette liaison à double sens permet le modèle de conception MVVM.

MVVM comprend essentiellement 3 choses :

Modèle Voir Modèle de vue Le contrôleur est en fait remplacé par le modèle de vue dans le modèle de conception MMVM. View Model n'est rien d'autre qu'une fonction JavaScript qui est à nouveau comme un contrôleur et qui est responsable du maintien de la relation entre la vue et le modèle, mais la différence ici est que si nous mettons à jour quoi que ce soit dans la vue, il est mis à jour dans le modèle, et si nous changeons quoi que ce soit dans le modèle, il apparaît dans la vue, ce que nous appelons la liaison à double sens.

C'est pourquoi nous disons qu'AngularJS suit le modèle de conception MVVM.

Answer 5

À mon humble avis, vous pouvez développer en Angular 2 en utilisant MVVM si vous le souhaitez en utilisant certaines conventions :

1. Un composant contient la vue (le modèle) et le modèle de vue (la classe).
2. Il ne vous manque que le modèle et vous pouvez le créer comme une classe TypeScript normale et le passer au viewmodel comme paramètre de constructeur.

La technologie est assez similaire à celle disponible dans PRISM et WPF et là, vous développez tout en utilisant MVVM (si vous le souhaitez).