Arquitecturas Web Con Angular - Js (Extracto)

ARQUITECTURAS WEB CON ANGULAR.
JS
!
PGINA "1 DE "97
WWWW.ARQUITECTURAJAVA.COM
ARQUITECTURAS WEB CON ANGULAR.JS
Autor
!
Cecilio lvarez Caules es Oracle Enterprise Architect, Sun

Certified Business Component Developer, Sun Certified Web
Component Developer y Sun Certified Java Programmer. Es
adems Microsoft Certified Solution Developer, Microsoft
Certified Enterprise Developer y Microsoft Certified Trainer.
Trabaja como Arquitecto, Consultor y Trainer desde hace ms de
15 aos para distintas empresas del sector.
Puedes seguirme a travs 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 prcticas . Los dos
primeros fueron :
Arquitectura Java Slida descargable desde http://www.arquitecturajava.com

sin coste alguno
Arquitectura Java JPA Domain Driven Design ( editado en formato kindle)
PGINA "2 DE "97
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 estn ms
de moda: Angular.js
Espero que el libro sirva de introduccin 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 tcnico. Por otro lado quiero
agradecer tambin a Ral Arabaolaza que me pusiera al tanto de la existencia de
este framework hace ya ms de un ao y lo interesante que era comenzar a trabajar
con l.
PGINA "3 DE "97
Introduccin, Angular.js vs
jQuery
Angular.js es un framework Javascript relativamente nuevo y no es fcil manejarlo
en un principio. Vamos a comenzar como siempre desde cero. Para ello
construiremos, como punto de partida, un ejemplo utilizando jQuery para despus
ir evolucionando paso a paso hacia el mundo de Angular.js. As pues, debemos
descargar la ltima versin de jQuery de su pgina 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 cdigo:
<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);
PGINA "4 DE "97
});
</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};
Despus hemos utilizado selector de prrafo p ms el selector de posicin eq

de jQuery para ir dibujando las diferentes propiedades de la Factura en el primer,
segundo y tercer prrafo:
De esta forma, jQuery nos imprime el contenido de la Factura
!
!
PGINA "5 DE "97
No hay mucho ms que resear, el cdigo funciona correctamente y simplifica

significativamente el uso puro de Javascript y DOM que tendramos que haber
usado para realizar la misma operacin.
!
Aadir 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 :
!
PGINA "6 DE "97
!
No hemos hecho nada drstico. Ahora aadiremos cdigo a nuestro ejemplo para
que cada botn responda de forma correcta al evento de click:
!
!
$("#botonId").click(function() {
!
factura.id=2;
!
})
!
$("#botonConcepto").click(function() {
!
factura.concepto="iphone"
!
});
!
$("#botonImporte").click(function() {
!
factura.importe=700;
!
});
!
Si pulsamos cada uno de los botones, estaremos cambiando tanto los datos que la
Factura almacena como los datos que se presentan en los prrafos utilizando el
mtodo .text() de jQuery.
PGINA "7 DE "97
!
Problemas con JQuery
Todo parece normal en el cdigo, pero si lo analizamos un poco ms

detalladamente, nos podemos dar cuenta de que resulta repetitivo cambiar las
propiedades del objeto y a continuacin cambiar al mismo tiempo el contenido del
prrafo:
!
factura.importe=700;
!
Con jQuery nos estamos viendo obligados a cambiar tanto el objeto como la capa
de presentacin (prrafos) de la pgina.
!
PGINA "8 DE "97
!
Estamos trabajando el doble. Quiere decir esto que JQuery est mal
diseado?. La respuesta es NO. jQuery es un framework que est orientado a
gestionar la capa de presentacin 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.
!
Asignacin de Responsabilidades
!
En estos momentos tenemos un problema serio de asignacin de responsabilidades

pero no es fcil de detectar. Vamos a poner un ejemplo similar basado en la vida
cotidiana. Imaginemos una cafetera donde hay un encargado que pone precio a
los cafs que vendemos.
Resulta que el negocio nos ha ido bien y hemos abierto otras 3 cafeteras. As que
cuando nuestro encargado cambie el precio del caf, deber ir a cada una de las
cafeteras y cambiar el precio en ellas tambin.
!
!
!
!
!
!
!
!
PGINA "9 DE "97
!
!
Ahora bien Qu suceder cuando el nmero de cafeteras o el nmero de
productos aumente?. Nuestro encargado no podr asumir de forma eficiente el
cambio de los precios de todos los productos.
!
!
!
!
PGINA "10 DE "97
!
Divisin de Responsabilidades
Es fcil ver que nuestro Encargado esta asumiendo demasiadas responsabilidades y

no puede realizar todas de una forma eficaz. Cul puede ser una solucin
razonable y escalable? . En este caso podemos dividir las responsabilidades y
contratar un encargado en cada una de las cafeteras de tal forma que sean estos
encargados los que cambien los precios en cada una de ellas, basndose en los
precios que les transmite el Encargado principal.
PGINA "11 DE "97
!
Este es un ejemplo elemental de uno de los patrones ms conocidos: El patrn
observador/observable ya que cada uno de los empleados de las cafeteras
observan los cambios que realiza el encargado principal.
jQuery y Responsabilidad
PGINA "12 DE "97
En el ejemplo que acabamos de construir con JQuery estamos ante un problema

de divisin de responsabilidades ya que jQuery se encarga de todo y tenemos las
responsabilidades demasiado centralizadas. Esto finalmente genera ms trabajo
Angular.js y Responsabilidades
Angular.js es un Framework de Javascript que est enfocado hacia la divisin de

responsabilidades. Vamos a ir introducindolo paulatinamente en los siguientes
captulos.
PGINA "13 DE "97

Arquitecturas Web Con Angular - Js (Extracto)

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Arquitecturas Web Con Angular - Js (Extracto)

Uploaded by

Copyright:

Available Formats

ARQUITECTURAS WEB CON ANGULAR.

ARQUITECTURAS WEB CON ANGULAR.JS

Cecilio lvarez Caules es Oracle Enterprise Architect, Sun

Puedes seguirme a travs de las siguientes redes

Arquitectura Java Slida descargable desde http://www.arquitecturajava.com

PGINA "2 DE "97

ARQUITECTURAS WEB CON ANGULAR.JS

Este tercer libro est orientado a Arquitecturas Web y concretamente a aprender a

PGINA "3 DE "97

ARQUITECTURAS WEB CON ANGULAR.JS

Vamos a trabajar con el concepto de Factura (id,concepto,importe) y,

PGINA "4 DE "97

ARQUITECTURAS WEB CON ANGULAR.JS

Despus hemos utilizado selector de prrafo p ms el selector de posicin eq

De esta forma, jQuery nos imprime el contenido de la Factura

PGINA "5 DE "97

ARQUITECTURAS WEB CON ANGULAR.JS

No hay mucho ms que resear, el cdigo funciona correctamente y simplifica

El resultado ser el siguiente :

ARQUITECTURAS WEB CON ANGULAR.JS

PGINA "7 DE "97

ARQUITECTURAS WEB CON ANGULAR.JS

Todo parece normal en el cdigo, pero si lo analizamos un poco ms

ARQUITECTURAS WEB CON ANGULAR.JS

En estos momentos tenemos un problema serio de asignacin de responsabilidades

PGINA "9 DE "97

ARQUITECTURAS WEB CON ANGULAR.JS

PGINA "10 DE "97

ARQUITECTURAS WEB CON ANGULAR.JS

Es fcil ver que nuestro Encargado esta asumiendo demasiadas responsabilidades y

PGINA "11 DE "97

ARQUITECTURAS WEB CON ANGULAR.JS

PGINA "12 DE "97

ARQUITECTURAS WEB CON ANGULAR.JS

En el ejemplo que acabamos de construir con JQuery estamos ante un problema

Angular.js es un Framework de Javascript que est enfocado hacia la divisin de

PGINA "13 DE "97

You might also like