Entre Septiembre y Octubre del 2015 miré Angular2 y Typescript, en aquel momento no me sentí del todo cómodo utilizando quizás por falta de conocimiento o quizás por la costumbre de Angular 1x o no querer realizar el cambio  a Typescript y algunas funcionalidades estaba en “experimentals”.

Luego de 6 meses,  ver como ha madurado Typescript , como la comunidad lo ha aceptado y  el equipo de Google se ha amarrado a Typescript por defecto me hace pensar, estaba yo equivocado ?

Porque apostar de nuevo en Angular2 y Typescript?

Hay que reconocer que Angular es uno de los frameworks más utilizados para desarrolla aplicaciones Javascript y SPA y nos permite desarrollar de forma modular, mantenible y testeable.

Angular2 se apoya en Typescript, ES5 Es el Javascript más usado y a dia de hoy aunque no soporta ser compilado, ES6 es un superset de Javascript e incluye Classes, Modules y más, pero Typescript es un superset de ES5/ES6 con soporte a tipado , compile, type checking, interfaces por tanto tenemos todo en uno.

La Arquitectura de Angular2 se apoya en 4 puntos principales Components, Directives , Routers y Services.

Components realizan el trabajo de los Controllers estos encapsulan el template , los datos y el comportamiento de una vista, este contiene los métodos que interactuar con la vista.

Nuestras aplicaciones de angular se componen de múltiples componentes que dentro pueden contener N Components. La ventaja de este tipo de arquitectura es es que nos permite reutilizar nuestro componente en diferentes áreas de nuestra aplicación o en diferentes aplicaciones.

Ejemplo de component:

import {Component} from 'angular2/core'

@Component({
 selector: 'myplayer',
 template: `
 <h3>{{playername}}</h3>
 `
})
export class PlayerComponent {
 playername= "Lebron";
}

Services permiten a los componentes comunicarse con el resto de la aplicación, llamas a las api etc estos encapsulan toda lógica  de comunicación con el backend y nada de lógica relacionada con la interfaz de usuario.

Router es responsable de la navegación cuando un usuario navega de una página a este se encarga de saber que componentes cargar para mostrarle al usuario.

Directive son muy similar a los componentes pero sin un template asociado, este le agrega comportamiento a los elementos existente en el DOM.

Configurando el entorno

Para una aplicación con Angular2 la forma correcta seria usando angular-cli, a día de hoy no esta terminada, una opción mas funcional es usar angular-seed.

Antes de iniciar recordar instalar nodejs https://nodejs.org/en/download/ y luego mediante npm  instalar Typescript, webpack, webpack-dev-server y typings.

npm install -g webpack webpack-dev-server typings typescript

Luego de descargar angular-seed desde la terminal instalaremos las dependencias  escribiendo  npm install  e iniciaremos el servidor web y la compilación con npm start

npm install
npm start

Con esto ya tenemos nuestra app inicial con Angular2 solo debemos abrir nuestro navegador e ir http://localhost:3000/ y tendremos nuestro proyecto inicial.

Código de ejemplo: https://github.com/danywalls/ejemplos-con-angular2

Happy Angular!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *