Angular es una librería que permite realizar aplicaciones de una forma muy sencilla y muy rápida.
Para ello es necesario organizar el código de una forma especial basada en directivas, módulos, factorías, … que iremos poco a poco desgranando, pero lo más importante es hacer un cambio de mentalidad en cuanto a la arquitectura que implementa como se maneja la lógica de presentación.
Hasta el momento, en la web estamos acostumbrados a una forma de trabajar muy procedural y basada en suscripciones a eventos que provocan que según los argumentos y los valores de algunos atributos del HTML se modifiquen dinámicamente el DOM de la página.
Por ejemplo si queremos añadir un elemento a una lista, la forma de trabajar es suscribirse a un botón [+], al invocarse el evento se cargarían los datos a través de jQuery y se añadiría un <li> al <ul> utilizando jquery con los datos que queremos mostrar.
Esta forma de trabajar acopla mucho el html de la página, el código del método suscrito al evento, …
Y aquí el código sin formato (por si nos veis bien la imagen):
<!DOCTYPE>
<html>
<head></head>
<body>
<div>
<input id=»nombre» type=»text»></input>
<span id=»descripcion»>El nombre introducido es:</span>
<button id=»anyadir»>+</button>
<ul id=»lista»>
</ul>
</div>
<script src=»http://code.jquery.com/jquery-1.9.0.js»></script>
<script>
$(document).ready(function() {
$(«#nombre»).keyup(function() {
var name = $(«#nombre»)[0].value;
$(«#descripcion»)[0].innerHTML = «El nombre introducido es: <strong>» + name + «</strong>»;
});
$(«#anyadir»).click(function() {
var name = $(«#nombre»)[0].value;
$(«#lista»)[0].innerHTML = &(«#lista»)[0].innerHTML + «<li>» + name + «</li>»;
});
});
</script>
</body>
</html>
MVVM o MVW
Ahora con AngularJS todo esto cambia y pasa a ser mucho más declarativo. Siguiendo el ejemplo anterior:
- Al botón [+] le añadiriamos la directiva ng-click con el método js que queremos ejecutar, además le pasaríamos los argumentos que este necesitase.
- En este método js que manejaría el evento no le llegaría ningún argumento de forma automática, ni ningúna referencia al elemento HTML que lo ha invocado. Simplemente tendría acceso a los valores que desde la llamada ng-click se han pasado.
- Una vez dentro del método js, este se añadiría el nuevo objeto en la colección bindeada en la directiva ng-repeat.
- En ningún momento se llama al DOM ni se modifica. Como el elemento <li> tendrá una directiva ng-repeat que hará que se cree un elemento por cada elemento de la colección bindeada, el hecho de añadir un elemento más a esta colección añadirá provocará que un elemento <li> aparezca de forma mágica rellenando los campos según la plantilla definida en el html.
Todo esto es devido a utilizar una arquitectura MVVM (Model-View-ViewModel) o MVW (Model-View-Whatever) basada en bindings entre la parte visual y los datos.
Siguiendo esta nomenclatura podemos separar 3 capas muy importantes de toda aplicación angularjs:
- Model. Entendemos la capa Model como los datos que la aplicación va a utilizar. En angular esta capa se define mediante la variable $scope. Esta variable es la que contiene la información de la aplicación y sobre la que podemos realizar bindings desde el html para ser mostrado.
- View. Llamaremos view a todos los ficheros html y css que se utilizan para formatear la información. La forma en que la parte visual muestra información alojada en el Model es utilizando plantillas con formato mustache {{nombre}} o directivas explícitamente destinadas a ello como ng-bind.
- ViewModel o Whatever. Esta capa que según el nombre de la arquitectura tiene un nombre u otro contiene todo aquel código que es la encargada de enlazar los eventos y preparar los datos para ser visualizados de la forma requerida. Por ejemplo alojaria en código que se ejecutaría al pulsar el botón de añadir un nuevo elemento, como el formateo de una fecha, … Los controladores, directivas, servicios, factorías, … son las entidades que se encargarán de todo esto.
Una cosa son los datos de la aplicación, otra como se va a ver la información y otra la lógica que enlaza ambas. Para entenderlo mejor vamos a ver un ejemplo:
Y aquí el código sin formato (por si nos veis bien la imagen):
<!DOCTYPE>
<html>
<head></head>
<body ng-app=»ejemplo1″>
<div ng-controller=»listController»>
<input type=»text» ng-model=»name»></input>
<span>El nombre introducido es: <strong>{{name}}</strong></span>
<button ng-click=»add();»>+</button>
<ul>
<li ng-repeat=»item in lista»>{{item}}</li>
</ul>
</div>
<script src=»https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.js»></script>
<script>
angular
.module(«ejemplo1», [])
.controller(«listController», function($scope) {
$scope.lista = [];
$scope.add = function() {
$scope.lista.push($scope.name);
}
});
</script>
</body>
</html>
En este ejemplo a diferencia del primero con la programación basada en jQuery se puede ver que el código es mucho más sencillo.
No es necesario suscribirse al ready del doc, ni saber como se llaman los eventos, ni inyectar html a la página según se necesite (evitando ataques por inyección de html ya que angular tiene un buen sanitizador), ni llenar el html de ids y class para poder utilizar los selectors, ni podemos olvidarnos de sincronizar el valor de algún elemento si la funcionalidad es compleja, …
En el caso de angular simplemente se debe actualizar el dato ($scope) y ya las plantillas y eventos harán el resto.
@_PedroHurtado y @XaviPaper
Os dejo aqui el vinculo hacia el siguiente (tercer) capitulo («Bootstrap») de este tutorial.
Y si nos habéis visto el primero, aqui esta…
Los enlaces de compra de todos los artículos publicados en este blog son links de afiliados. A ti lo que compres a través de ellos te va a costar lo mismo y a nosotros nos ayuda al sostenimiento de los gastos.
Muchas Gracias.
