AngularJS

AngularJS






JJD174 – Desarrollo WEB con AngularJS- © 2014, Netmind SL, Barcelona - 1,0 Junio 2015

F#.0 Junio 2015 . JJD174 – Desarrollo WEB con AngularJS. AngularJS AngularJS como solución • Un grupo de desarrollo de Google. VB. Netmind SL. donde el lenguaje de creación de la interfaz de usuario es XAML y la programación se realiza en cualquier lenguaje . AngularJS Aplicaciones Web • El navegador es la nueva plataforma • La nube permite acceso a contenidos desde no importa qué dispositivo • HTML5 y sus tecnologías supuso el primer paso • El nuevo modelo de aplicaciones SPA (Single Page Applications).NET: C#. se planteó la necesidad de unificar los esfuerzos previos en este sentido. etc. como WPF.Net.1. Barcelona . utilizando propuestas como JSON • Los cambios en las páginas responsive se producen principalmente sobre la información modificada (peticiones AJAX). liderado por el arquitecto de software Misko Hevery.© 2014. • Principios: • La programación declarativa es ideal para la construcción de interfaces de usuario • Mientras que la programación imperativa lo es de cara a la creación de la lógica de negocio • Esto puede recordar otros sistemas similares. se adapta mejor a la nueva arquitectura • Los formatos de transferencia de información tienden a optimizarse.

Acceso a datos de forma simplificada. además. mediante servicios Web Posibilidad de realizar Test Unitarios Escalabilidad y mantenimiento AngularJS Los pilares básicos de Angular: El sitio oficial: http://angularjs. pensadas para las aplicaciones Web Fomenta la implementación de los modelos MVC y SPA Un sistema de enlace a datos (DataBinding) potente y modular que permite el testeo de aplicaciones Control de las estructuras y vinculación de código al DOM Agrupación de elementos HTML en controles reutilizables JJD174 – Desarrollo WEB con AngularJS.org/ Allí se explica.© 2014.1. aprovechando los nuevos motores de JavaScript. Netmind SL. el proceso de continuidad que las librerías tienen previsto ante la aparición de JS6 Librerías con garantías de mantenimiento y actualización (por Google) y libre de royalties. que encontramos en los navegadores modernos. AngularJS Ventajas de esta aproximación: Visualización óptima de la información Facilidad de lectura y navegación Independencia del dispositivo "Feedback" continuo (cualquier acción supone una respuesta) Gestión diferida al cliente.0 Junio 2015 . Barcelona .

1. AngularJS MVC establece una separación clara entre la gestión de sus datos (el modelo). el controlador responde cambiando los datos en el modelo Los controladores son clases de JavaScript El modelo notifica a la vista el cambio producido para que ésta pueda actualizar lo que muestra en la salida Los datos del modelo se almacenan en propiedades de objetos del DOM JJD174 – Desarrollo WEB con AngularJS. Netmind SL. y la presentación de los datos para el usuario (la vista) AngularJS El sistema se puede esquematizar en 3 pasos: La vista obtiene del modelo los datos para mostrar al usuario. la lógica de la aplicación (el controlador).© 2014. La vista es el Document Object Model (DOM) Cuando un usuario interactúa con la aplicación.0 Junio 2015 . Barcelona .

AngularJS Cambiar datos en la Interfaz de Usuario (IU) precisa un esfuerzo extra para asegurarnos de que los datos estén es un estado correcto. Se utiliza un patrón Front Controller que procesa las solicitudes de aplicaciones Web a través de un solo controlador.1. para indicar que la expresión exp debe ser evaluada. tanto en la IU como en las propiedades JavaScript Solución: Poder declarar qué partes del DOM están vinculadas a otras de JavaScript Hacer que esta sincronización tenga lugar de forma automática Este enlace a datos tiene lugar mediante la sintaxis moustache Se llama así porque se utilizan dos símbolos -{-. Netmind SL. {{ exp }}. JJD174 – Desarrollo WEB con AngularJS. Proporciona un mejor soporte para el desarrollo basado en pruebas (TDD). AngularJS Favorece la implantación del principio de "Separación de Responsabilidades" (Separation of Concerns).© 2014. o sea en la forma. No utiliza el estado de las vistas o formularios de servidor.0 Junio 2015 . Barcelona .

JJD174 – Desarrollo WEB con AngularJS. La codificación de la parte de acceso a datos es fácilmente manejable y actualizable. AngularJS El modelo de DataBinding en AngularJS es bidireccional Cuando el usuario modifica algo en la interfaz que le compete al modelo de datos.1.© 2014. Barcelona . ésta se actualiza igualmente AngularJS Resumiendo las ventajas del enlace a datos: Una aplicación basada en datos se puede crear de forma rápida y eficiente mediante esta técnica. Aumenta la calidad de la aplicación. La cantidad de código disminuye increíblemente. Netmind SL. Los equipos de programadores obtienen rápidos beneficios de este enfoque y los test se simplifican.0 Junio 2015 . Mediante el uso de eventos se puede obtener el control sobre el proceso de enlace de datos.

AngularJS La forma de implementarlo.O. Cada unidad debe hablar solo a sus amigos y no hablar con extraños Ante cualquier duda. Barcelona . Netmind SL. AngularJS Patrón de diseño O. solo hablar con los amigos inmediatos AngularJS actuará como contenedor y suministrará a nuestros recursos de programación los objetos necesarios sin necesidad de nada extra por parte del programador JJD174 – Desarrollo WEB con AngularJS. es mediante un "Contenedor DI" Maneja las clases implicadas.1. en lugar de ser la propia clase quien cree el objeto. de forma que es capaz de determinar sus relaciones y dependencias Las dependencias son suministradas a cada clase según la Ley de Deméter. en el que se suministran objetos a una clase. El término fue acuñado por primera vez por Martin Fowler.0 Junio 2015 . por resumirlo se deben dar los siguientes supuestos: Cada unidad debe tener un limitado conocimiento sobre otras unidades y solo conocer aquellas estrechamente relacionadas con la actual. y se considera parte del paradigma de Programación Orientada a Aspectos (AOP). donde.© 2014. o Principio de Menos Conocimiento Esto es un caso específico de Loose Coupling o Acoplamiento Débil.

dentro del código HTML se asignan atributos a los elementos que nos servirán de plantillas • Estos atributos siempre tendrán el prefijo ng. atributos o clases (como si se tratase de CSS) AngularJS • Inicialmente.1.© 2014. como en HTML4 <html ng-app> //Declaración válida para HTML 4. Barcelona . model.) – Opcionalmente. que serán sustituidas por sus valores correspondientes en tiempo de ejecución AngularJS contiene un conjunto completo de directivas para propósitos diversos. podemos optar por la creación de nuevos elementos del DOM. Netmind SL. AngularJS Se trata de la capacidad de incluir plantillas en el código HTML. etc.e irán seguidos del nombre de la directiva (app. JJD174 – Desarrollo WEB con AngularJS. En su codificación. pero algunas de ellas son fundamentales.0 Junio 2015 . con un valor asociado al atributo.01 y HTML 5 <html data-ng-app> //Declaración estricta en HTML5 (atributo data-) <html ng-app="" > //Declaración HTML4 con valor vacío <html ng-app="app" > //Declaración HTML4 con identificador. – Pueden usarse tanto en HTML5.

CoffeeCup HTML Editor: Constructor de formularios Web.0 Junio 2015 . etc. "plug-ins". etc. Sintaxis en colores (definibles) Estructuración de código (con despliegue opcional de zonas) Soporte de otros lenguajes de programación..1.. etc. Plantillas tipo "responsive" para varios propósitos. AngularJS Un ejemplo muy sencillo Genera la siguiente salida AngularJS Lo que necesitamos: Herramientas básicas de edición de código Monitorizar y comprobar el funcionamiento Herramientas para la edición de código NotePad++: Es gratuito y Open Source para Windows. La versión de pago incluye así mismo un montón de opciones de gestión de sitios Web. Barcelona . Netmind SL. JJD174 – Desarrollo WEB con AngularJS.© 2014.

como jQuery. incluyendo depuración AngularJS Los depuradores son excelentes (hay varios) Puntos de ruptura (incluso de tipo condicional. o el propio AngularJS A partir de su versión 2013. Barcelona . Dispone de una extensión de este editor especialmente pensada para AngularJS Visual Studio Web Developer Express Soporte de todo el código fuente que incluye Intellisense Compleción de código. Studio es Web Essentials. Aparte de todo lo anterior. etc. en que lo usemos. Netmind SL.0 Junio 2015 . desde http://vswebessentials. Studio Web Express. Modernizr. Tanto en HTML como en CSS Soporte completo del lenguaje JavaScript. snippets Reconocimiento de los valores posibles para cada atributo de cada etiqueta o regla. el mejor complemento disponible para el desarrollo Web en V. en varios modos) para el lenguaje JavaScript Librerías de terceros. A partir de la versión 2013 Update 2 de V. dicha extensión puede instalarse igualmente de forma gratuita Disponible desde V.1. AngularJS Sublime Text: Es multiplataforma y una sola licencia sirve para cualquier S.com/features/general JJD174 – Desarrollo WEB con AngularJS.Studio (Extensiones) o directamente.O.© 2014. de Mads Kristensen. reconoce de inicio todas las directivas de AngularJS directamente Aporta sugerencias durante la edición Muestra etiquetas flotantes con los parámetros o características de cada función o directiva.

Netmind SL.© 2014.0 Junio 2015 . los cambios producidos en él. Dispone. JJD174 – Desarrollo WEB con AngularJS. etc. AngularJS El IDE y AngularJS Reconoce las directivas AngularJS (ng-) de manera directa Y eso incluye la parte de JavaScript. además de opciones de activación dinámica y modificación de elementos. Es gratuita y aparece como una opción más de las "Herramientas de Desarrollador" de Chrome (atajo de teclado F12). el código fuente.1. AngularJS Herramientas integradas en navegadores (F12) Batarang: Complemento de Google Chrome disponible como extensión del navegador Monitoriza muchas vistas del funcionamiento de una aplicación escrita en AngularJS Permite ver (en tiempo de ejecución) todo el modelo. Permite. incluso la depuración del contenido de los modelos de datos. Barcelona .

0 Junio 2015 . Barcelona . pero vinculada al navegador Firefox. Netmind SL. no llega al nivel de detalle que encontramos en Batarang Aunque se despliega de la misma forma: a partir de la herramienta de desarrolladores JJD174 – Desarrollo WEB con AngularJS. AngularJS AngularJS AngScope: Se trata de una extensión de propósitos similares a la anterior. De parecidas pretensiones a la anterior.1.© 2014.

0 Se trata de un "sniffer" de tráfico de internet. Netmind SL. como gráfico.1.0 Junio 2015 . realizada en . AngularJS Fiddler Herramienta "Open Source" desarrollada por Eric Lawrence Existen dos versiones de Fiddler: Fiddler 2 (COM) y Fiddler 4.NET 4. Barcelona .© 2014. capaz de monitorizar cualquier tipo de tráfico Registro de todo el tráfico de tipo HTTP/HTTPS Gestión y control de la sesión Depuración Web (con un nivel de configuración que le hacen una herramienta única) Pruebas de seguridad Pruebas de rendimiento: Permite simular pruebas de carga real configurando el número de usuarios y obteniendo resultados tanto en formato estadístico. AngularJS JJD174 – Desarrollo WEB con AngularJS.

org/ • http://www.© 2014. Barcelona .com/ • http://www.com/webstore/detail/angularjs- batarang/ighdmehidhipcmcojjgiloacoafjmpfk • https://addons.com/ AngularJS JJD174 – Desarrollo WEB con AngularJS.sublimetext.google. Netmind SL.mozilla.aspx • http://vswebessentials. AngularJS • Sitios Web de Editores populares y Herramientas: • http://notepad-plus-plus.com/en-us/products/visual-studio- express-vs.1.org/es/firefox/addon/angscope- simple-angularjs-s/ • http://www.visualstudio.com/ • https://chrome.0 Junio 2015 .coffeecup.