AngularJS-largeCon este post empezamos una serie de publicaciones que pretenden ser una introducción a AngularJS.

El objetivo no es simplemente hacer un visión aerea de lo que es, sino llegar a aterrizar en algunos puntos que creemos que pueden ser clave para no quedarnos en el típico “Hola Mundo” que funciona hasta que lo implementas de verdad.

¿Qué es AngularJS?

AngularJS es una librería JavaScript implementada y apoyada por Google que aglutina diversas tecnologías dispersas y que cada desarrollador web anteriormente buscaba por separado e intentaba unir y coordinar dentro de su aplicación.

 

AngularJS incluye en una única librería JavaScript: tecnologías de SPA, bindings, routing, inyección de dependencias, ampliación del DOM, acceso a servicios REST, dependencias de otros módulos, motor de plantillas de HTML,…

 

Con todas estas características y especialmente con las directivas, que permiten ampliar o modificar el DOM y hacer cosas que antes se hacían por código, ahora se puede definir en el HTML de forma declarativa y semántica funcionalidades de forma muchísimo más sencillo que antes. Toda la complejidad que se tenía modificando el DOM con jQuery ahora simplemente añadiendo algún elemento o atributo en el HTML se pueda hacer de forma declarativa.

 

Concepto de SPA

Según la wikipedia http://en.wikipedia.org/wiki/Single_page_application

 

“Una Single-Page Application (SPA), también conocido como Single-Page Interface (SPI), es una aplicación web o website que está dentro de una única página web con el objetivo de proporcionar una experiencia de usuario más fluida similar a una aplicación desktop.

 

En una SPA, o todo el código (HTML, JavaScript y CSS) está cargado en una única página, o los recursos apropiados son cargados dinámicamente y añadidos a la página cuando son necesarios, normalmente como respuesta a acciones del usuario. La página no se recarga en ningún punto del proceso, ni transfiere el control a ninguna otra página, aunque las tecnologías web modernas (como las incluidas en HTML5) puede proporcionar la percepción y navegabilidad a páginas separadas lógicamente en la aplicación. La interacción con SPA usualmente incluye comunicación dinámica con un webserver.”

 

En concreto en angular se puede implementar una arquitectura SPA utilizando la carga bajo demanda de forma que la carga inicial de la página contenedora o principal es más rápida y solo se cargan las páginas conforme se vayan necesitando. Una vez una página está cargada, esta es almacenada en la caché y ya nunca se va a volver a solicitar a no ser que se hagan cambios a proposito que modifiquen el comportamiento por defecto.

 

Esto tiene la parte buena y la parte mala. Por un lado agiliza y da la sensación de estar trabajando como una aplicación desktop, pero también obliga a tener las páginas completamente desacopladas de los datos. Si el contenido de alguna página dependiera de los datos debería eliminarse a mano de la caché para que la próxima vez que se intente mostrar este html se vuelva a recargar..

Javascript necesario

Para ejecutar una aplicación angular es necesario añadir la librería angularjs asociada. Esta la puedes encontrar en https://angularjs.org/ y en el momento de escribir el post se puede descargar la versión 1.2.21 como última versión estable. También está la 1.3.0-beta 17 pero es recomendable trabajar siempre con versiones estables para evitar sorpresas.

 

Para utilizarla puedes:

En cualquier caso es importante asociar la referencia a una versión concreta de angular.js que permita que la aplicación funcione aunque salgan nuevas versiones de esta librería.

 

Además de la librería angular.js existen también otras librerías especificas para animaciones, enrutado, sanitización, recursos, mocks, gestión de cookies, … que se cargan por separado. Conforme vayamos hablando de algunas de estas características las iremos nombrando y describiendo como cargarlas.

jQLite vs jQuery

Para ejecutar una aplicación de angularjs no es necesario cargar nada más. Angularjs utiliza por defecto internamente jqLite como librería para abstraerse del tipo y versión del navegador y simplificar el código. Si por algún otro motivo ya se hubiese cargado jQuery, angular sería lo suficientemente inteligente como para tirar de esta libreria y no utilizar jqLite. En ambos casos el comportamiento es el mismo, aunque en pruebas de rendimiento que hemos realizado el uso de jQuery es más eficiente que jqLite por lo que recomendamos cargar antes de angularjs la libreria jQuery.js sea necesaria o no para otros funcionalidades.

AngularJS Batarang

Una vez todo instalado, necesitamos herramientas para poder depurar el código y ver en todo momento que contiene las variables internas. Para ello, nosotros recomendamos el uso de Chrome y su magnífica extension Angularjs Batarang (https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk). Con estas dos herramientas seremos capaces en todo momento de ver qué valores hay dentro del $scope, trazar el código js, ver qué plantilla se ha descargado, que CSS se ha aplicado y cual no. Toda una serie de valores e información sin las cuales es muy complejo programar cualquier aplicación.

@_PedroHurtado y @XaviPaper

Aqui el vinculo hacia el segundo capitulo: Arquitectura

Compartir
Ingeniero Informático por la Universidad Politécnica de Valencia, Xavier Jorge (@XaviPaper) trabaja como CTO de Ami2 y lleva más de 13 años vinculado a proyectos de I+D+i con diversas universidades, y desarrollando y arquitecturando soluciones con tecnologías .Net.

5 Comentarios

    • Hola Miguel Ángel,

      Yo en principio utilizo el Visual Studio porque aunque AngularJS me parece una librería superpotente y completa me gusta utilizar Razor y sus Helpers como motor de plantilla de servidor para agilizar la generación de código. Por ejemplo, las líneas de código para mostrar una argumento tipo fecha de un servicio siempre son las mismas. Por ello me creo un helper que pinte un argumento tipo fecha, otro tipo int, otro tipo decimal, … y luego solo voy llamando a los helpers para que generen el HTML que se mostrará en el browser.

      Además, creo que temas como la seguridad o el multiidioma (más necesario que nunca) me gusta dejarlo en manos de ASP.Net y los recursos de .NET.

      Pedro por ejemplo le gusta mucho brackets y si te fijas las capturas de pantallas de los posts están hechos con brackets. Brackets ofrece un IDE muy potente y ligero a diferencia del pesado Visual Studio, pero como te comento es una cuestión de gustos.

      Como herramientas o extensiones como comento en el post, las únicas imprescindibles para mi son:

      – Chrome + Batarang para trazar js y ver el contenido de las variables de AngularJS

      – Fiddler para ver que llamadas se están realizando al servidor (aunque las Developer tools de Chrome también pueden valer) y para hacer llamadas al servidor para similar peticiones, …

      Espero haber respondido a tus preguntas

Dejar respuesta