Il design Pattern non è altro che un modo gestibile e riutilizzabile di scrivere codice che può essere applicato a problemi comuni. Esistono numerosi modelli di progettazione come MVC, MVVM, DI ecc. Dipende dal problema che quale modello di progettazione deve essere seguito.

Questo blog enfatizza i modelli di progettazione MVC e MVVM con riferimento a AngularJS.

Iniziamo:

MVC Design Pattern

Per cominciare, MVC design pattern non è specifico per AngularJS, è necessario aver visto / implementato questo pattern in molti altri linguaggi di programmazione.

MVC design pattern può essere visto in AngularJS, ma prima di entrare in questo vediamo cosa tutto fa MVC design pattern include:

  1. Model: Il modello non è altro che dati.
  2. Vista: Vista rappresenta questi dati.
  3. Controller: Controller media tra i due.

Vediamo il codice qui sotto:

<!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>

Nel frammento di cui sopra, il nostro testo è rappresentato dalla variabile “sampleText”. Questo è il nostro modello. Il controller sta aggiornando la vista visualizzando i dati sulla vista sostituendo “” con il valore della variabile sampleText. È il controller che sta gestendo la relazione tra il nostro modello e la vista che è l’HTML.

In MVC se apportiamo modifiche alla vista, non viene aggiornato nel modello. Ma in AngularJS, abbiamo sentito che esiste qualcosa chiamato binding a 2 vie e questo binding a 2 vie consente il pattern di progettazione MVVM. MVVM include fondamentalmente 3 cose:

  1. Model
  2. View
  3. View Model

Il controller è effettivamente sostituito da View Model nel modello di progettazione MMVM. View Model non è altro che una funzione JavaScript che è di nuovo come un controller ed è responsabile del mantenimento della relazione tra view e model, ma la differenza qui è che se aggiorniamo qualcosa in vista, viene aggiornato nel modello, cambia qualcosa nel modello, si presenta in vista, che è ciò che chiamiamo binding a 2 vie.

Vediamo l’esempio riportato di seguito:

<!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>

Il codice precedente contiene 2 caselle di input che prendono il numero e un divisore per dividere quel numero. Il risultato della divisione è mostrato davanti all’etichetta ‘Risultato’.

Inoltre, tutto ciò che viene immesso in queste due caselle di input viene visualizzato di fronte alla casella di input stessa. Questo codice mostra il modello di progettazione MVVM in JavaScript molto chiaramente, qui vedi come:

MVVM.jpg

Il diagramma sopra segrega il codice in Modello, Visualizza e Visualizza modello.

Sto iniziando con view. Sappiamo che view è il nostro HTML, quindi lo aggiorniamo inserendo ‘6 ‘nella casella di testo numero e’ 3′ nella casella di testo divisore. Non appena viene apportata qualsiasi modifica nella vista, View Model viene a conoscenza di esso e questi valori vengono quindi aggiornati nel modello. Oltre a questo, il lavoro principale è che sta accadendo nel modello di vista è la divisione, il numero viene diviso per il divisore ed è il risultato viene assegnato a ‘dati.risultato ‘ variabile. Ecco, poiche ‘ dati.result ‘ è il nostro modello, e poiché qui c’è un cambiamento dal suo valore iniziale di ‘0’ a ‘2’ ora, la vista viene aggiornata e il risultato della divisione viene mostrato nell’HTML.

Questo è il motivo per cui diciamo che AngularJS segue il modello di progettazione MVVM.

Seguimi

Github

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.