Le modèle de conception n’est rien d’autre qu’un moyen maintenable et réutilisable d’écrire du code qui peut être appliqué à des problèmes courants. Il existe de nombreux modèles de conception tels que MVC, MVVM, DI, etc. Cela dépend du problème quel modèle de conception doit être suivi.

Ce blog met l’accent sur les modèles de conception MVC et MVVM en référence à AngularJS.

Commençons:

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 MVC peut être vu dans AngularJS, mais avant d’entrer dans cela, voyons ce que tout le modèle de conception MVC inclut:

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

Voyons le code ci-dessous:

<!DOCTYPE html><html ng-app><head> <title>MVC</title> <script type="text/javascript" src="angular.min.js"></script></head><body ng-controller="TextController"><p></p></body><script> function TextController($scope) { $scope.sampleText = 'This is a demo!'; }</script></html>

Dans l’extrait ci-dessus, notre texte est représenté par la variable « sampleText ». C’est notre modèle. Le contrôleur met à jour la vue en affichant les données sur la vue en remplaçant «  » par la valeur de la variable sampleText. C’est le contrôleur qui gère la relation entre notre modèle et la vue qui est le HTML.

Dans MVC si nous apportons des modifications à la vue, elle n’est pas mise à jour dans le modèle. Mais dans AngularJS, nous avons entendu dire qu’il existe quelque chose appelé liaison à 2 voies et que cette liaison à 2 voies active le modèle de conception MVVM. MVVM comprend essentiellement 3 choses:

  1. Modèle
  2. Vue
  3. Modèle de vue

Le contrôleur est en fait remplacé par le modèle de vue dans le modèle de conception MMVM. Le modèle de vue n’est rien d’autre qu’une fonction JavaScript qui ressemble à nouveau à un contrôleur et 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 quelque chose en vue, il est mis à jour dans le modèle, change quoi que ce soit dans le modèle, il apparaît en vue, ce que nous appelons la liaison à 2 voies.

Voyons l’exemple ci-dessous:

<!DOCTYPE html><html ng-app><head> <title>Number Divisor</title> <script type="text/javascript" src="angular.min.js"></script></head><body><form ng-controller="DivisionController"> <label>Number :</label> <input name="number" ng-change="divisionNeeded()" ng-model="data.number"> <label>Number entered by User :</label> <br> <label>Divisor :</label> <input name="divisor" ng-change="divisionNeeded()" ng-model="data.divisor"> <label>Number entered by User :</label> <br> <label>Result :</label> </form></body><script> function DivisionController($scope) { $scope.data = {number: 0, divisor: 0, result: 0}; $scope.divisionNeeded = function () { $scope.data.result = $scope.data.number / $scope.data.divisor; } }</script></html>

Le code ci-dessus contient 2 boîtes de saisie qui prennent le nombre et un diviseur pour diviser ce nombre. Le résultat de la division est affiché devant l’étiquette « Résultat ».

De plus, tout ce qui est entré dans ces deux boîtes de saisie est affiché devant la boîte de saisie elle-même. Ce code montre très clairement le modèle de conception MVVM en JavaScript, ici vous voyez comment:

MVVM.jpg

Le diagramme ci-dessus sépare le code en Modèle, Vue et Modèle de vue.

Je commence d’abord par la vue. Nous savons que cette vue est notre code HTML, nous la mettons donc à jour en entrant ‘6’ dans la zone de texte du nombre et ‘3’ dans la zone de texte du diviseur. Dès qu’une modification est apportée à la vue, le modèle de vue en prend connaissance et ces valeurs sont ensuite mises à jour dans le modèle. En dehors de cela, le travail principal est que le modèle de vue est la division, le nombre est divisé par le diviseur et le résultat est attribué aux données.variable de résultat. Ici, depuis ‘ données.result’ est notre modèle, et comme il y a un changement ici de sa valeur initiale de ‘0’ à ‘2’ maintenant, la vue est mise à jour et le résultat de la division est affiché sur le code HTML.

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

Suivez-moi

Github

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.