Empezando con Angular 2

Hace unos 2 años, en esta gran empresa donde laboro IT-ROI Solutions, hemos venido realizando todo el Front-end de nuestros productos en AngularJS 1.x, cabe destacar que la experiencia ha sido positiva y enriquecedora.

Hace un tiempo ya que Google anunció la reescritura de AngularJS a su versión 2.0, este cambio implica varias cosas importantes, la primera es que la versión 2 de no es compatible con la versión 1.x, la segunda es que Angular 2.0 está escrito sobre TypeScript en colaboración con Microsoft, así que bueno, ya son dos cosas para aprender: TypeScript y Angular 2, también se puede aprender Ecmascript 6 ES6 en lugar de TypeScript, aunque si bien es cierto que para quienes tenemos un background con la versión 1 debemos aprender nuevos aspectos de sintáxis, también lo es que existen muchas similitudes entre las versiones 1.x y 2, como lo manifiesta John Papa en An Angular 2 Force Awakens, los elementos core del framework no han cambiado significamente a nivel conceptual, así que tenemos estos 7 keys to Angular 2:

1. Modules
2. Components
3. Templates
4. Data Binding
5. Structural services
6. Services
7. Dependency Injection

Estos conceptos no son tan diferentes de lo que ya conocemos en Angular 1.x, en otro Post comentaremos sobre estos términos.

En vista de lo anterior, vamos a estudiar y aprender Angular 2, empezando con este post, donde explicaré algunas herramientas para empezar a trabajar con este framework/ecosistema.

Paso 1: Editor de código

Lo primero que haré será disponer de un buen editor de código, para esto he seleccionado Visual Studio Code, que se puede descargar desde aquí, unas de las razones por las que he seleccionado este editor es que dispone de varias extensiones para Angular 2, facilitándonos la vida a la hora de trabajar. Así que bien, descargamos el editor y lo instalamos (siguiente, siguiente…).

Paso 2: NodeJS para gestionar paquetes

Posteriormente se debe descargar e instalar NodeJs para gestionar los diferentes paquetes con los que trabajaremos, una vez instalado debemos verificar que NodeJS quedó bien instalado, para esto ejecutamos una consola de comandos e indicamos la instrucción «npm» de (Node Package Manager), debemos obtener un resultado como el siguiente:

Paso 3: Instalar angular-cli para la gestión de proyectos

Angular 2, es mucho más que un framework, de hecho es todo un ecosistema que consiste de muchas herramientas para facilitar nuestro día a día en tareas de desarrollo, debug, testing, integración continua, tareas build o generación de versiones optimizadas para deployment, profiling… etc (hablaremos de estas herramientas en otro post). Una de estas herramientas es angular-cli que nos permitirá generar proyectos, ejecutar estos proyectos en un servidor local, integración con pruebas unitarias, etc.

Para instalar angular-cli, simplemente escribimos el comando «npm install -g angular-cli» en nuestra consola:

Con la instrucción anterior, hemos instalado angular-cli de forma global en nuestro computador, lo cual significa que podemos utilizarlo en cualquier carpeta.

Paso 4: Crear el nuevo proyecto

Una vez hemos instalado angular-cli, procedemos con la creación del proyecto con el comando «ng new [nombre del proyecto]«. Primero voy a ubicarme en la carpeta C\blogs: de mi computador:

Este paso, puede tardar un tiempo dependiendo de nuestra conexión a internet, cuando se ha terminado de crear el proyecto, deberíamos tener una estructura de archivos parecida a la siguiente:

Lo que podemos ver, es que angular-cli se ha encargado de crear muchos archivos y componentes automáticamente (iremos profundizando en ellos más adelante). Ahora podemos ver en funcionamiento nuestro proyecto generado, para ellos, basta con ubicarnos en la carpeta «angular2-primeroproyecto» y ejecutar el comando «ng serve«, de esta forma, angular-cli estará ejecutando un servidor permitiéndonos visualizar el resultado en un browser web.

Debemos tomar nota de los datos que nos arroja el ng serve, el más importante es la URL: http://localhost:4200/. Al visitar esta dirección, debemos obtener un resultado como el siguiente:

Cabe destacar que si en lugar de ejecutar el comando «ng serve«, ejecutamos «ng serve –port 4201 –live-reload-port 49153«, podemos ir a la URL: http://localhost:4201/, pero dispondremos de un mecanismo denominado Live reload, muy utíl para visualizar los cambios en la aplicación a medida que vamos cambiando el código, evitándonos con esto tener que recargar la página manualmente.

Una vez hemos generado el nuevo proyecto, podemos versionarlo en GitHub como lo indico en este Post.

Si analizamos la distribución de los archivos, notaremos que se ha generado automáticamente una aplicación con un componente, principalmente tenemos:

• src/index.html: Archivo principal que contiene nuestra aplicación
• src/app/angular2-primerproyecto.component.html: Archivo que corresponde a la vista, interfaz de usuario en HTML del componente creado
• src/app/angular2-primerproyecto.component.ts: Este archivo corresponde al controller de nuestro componente, es decir, aquí controlamos los eventos de usuario, tales como click, etc. Este controller nos permitirá comunicar la vista con los diferentes modelos (clases del negocio) de nuestra aplicación.
• src/app/angular2-primerproyecto.component.css: Aquí definimos nuestras reglas CSS para el componente.

Una descripción lógica más gráfica de la estructura es la siguiente:

El archivo principal es index.html, básicamente es el que vemos cuando ejecutamos la aplicación desde el browser, desde index.html, estamos incluyendo el componente «src/app/angular2-primerproyecto.component.ts«:

En la línea 24 del index.html, se incluye el componente creado en src/app/angular2-primerproyecto.component.ts y llamado <angular2-primerproyecto-app>.

Al analizar el componente src/app/angular2-primerproyecto.component.ts, tenemos lo siguiente:

En la línea 1, estamos importando el módulo Component desde «@angular/core«, esto nos permitirá utilizar decorador, atributo, o anotación @Component, precisamente para especificar que estamos creando una clase que es un component Angular 2, dentro de la definición de este decorator @Component, estamos configurando las propiedades: selector, templateUrl, y styleUrls:

• Línea 5 propiedad selector: Nos indica el nombre del componente, recuerden que desde index.html, referenciamos el componente como: <angular2-primerproyecto-app> que corresponde al valor definido en la propiedad selector.
• Línea 6 propiedad templateUrl: Aquí especificamos cual es el archivo html que contiene la definición de la interfaz de usuario.
• Línea 7 propiedad styleUrls: Cómo se puede ver, corresponde a un arreglo ya que sus valores están entre corchetes, en este arreglo podemos especificar todos los archivos css que actuarán sobre el componente.

Esta estructura de proyecto está basada en el Angular 2 Style Guide, es bueno leer esta guía para que tengamos una referencia de cómo escribir aplicaciones Angular 2 que sean fáciles de mantener y escalar.´

El código se puede descargar de aquí.

Resumen

En este post aprendimos:

1. Instalar NodeJS para gestionar los paquetes de nuestras aplicaciones Angular 2.
2. Instalar angular-cli para disponer de un conjunto de utilidades para generar, testear, construir y generar proyectos con perfiles de desarrollo y despliegue.
3. Instalar Visual Studio Code para editar nuestros proyectos Angular 2.
4. Crear un nuevo proyecto Angular 2 y entender sus componentes principales y sus relaciones entre sí (por ahora, component, template html y estilos css).
5. Ejecutar el proyecto Angular2 con ng serve y con live reload para ver los cambios al mismo tiempo que vamos editando el código fuente.