Aprendiendo AngularJS (V). El modelo.
Como ya dijimos en otras entregas, el lenguaje AngularJS sigue el patrón de arquitectura software Modelo Vista Controlador. Este patrón de arquitectura divide las aplicaciones en tres partes, el modelo donde reside la lógica de la aplicación, la vista que se corresponde con el interfaz y el controlador que es el que hace de interfaz entre la vista y el modelo.
Con AngularJS podemos vincular datos de la vista y del modelo de forma bidireccional de tal manera que cualquier cambio realizado en la vista se verá reflejado en el modelo y viceversa.
En el siguiente ejemplo puedes ver cómo hemos realizado una conexión de datos bidireccional entre el modelo y la vista:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var app = angular.module('myfpschoolapp', []);
app.controller('myfpschoolcontrol', function($scope) {
$scope.lugar = "mancha";
});
</script>
<body ng-app="myfpschoolapp" ng-controller="myfpschoolcontrol">
Lugar: <input ng-model="lugar">
<p>En un lugar de la {{lugar}} de cuyo nombre no quiero acordarme...</p>
</body>
</html>
En primer lugar puedes observar que nuestra aplicación AngularJS ocupa todo el body:
<body ng-app="myfpschoolapp" ng-controller="myfpschoolcontrol">
Vinculamos al body la aplicación y el controlador asociado a la misma (myfpschoolcontrol);
Aparte de eso, en nuestro modelo creamos la variable lugar la cual luego nos servirá para vincularla a un elemento HTML:
$scope.lugar = "mancha";
Como puedes ver, inicializamos el valor de la variable para que de esa forma el elemento input HTML tome dicho valor al crearse.
Es hora de crear el elemento HTML y vincularlo a la variable definida en el modelo:
Lugar: <input ng-model="lugar">
A partir de aquí, podemos hacer uso en la aplicación de nuestra variable lugar utilizando dobles llaves:
{{lugar}}
Ejecuta el ejemplo anterior y prueba que funciona correctamente.
AngularJS proporciona validación para los campos de nuestras aplicaciones (number, required o email) mediante la directiva ng-show.
Realiza un ejemplo que valide un campo numérico, un email y un campo obligatorio.
Añade al ejemplo anterior el siguiente estilo:
<style>
input.ng-invalid {
background-color: lightgreen;
}
</style>
¿Qué añade o mejora a la aplicación?
Resumiendo…
En el patrón de diseño MVC de AngularJS:
- La vista es el HTML.
- El controlador es la función JavaScript que hemos visto anteriormente que hace que surja la magia entre otras cosas cambiando el contenido de las variables.
- Y el modelo…. El modelo será el objeto $scope.