Empezando con Angular 2

12 junio, 2016 joseucarvajal Angular 2, angular-cli, GitHub

Hace unos 2 aos, 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 versin 2.0, este cambio implica varias cosas importantes, la
primera es que la versin 2 de no es compatible con la versin 1.x, la
segunda es que Angular 2.0 est escrito sobreTypeScript en
colaboracin con Microsoft, as que bueno, ya son dos cosas para
aprender: TypeScript y Angular 2, tambin se puede
aprender Ecmascript 6 ES6 en lugar de TypeScript, aunque si bien es
cierto que para quienes tenemos un background con la versin 1
debemos aprender nuevos aspectos de sintxis, tambin 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 trminos.
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 cdigo

Lo primero que har ser disponer de un buen editor de cdigo, 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, facilitndonos 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 instruccin
npm de (Node Package Manager), debemos obtener un resultado
como el siguiente:
Paso 3: Instalar angular-cli para la gestin de proyectos

Angular 2, es mucho ms que un framework, de hecho es todo un

ecosistema que consiste de muchas herramientas para facilitar nuestro
da a da en tareas de desarrollo, debug, testing, integracin continua,
tareas build o generacin 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, integracin
con pruebas unitarias, etc.

Para instalar angular-cli, simplemente escribimos el comando npm

install -g angular-cli en nuestra consola:
Con la instruccin 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 creacin 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 conexin a

internet, cuando se ha terminado de crear el proyecto, deberamos
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 automticamente (iremos
profundizando en ellos ms 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 permitindonos visualizar el resultado en un browser web.

Debemos tomar nota de los datos que nos arroja el ng serve, el ms

importante es la URL: http://localhost:4200/. Al visitar esta direccin,
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 utl para visualizar los
cambios en la aplicacin a medida que vamos cambiando el cdigo,
evitndonos con esto tener que recargar la pgina manualmente.
 Una vez hemos generado el nuevo proyecto, podemos versionarlo en
GitHub como lo indico en este Post.

Si analizamos la distribucin de los archivos, notaremos que se ha

generado automticamente una aplicacin con un componente,
principalmente tenemos:

src/index.html: Archivo principal que contiene nuestra aplicacin

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 aplicacin.
 src/app/angular2-primerproyecto.component.css: Aqu definimos
nuestras reglas CSS para el componente.

Una descripcin lgica ms grfica de la estructura es la siguiente:

El archivo principal es index.html, bsicamente es el que vemos

cuando ejecutamos la aplicacin desde el browser, desde index.html,
estamos incluyendo el componente src/app/angular2-
primerproyecto.component.ts:
 En la lnea 24 del index.html, se incluye el componente creado
ensrc/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 lnea 1, estamos importando el mdulo Component desde

@angular/core, esto nos permitir utilizar decorador, atributo, o
anotacin @Component, precisamente para especificar que estamos
creando una clase que es un component Angular 2, dentro de la
definicin de este decorator @Component, estamos configurando las
propiedades: selector, templateUrl, y styleUrls:

Lnea 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 propiedadselector.
Lnea 6 propiedad templateUrl: Aqu especificamos cual es el
archivo html que contiene la definicin de la interfaz de usuario.
Lnea 7 propiedad styleUrls: Cmo se puede ver, corresponde a un
arreglo ya que sus valores estn entre corchetes, en este arreglo
podemos especificar todos los archivos css que actuarn sobre el
componente.
 Esta estructura de proyecto est basada en el Angular 2 Style Guide,
es bueno leer esta gua para que tengamos una referencia de cmo
escribir aplicaciones Angular 2 que sean fciles de mantener y
escalar.

El cdigo 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 cdigo fuente.