no es más que una forma de escribir código que se puede mantener y reutilizar y que se puede aplicar a problemas comunes. Hay numerosos patrones de diseño como MVC, MVVM, DI, etc. Depende del problema qué patrón de diseño debe seguirse.

Este blog hace hincapié en los patrones de diseño MVC y MVVM con referencia a AngularJS.

Comencemos:

Patrón de diseño MVC

Para empezar, el patrón de diseño MVC no es específico de AngularJS, debe haber visto / implementado este patrón en muchos otros lenguajes de programación.

El patrón de diseño MVC se puede ver en AngularJS, pero antes de entrar en eso, veamos qué hace el patrón de diseño MVC incluye:

  1. Modelo: El modelo no es más que datos.
  2. Vista: La vista representa estos datos.
  3. Controlador: El Controlador media entre los dos.

Veamos el código a continuación:

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

En el fragmento de código anterior, nuestro texto está representado por la variable «sampleText». Este es nuestro modelo. El controlador actualiza la vista mostrando los datos de la vista reemplazando «» por el valor de la variable sampleText. Es el controlador el que gestiona la relación entre nuestro modelo y la vista que es el HTML.

En MVC si hacemos algún cambio en la vista, no se actualiza en el modelo. Pero en AngularJS, hemos oído que hay algo llamado encuadernación de 2 vías y esta encuadernación de 2 vías habilita el patrón de diseño MVVM. MVVM básicamente incluye 3 cosas:

  1. Model
  2. View
  3. View Model

El controlador se reemplaza por View Model en el patrón de diseño MMVM. View Model no es más que una función JavaScript que de nuevo es como un controlador y es responsable de mantener la relación entre view y model, pero la diferencia aquí es, si actualizamos cualquier cosa en view, se actualiza en model, cambia cualquier cosa en model, se muestra en view, que es lo que llamamos enlace de 2 vías.

Veamos el ejemplo que se muestra a continuación:

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

El código anterior contiene 2 cajas de entrada que lleva a número y un divisor para dividir ese número. El resultado de la división se muestra delante de la etiqueta «Resultado».

Además, lo que sea de entrada en esos dos cuadros de entrada se muestra delante de la propia caja de entrada. Este código muestra el patrón de diseño MVVM en JavaScript muy claramente, aquí puede ver cómo:

MVVM.jpg

El diagrama anterior separa el código en Modelo, Vista y Modelo de Vista.

Estoy empezando con la vista. Sabemos que view es nuestro HTML, por lo que lo actualizamos ingresando ‘6’ en el cuadro de texto número y ‘3’ en el cuadro de texto divisor. Tan pronto como se realiza cualquier cambio en la vista, el Modelo de vista lo conoce y estos valores se actualizan en el Modelo. Aparte de esto, el trabajo principal es que está sucediendo en el Modelo de Vista es la división, el número se divide por el divisor y el resultado se asigna a ‘ datos.variable de resultado. Aquí, desde ‘ data.resultado ‘es nuestro modelo, y como hay un cambio aquí de su valor inicial de’ 0 ‘a’ 2 ‘ ahora, view se actualiza y el resultado de la división se muestra en el HTML.

Por eso decimos que AngularJS sigue el patrón de diseño MVVM.

sígueme

Github

Deja una respuesta

Tu dirección de correo electrónico no será publicada.