Introducción a AngularJS 1.x

Conocimientos previos

En este tutorial se asume que ya se tiene conocimiento sobre las siguientes tecnologías:

Qué es AngularJS?

AngularJS (también conocido como “Angular” o “Angular.js”), es un framework JavaScript de código abierto, creado y mantenido por Google, cuyo objetivo es hacer más fácil el desarrollo de aplicaciones basadas en navegador (como Gmail, YouTube, Spotify, Facebook y un largo, largo etc) diseñadas con una arquitectura de tipo Modelo Vista Controlador (MVC ó Model View Controller).

Éste framework lee el HTML de las distintas vistas, que contienen atributos y etiquetas personalizados, uniendo las piezas de entrada o salida de la página a un modelo representado por las variables estándar de JavaScript. Los valores de las variables de JavaScript se pueden configurar manualmente, o recuperados de los recursos JSON estáticos o dinámicos.

Angular sigue el patrón MVVM (Model View View-Model, en inglés) de ingeniería de software y alienta la articulación flexible entre la presentación, datos y componentes lógicos. Con el uso de la inyección de dependencias, Angular lleva servicios tradicionales del lado del servidor, tales como controladores dependientes de la vista, a las aplicaciones web del lado del cliente. En consecuencia, gran parte de la carga en el backend se reduce, lo que conlleva a aplicaciones web mucho más ligeras.

Para qué sirve?

Se utiliza para desarrollar aplicaciones web de una sola página (SPI ó Single Page Applications). En donde el usuario interactúa con la aplicación pero la página nunca se refresca, sino que la información es pedida al servidor remoto, procesada y mostrada sin abandonar la página principal. También se lo puede usar para desarrollar juegos, como 2048 o el conocido buscaminas.

De qué trata el tutorial?

Vamos a desarrollar desde cero una aplicación que vamos a llamar Pedalear Trae Felicidad (PTF!) que nos muestre información sobre las estaciones de Ecobici, utilizando datos reales obtenidos de los datos abiertos del Gobierno de la Ciudad de Buenos Aires. En cada capítulo vamos a tener una versión andando de la aplicación, donde le vamos a ir agregando funcionalidades nuevas y explicando conceptos de cómo funciona AngularJS y para qué. Como en cada capítulo vamos a tener una versión distinta de nuestra aplicación, el código de cada uno está en un branch distinto para que puedan bajarlo y jugar con él.

<!– Vamos a desarrollar desde cero una aplicación que nos muestre información sobre las estaciones de Ecobici con las siguientes características:

Por simplicidad, la aplicación va a constar sólo del frontend (código que se usa del lado del usuario), para que sea más fácil de entender y desarrollar, sin tener que meternos en temas como Bases de Datos o lenguajes y herramientas para desarrollo del backend (código que se usa del lado del servidor, donde usualmente se almacenan y procesan datos y se interactúa con otros sistemas).

Contenidos

  1. Instalación
  2. Hola mundo! (Estructura inicial)
  3. Lista estática de estaciones (Views, Models y Controllers)
  4. Mejoras a la aplicación (Components, Services e inyección de dependencias)
  5. Más Mejoras (Repaso, modularización de templates y servidor web local)
  6. Ver detalles de una estación (Multiples Views y uso de ngRoute)
  7. Ahora usemos datos reales (Uso del servicio $http)
  8. Filtramos y ordenamos las estaciones (Filters y data binding)
  9. Las estaciones más cercanas (Análisis de una funcionalidad y más sobre filtros a medida)
  10. Conclusión

Referencias