Explicación del patrón MVC en AngularJS

El patrón MVC o Modelo Vista Controlador es un patrón de diseño que permite desarrollar mejores aplicaciones. Los desarrolladores pensaron en dicho patrón para crear AngularJS. El patrón MVC consta de un modelo, una vista y un controlador. Esto es a nivel de organización y define la estructura de una aplicación.

Modelo

El modelo representa la estructura de datos de una aplicación de software. Es un error común pensar que el modelo es la base de datos que está detrás de la aplicación, sin embargo, es mucho mejor ver el modelo como el cuerpo de código que representan los datos.

Vista

La vista es el cuerpo de código que representa la interfaz del usuario, es decir, todo aquello que el usuario puede ver en la pantalla e interactuar. Una aplicación normalmente tiene múltiples vistas, cada una representa alguna parte del modelo.

Controlador

El controlador se puede ver como el intermediario entre la vista y el modelo. El modelo y la vista nunca se relacionan directamente.

¿Por qué MVC?

Aunque Angular emplee dicho patrón, se puede aplicar a otro lenguaje de programación. El beneficio principal es poder añadir o modificar con relativa facilidad algún aspecto de tu aplicación.

Dicho beneficio es posible porque el patrón MVC aplica el principio de separación de preocupaciones que consiste en dividir una aplicación en distintas partes, cada una tratando una preocupación diferente.

Por ejemplo, la vista no está atado al modelo, por tanto es muy sencillo diferenciar los componentes y cambiar de uno al otro.

Otra de las ventajas es facilitar el testeo de la aplicación a medida que se va desarrollando evitando sorpresas de última hora y pudiendo encontrar los fallos con más rapidez.

Existen varias razones para usar MVC pero la más común es permitir que la aplicación sea mucho más organizada y esté bien estructurada. Esto permite al programador realizar un mantenimiento de la aplicación. Por esto último, los usuarios se benefician del patrón ya que la aplicación será menos propensa a tener bugs e incluso si estos surgen se podría solventar rápidamente.

Este patrón permite construir aplicaciones robustas que a pesar de tener que dar un esfuerzo extra al principio, puede ahorrar muchas horas a largo plazo.

Ejemplo de MVC en AngularJS

Voy a mostrar un ejemplo de cómo funciona MVC en AngularJS. No será un ejemplo complicado lo cual servirá para aclarar ideas de este patrón. Aviso de que comenzaré explicando cómo sería en versiones de Angular menores a 1.3.

Comenzaré con el modelo. Hay que tener en cuenta que el modelo representa cualquier dato asique un array puede valer perfectamente.

var usuarios = ['Usuario1', 'Fry', 'Prueba'];

1	var usuarios = ['Usuario1', 'Fry', 'Prueba'];

En un caso real, este array estaría compuesto por datos obtenidos de alguna base de datos pero para este ejemplo no es preciso complicarlo.

La siguiente parte será la vista, que es la representación de los datos del modelo

<h2>Numero total de usuarios {{misUsuarios.length}}</h2>

1	<h2>Numero total de usuarios {{misUsuarios.length}}</h2>

Esto es básicamente código HTML y una expresión en AngularJS. Aunque hay que considerar que la vista no se conecta directamente con el modelo sino con una variable global creada desde el controlador que comentaré ahora.

Ahora lo que realmente importa y hace que funcione todo, el controlador, que será MiControlador (El nombre empieza con mayúscula y cada palabra tiene la primera letra en mayúscula).

function MiControlador{
    var usuarios = ['Usuario1', 'Fry', 'Prueba'];
    $scope.misUsuarios = usuarios;
}

function MiControlador{

var usuarios = ['Usuario1', 'Fry', 'Prueba'];

$scope.misUsuarios = usuarios;

}

Asignamos los datos del modelo a la propiedad misUusuarios que está en el objeto $scope. Este objeto permite mostrar los datos del modelo en la vista. Es proporcionado por el controlador gracias al framework de Angular y lo único que tenemos que hacer es asignarle los datos que queremos que se muestren en la vista.

Y en la parte del controlador es precisa la parte que cambia en versiones posteriores a la 1.3. Para poder usar el controlador es preciso definirlo a través de un modulo el cual explicaré en otro post.

angular.module("aplicacion", []).controller("MiControlador", function($scope) {
    var usuarios = ['Usuario1', 'Fry', 'Prueba'];
    $scope.misUsuarios = usuarios;
});

angular.module("aplicacion", []).controller("MiControlador", function($scope) {

var usuarios = ['Usuario1', 'Fry', 'Prueba'];

$scope.misUsuarios = usuarios;

});

En angular.module especifico el nombre del módulo («aplicación») y dentro de la función controller defino el nombre del controlador y la función anónima el cual se le pasa el objeto $scope.

El código completo sería el siguiente

<!DOCTYPE html>
<html>
<head>
  <script src="angular.min.js"></script>
  <script>
      angular.module("aplicacion", []).controller("miControlador", function($scope) {
          var usuarios = ['Usuario1', 'Fry', 'Prueba'];
          $scope.misUsuarios = usuarios;
      });
  </script>
</head>
 
<body ng-app="aplicacion" ng-controller="miControlador">

  <h2>Numero total de usuarios {{misUsuarios.length}}</h2>
 
</body>
</html>

<!DOCTYPE html>

<html>

<head>

angular.module("aplicacion", []).controller("miControlador", function($scope) {

var usuarios = ['Usuario1', 'Fry', 'Prueba'];

$scope.misUsuarios = usuarios;

});

</script>

</head>

<h2>Numero total de usuarios {{misUsuarios.length}}</h2>

</body>

</html>

Cómo comente en la introducción, ng-app indica desde donde comienza la aplicación con Angular. En este ejemplo se llama desde el <body> para que afecte a toda la página y además llamamos al controlador miControlador. Sin estos 2 atributos, el código no funcionaría.

Y hasta aquí el patrón , espero que os haya sido de ayuda. A seguir picando 🙂