Crea un blog en AngularJS (1): Introducción

Por fin empezamos con AngularJS, este framework de javascript MVC (Modelo Vista Controlador) ha hecho mella en el desarrollo web Front End, ya que nos permite construir aplicaciones SPA (Single Page Applications) de forma ágil.

Para aprender angular con fluidez en estas entradas necesitas conocimientos básicos de programación con javascript.

¿Qué voy aprender de AngularJS?

El objetivo conforme avancemos es crear una aplicación web sencilla en Angularjs, esta será un Blog, que tirará de una API externa (la cual no desarrollaremos, claro).

En la serie de tutoriales con Angular js vamos a tocar los siguientes aspectos:

• Conceptos básicos y configuración del entorno de trabajo
• Estructura de una aplicación en AngularJS
• Arquitectura
• Servicios
• Controladores
• Vistas
• Y puede que más!

Esto sentará las bases para que puedas desarrollar aplicaciones web escalables y mantenibles por tu cuenta.

¿Qué voy a desarrollar?

Como dije arriba, vamos a montarnos un Blog, pero lo que debes tener en mente es que vamos a desarrollar una Simple Page Application, es decir, una aplicación web de una sola página que no se recarga con cada llamada y petición que hagamos al servidor.

«¿Pero qué me estás contando?«, vamos por partes, fíjate esta es la estructura que tendría una aplicación web actual:

• El Frontend. La parte del cliente, lo que ve el usuario (tú, yo, todos) en su pantalla desde el navegador web. Abarcaría HTML5, CSS3 y Javascript.
• El Backend. La parte del servidor web, donde se procesa y se envía información al navegador del usuario. Abarca PHP, Ruby on Rails, Django, Node.js y .NET.
• La Base de Datos. Donde se guardan los datos que envía el usuario o de donde sacamos los que queremos mostrar a éste. Pueden ser MongoDB, MySQL, PostgreSQL, Microsoft SQL Server o Apache Cassandra.

Arquitectura de una aplicación web moderna

Siguiendo el ejemplo de arriba, la base de datos (en MongoDB) se ocupa de almacenar la información de nuestra app. Esta a su vez se comunica con el Backend (servidor con NodeJS), el cual se encarga de controlar el procesamiento de los datos, la seguridad, etc.  Finalmente el Frontend se ejecuta en el navegador del usuario final, se encarga de mostrar la información de una forma visualmente atractiva y se comunica con el Backend para la creación de datos y otras visualizaciones o vistas

Si no usáramos frameworks como AngularJS o EmberJS, la comunicación se suele realizar de manera asíncrona usando JavaScript (AJAX) utilizando el formato de documentos JSON , para enviar y recibir datos desde el Backend por medio de una API REST.

Nosotros vamos a desarrollar la parte Frontend con el framework MVC AngularJS, que nos ayudará a mejorar la implementación de javascript gracias a una modularización del código y así evitar el clásico código spaguetti que tanto se genera en este lenguaje.

Angular.js, un proyecto surgido dentro de Google en 2009 y que hoy en día está alcanzando gran popularidad. Puedes consultar su documentación en todo momento desde aquí.

Lo que necesitas en tu entorno de trabajo

1) Extensión de Google Chrome: Batarang

Esta extensión nos permite visualizar los scope (ya lo explicaremos más adelante) y otras particularidades que son útiles a la hora de depurar nuestro código. Descárgala aquí.

2) Editor de código

Te recomiendo uno de los 3 principales editores gratuitos y ligeros: Sublime Text, Brackets o Atom.

3) Consola o terminal

Recomiendo iTerm2 para Mac y ConEmu para Windows. Para instalar dependencias en el proyecto y demás usaremos la consola, iTerm2 2 y ConEmu son bastante más personalizables y útiles que las que traen por defecto los sistemas operativos.

Estructura de nuestro proyecto

Vamos a partir de este esqueleto básico, a medida que avancemos iremos añadiendo más ficheros y subdirectorios:

• angular-blog: es la carpeta raíz de nuestra aplicación web, puedes nombrarla como gustes.
• app: directorio donde tenemos el código de desarrollo completo de la app, sin optimizar ni minificar. Lo que hemos trabajado en nuestro entorno local.
• dist: aquí sí tenemos ya el código minificado y optimizado para su despliegue a producción.
• package.json: fichero JSON donde guardamos información del proyecto como la versión, el nombre, el autor, etc. Además en él gestionamos las dependencias (nombre y versiones) que usaremos para el desarrollo de la app.
• bower.json: similar al package.json, pero con él gestionaremos las dependencias de cara al frontend, por ejemplo las librerías de Angularjs o algún framework CSS que queramos usar, como Bootstrap o Foundation.
• README.md: se usa para documentar el proyecto.
• .gitignore: en él indicamos los ficheros o carpetas que no queremos subir al repositorio.
• .editorconfig: este fichero permite configurar el editor de código para que los desarrolladores que cojan este proyecto tengan la misma configuración que tú respecto a espaciado, tabulaciones, etc.

Configurando el package.json

En este archivo incluimos información relativa a la aplicación, se le pueden añadir muchos campos, los cuales tienes todos aquí.

Para el tutorial el contenido del package.json por ahora sería este:

Para crear tu propio package.json ve a la consola o terminal, sitúate en la raíz del proyecto y escribe:

Ahora la consola te va a bombardear a preguntas para crear el Package.json, no hace falta que leas mucho, solo pulsa enter o intro hasta llegar al final.

Configurando el bower.json

Es similar al package.json, pero servirá para las dependencias y librerías que usaremos en el front.

Nuestro bower.json quedaría así:

El objeto «dependencies» se irá llenando conforme añadamos nuevas dependencias con el comando bower por la consola.

Bueno por ahora esta es la introducción, conforme avance en otras entradas consideraré editarla o reestructurarla, en la próxima entrada hablaremos sobre instalar dependencias, creación de rutas y de los módulos de una aplicación en AngularJS, ¡nos vemos!:)