Angular2: MVC, MVVM ou MV *?
Angular One suivait plus ou moins le principe de conception MVV * en raison de sa fonctionnalité de liaison de données bidirectionnelle.
Angular2 est en train d’adopter une interface utilisateur à base de composants, un concept familier pour les développeurs de React. En un sens, les contrôleurs et les directives Angular 1.x dans la nouvelle Angular 2.
Cela signifie que dans Angular 2, il n'y a pas de contrôleurs ni de directives. À la place, un composant a un sélecteur qui correspond à la balise html qu'il représentera et un @View pour spécifier un modèle HTML. pour le composant à peupler.
Angular2 implémente toujours la liaison de données bidirectionnelle mais ne consiste pas en modèles, par exemple si j'ai un @Component qui affiche une liste d’articles et un 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;
}
Ceci, dans le modèle MVC, serait considéré comme le modèle.
Donc, compte tenu de cela, quel modèle de conception Angular suit-il le plus près?
Angular 2 n'est pas vraiment MVC (mais je suppose que vous pouvez tracer des parallèles). C'est basé sur les composants. Laissez-moi expliquer:
Angular 1 est MVC et MVVM (MV *). Angular 1 était révolutionnaire pour plusieurs raisons, mais l’une des raisons principales était son utilisation de Dependency Injection. C’était un nouveau concept comparé à d’autres JS Frameworks comme Backbone et Knockout.
Alors React est sorti et a complètement transformé l’architecture frontale. Il a incité Front End à penser davantage aux options autres que MVC et MVVM. Il a plutôt créé l’idée de l’architecture par composants. l’une des plus importantes transformations de l’architecture frontale depuis HTML et JavaScript.
Angular 2 (et Angular 1.5.x) a décidé d’adopter l’approche de React et d’utiliser une architecture à base de composants. Toutefois, vous pouvez tracer un léger parallèle entre MVC, MVVM et Angular = 2, c'est pourquoi je pense que cela peut être un peu déroutant.
Cela dit, il n'y a pas de Contrôleurs ni de ViewModels dans Angular 2 (à moins que vous ne les fabriquiez à la main). Au lieu de cela, il existe des composants constitués d'un modèle (comme une vue), de Classes et MetaData (Décorateurs).
Par exemple, les modèles sont les classes qui contiennent les données (par exemple, un contrat de données pour conserver 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 pourrions ensuite utiliser ce ViewModel dans notre composant.
Mais appeler une classe ou un service d'un composant, 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 de forcer le motif MVC ou MVVM dans les composants, car ils sont différents. Pensez à Angular 2 en tant que composants. Mais je peux voir pourquoi les gens feraient des parallèles pour aider leur compréhension initiale.
Angular utilise également Modules, qui fait partie d’une version à venir 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 ici que les importations et les exportations entrent dans les composants.
Liens utiles:
https://medium.com/javascript-scene/angular-2-vs-react-the-ultimate-dance-off-60e7dfbc379c
Angular 1 & Angular 2 suivent le modèle MVC (Modèle, Vue, Contrôleur).
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.
Étant donné que Angular est une structure côté client, le modèle MVC Angular suivant peut être appelé en tant que MVVC (Modèle, Vue, Contrôleur de vues).
Je n’aime pas trop la notation M ** (abusée et brumeuse). Quoi qu’il en soit, à mon avis, le moyen le plus simple et le 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 ça aide
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 devez avoir vu/implémenté ce modèle dans de nombreux autres langages de programmation.
Le modèle de conception de MVC est visible dans AngularJS, mais avant d’entrer dans les détails, voyons ce que tout modèle de conception de MVC comprend:
Modèle: Le modèle n'est rien que des données. Vue: La vue représente ces données. Contrôleur: Le contrôleur sert d'intermédiaire entre les deux.
Dans MVC, si nous modifions la vue, celle-ci n'est pas mise à jour dans le modèle. Mais dans AngularJS, nous avons entendu dire qu’il existe un système de liaison bidirectionnelle et que cette liaison bidirectionnelle active le modèle de conception MVVM.
MVVM comprend essentiellement 3 choses:
Vue modèle Vue modèle Le contrôleur de modèle est effectivement remplacé par Voir modèle dans le modèle de conception MMVM. View Model n’est autre chose qu’une fonction JavaScript qui ressemble encore à un contrôleur et qui est responsable du maintien de la relation entre vue et modèle, mais la différence est que, si nous mettons à jour quoi que ce soit dans la vue, il est mis à jour dans le modèle, s'affiche, ce que nous appelons la liaison bidirectionnelle.
C'est pourquoi nous disons que AngularJS suit le modèle de conception de MVVM.
À mon humble avis, vous pouvez développer Angular 2 en utilisant MVVM si vous souhaitez utiliser certaines conventions:
- Un composant contient la vue (le modèle) et le modèle de vue (la classe).
- Vous ne manquez que le modèle et vous pouvez le créer en tant que classe TypeScript normale et le transmettre au modèle de vue en tant que paramètre constructeur.
La technologie est assez similaire à celle disponible dans PRISM et WPF et vous développez tout avec MVVM (si vous le souhaitez).
Dans Angular (à l'exception des versions 2 et supérieures), nous utilisons la fonctionnalité de liaison de données. Cette fonctionnalité de liaison de données applique le modèle MVVM dans une application car le contrôleur, dans ce cas, crée une liaison entre V & M (les modifications apportées à la vue entraînent une modification du modèle, et inversement).