ARQUITECTURAS WEB CON ANGULAR.JS
WWWW.ARQUITECTURAJAVA.COM
!
PÁGINA "
1
DE "
97
ARQUITECTURAS WEB CON ANGULAR.JS
WWWW.ARQUITECTURAJAVA.COM
Autor
!
!
Cecilio Álvarez Caules es Oracle Enterprise Architect, Sun
Certified Business Component Developer, Sun Certified Web
Component Developer y Sun Certified Java Programmer. Es
además Microsoft Certified Solution Developer, Microsoft
Certified Enterprise Developer y Microsoft Certified Trainer.
Trabaja como Arquitecto, Consultor y Trainer desde hace más de
15 años para distintas empresas del sector.
Puedes seguirme a través de las siguientes redes
LinkedIn
https://www.linkedin.com/profile/view?id=2949192&trk=tab_pro
Twitter
https://twitter.com/arquitectojava
! !
Prologo
!
!
!
Este es el tercer libro que escribo sobre Arquitecturas y buenas prácticas . Los dos
primeros fueron :
Arquitectura Java Sólida descargable desde http://www.arquitecturajava.com
sin coste alguno
Arquitectura Java JPA Domain Driven Design ( editado en formato kindle)
PÁGINA "
2
DE "
97
ARQUITECTURAS WEB CON ANGULAR.JS
WWWW.ARQUITECTURAJAVA.COM
Este tercer libro está orientado a Arquitecturas Web y concretamente a aprender a
manejar y perder el miedo a uno de los framework JavaScript Web que están más
de moda: Angular.js
!
Espero que el libro sirva de introducción y ayude a solventar las dudas sobre este
framework tan interesante.
!
Agradecimientos
Quiero aprovechar a agradecer a mi pareja y mi editora Olga Pelaez Tapia la
paciencia que ha tenido al revisar un documento tan técnico. Por otro lado quiero
agradecer también a Raúl Arabaolaza que me pusiera al tanto de la existencia de
este framework hace ya más de un año y lo interesante que era comenzar a trabajar
con él.
!
PÁGINA "
3
DE "
97
ARQUITECTURAS WEB CON ANGULAR.JS
WWWW.ARQUITECTURAJAVA.COM
!
Introducción, Angular.js vs
jQuery
Angular.js es un framework Javascript relativamente nuevo y no es fácil manejarlo
en un principio. Vamos a comenzar como siempre desde cero. Para ello
construiremos, como punto de partida, un ejemplo utilizando jQuery para después
ir evolucionando paso a paso hacia el mundo de Angular.js. Así pues, debemos
descargar la última versión de jQuery de su página web:
http://www.jquery.com
!
!
!
jQuery y Facturas
Vamos a trabajar con el concepto de Factura (id,concepto,importe) y,
utilizando jQuery, procederemos a imprimir las diferentes propiedades por
pantalla. Para ello usaremos el siguiente código:
<html>
<head>
<script
type="text/javascript"
src="jquery-‐1.11.1.js">
</script>
<script
type=“text/javascript">
$(document).ready(function()
{
!
!
!
!
!
var
factura=
{"id":1,"concepto":"mac","importe":1000};
$("p:eq(0)").text(factura.id);
$("p:eq(1)").text(factura.concepto);
$("p:eq(2)").text(factura.importe);
PÁGINA "
4
DE "
97
ARQUITECTURAS WEB CON ANGULAR.JS
WWWW.ARQUITECTURAJAVA.COM
});
!
</script>
</head>
<body>
<p><p>
<p></p>
<p></p>
</body>
</html>
!
!
!
!
!
En primer lugar, hemos construido una Factura como un objeto de Javascript:
var
factura=
{"id":1,"concepto":"mac","importe":1000};
Después hemos utilizado selector de párrafo “p” más el selector de posición “eq”
de jQuery para ir dibujando las diferentes propiedades de la Factura en el primer,
segundo y tercer párrafo:
$("p:eq(0)").text(factura.id);
$("p:eq(1)").text(factura.concepto);
$("p:eq(2)").text(factura.importe);
De esta forma, jQuery nos imprime el contenido de la Factura
!!
PÁGINA "
5
DE "
97
ARQUITECTURAS WEB CON ANGULAR.JS
WWWW.ARQUITECTURAJAVA.COM
No hay mucho más que reseñar, el código funciona correctamente y simplifica
significativamente el uso puro de Javascript y DOM que tendríamos que haber
usado para realizar la misma operación.
!
!
Añadir Botones
Vamos a realizar algunos cambios que en principio nos parecen poco relevantes, de
tal forma que tengamos diferentes botones para cambiar cada una de las distintas
propiedades de la Factura.
!
!
<p>
<input
type="button"
id="botonId"
value="cambiarID"/>
</p>
<p>
<input
type="button"
id="botonConcepto"
value="cambiarConcepto"/>
</p>
<p>
<input
type="button"
id="botonImporte"
value=“cambiarImporte"/>
</p>
El resultado será el siguiente :
!
PÁGINA "
6
DE "
97
ARQUITECTURAS WEB CON ANGULAR.JS
WWWW.ARQUITECTURAJAVA.COM
No hemos hecho nada drástico. Ahora añadiremos código a nuestro ejemplo para
que cada botón responda de forma correcta al evento de click:
$("#botonId").click(function()
{
factura.id=2;
$("p:eq(0)").text(factura.id);
!
!!
!
!
})
!
!
!
});
!
!
!
});
!
$("#botonConcepto").click(function()
{
factura.concepto="iphone"
$("p:eq(1)").text(factura.concepto);
$("#botonImporte").click(function()
{
factura.importe=700;
$("p:eq(2)").text(factura.importe);
Si pulsamos cada uno de los botones, estaremos cambiando tanto los datos que la
Factura almacena como los datos que se presentan en los párrafos utilizando el
método .text() de jQuery.
PÁGINA "
7
DE "
97
ARQUITECTURAS WEB CON ANGULAR.JS
WWWW.ARQUITECTURAJAVA.COM
!
Problemas con JQuery
!
Todo parece normal en el código, pero si lo analizamos un poco más
detalladamente, nos podemos dar cuenta de que resulta repetitivo cambiar las
propiedades del objeto y a continuación cambiar al mismo tiempo el contenido del
párrafo:
!
!
!
factura.importe=700;
$("p:eq(2)").text(factura.importe);
Con jQuery nos estamos viendo obligados a cambiar tanto el objeto como la capa
de presentación (párrafos) de la página.
!
PÁGINA "
8
DE "
97
ARQUITECTURAS WEB CON ANGULAR.JS
WWWW.ARQUITECTURAJAVA.COM
!
Estamos trabajando el doble. ¿Quiere decir esto que JQuery está mal
diseñado?. La respuesta es NO. jQuery es un framework que está orientado a
gestionar la capa de presentación y es algo que hace de forma correcta,
simplificando claramente el trabajo con ella. Sin embargo, no es capaz de cubrir
otro tipo de problemas como con el que nos encontramos ahora.
!
!
Asignación de Responsabilidades
En estos momentos tenemos un problema serio de asignación de responsabilidades
pero no es fácil de detectar. Vamos a poner un ejemplo similar basado en la vida
cotidiana. Imaginemos una cafetería donde hay un encargado que pone precio a
los cafés que vendemos.
Resulta que el negocio nos ha ido bien y hemos abierto otras 3 cafeterías. Así que
cuando nuestro encargado cambie el precio del café, deberá ir a cada una de las
cafeterías y cambiar el precio en ellas también.
!!!!!!!!
PÁGINA "
9
DE "
97
ARQUITECTURAS WEB CON ANGULAR.JS
WWWW.ARQUITECTURAJAVA.COM
Ahora bien ¿Qué sucederá cuando el número de cafeterías o el número de
productos aumente?. Nuestro encargado no podrá asumir de forma eficiente el
cambio de los precios de todos los productos.
!!
!!!!
PÁGINA "
10
DE "
97
ARQUITECTURAS WEB CON ANGULAR.JS
WWWW.ARQUITECTURAJAVA.COM
!
!
División de Responsabilidades
Es fácil ver que nuestro Encargado esta asumiendo demasiadas responsabilidades y
no puede realizar todas de una forma eficaz. ¿Cuál puede ser una solución
razonable y escalable? . En este caso podemos dividir las responsabilidades y
contratar un encargado en cada una de las cafeterías de tal forma que sean estos
encargados los que cambien los precios en cada una de ellas, basándose en los
precios que les transmite el Encargado principal.
PÁGINA "
11
DE "
97
ARQUITECTURAS WEB CON ANGULAR.JS
WWWW.ARQUITECTURAJAVA.COM
!
Este es un ejemplo elemental de uno de los patrones más conocidos: El patrón
observador/observable ya que cada uno de los empleados de las cafeterías
observan los cambios que realiza el encargado principal.
!
jQuery y Responsabilidad
!
PÁGINA "
12
DE "
97
ARQUITECTURAS WEB CON ANGULAR.JS
WWWW.ARQUITECTURAJAVA.COM
En el ejemplo que acabamos de construir con JQuery estamos ante un problema
de división de responsabilidades ya que jQuery se encarga de todo y tenemos las
responsabilidades demasiado centralizadas. Esto finalmente genera más trabajo
Angular.js y Responsabilidades
!
Angular.js es un Framework de Javascript que está enfocado hacia la división de
responsabilidades. Vamos a ir introduciéndolo paulatinamente en los siguientes
capítulos.
!
PÁGINA "
13
DE "
97
Crear cuenta
Comentarios de: Arquitecturas Web con Angular.js (0)
No hay comentarios