Angular 2 en 10 minutos

 

La manera en que podemos desarrollar aplicaciones en la actualidad ha hecho que la complejidad de los desarrollos bajen de una manera considerable, y a pesar de incluir nuevas tecnologías que al principio pueden parecer algo complicadas, en realidad ayudan no solo a construir mejores aplicaciones sino a estar adaptados a los requerimientos de usabilidad actuales.

 

Una de estas tecnologías qué podemos utilizar es AngularJS, el cuál es un framework MVW (Model-View-Whatever) que se traduce como Modelo-Vista-Lo-que-sea-que-funcione-para ti, el mismo es basado en JavaScript y permite dotar a nuestros documentos HTML estáticos de una funcionalidad dinámica y de utilizar los bindings para inyectar data dentro de nuestro HTML usando las directivas propias del framework.

 

Angular funciona bastante bien, pero tenemos una nueva iteración del mismo y permite extender la funcionalidad del framework mucho más, veamos entonces como podemos empezar a utilizar Angular 2 en tan solo 10 minutos.

 

 

1. Obteniendo TypeScript y Angular 2

Para realizar esta implementación vamos a trabajar de la manera más óptima posible, para ello utilizaremos Typescript el cuál es un lenguaje que permite extender la funcionalidad de JavaScript para enfocarlo en el uso de clases y objetos.

 

Para obtener tanto TypeScript como Angular 2 es necesario que tengamos Node.js, así como su gestor de paquetes en nuestro ordenador, si todavía no los tenemos puedes darle un vistazo a los primeros pasos con Node.js en este tutorial.

 

Una vez que tengamos Node.js y el gestor de paquetes NPM podemos ejecutar los comandos para obtener lo que necesitamos:

npm install -g tsd@^0.6.0
tsd install angular2 es6-promise rx rx-lite

Adicionalmente debemos instalar el compilador de TypeScript ya que el navegador no reconoce los archivos .ts:

npm install -g typescript@^1.5.0-beta

Una vez ejecutados, deberíamos ver por consola la instalación de los módulos, el compilador y las librerías del framework.

 

 

Por último solo nos queda instalar un servidor local, para ejecutar nuestra aplicación de manera profesional, para ello en nuestra consola y a través de NPM ejecutamos lo siguiente:

npm install -g http-server

2. Construyendo nuestra aplicación

Una vez que tengamos todo lo necesario para el funcionamiento de nuestra aplicación creamos una carpeta donde tendremos los archivos del proyecto, podemos llamarla angular10min, y dentro vamos a crear un archivo llamado aplicacion.ts y nuestro usual index.html.

 

Lo primero que vamos a hacer es agregar las clases y componentes a nuestro archivo aplicación.ts, para ello lo primero que debemos hacer es importar Angular 2 de la siguiente forma:

import {Component, View, bootstrap} from 'angular2/angular2';

Para verificar el funcionamiento de nuestro compilador estando en la carpeta de nuestro Proyecto vamos a ejecutar lo siguiente:

tsc --watch -m commonjs -t es5 --emitDecoratorMetadata aplicacion.ts

Con lo que deberíamos recibir por consola que la compilación se ha completado con éxito y que además el mismo está esperando por cambios en el archivo, eso por haber usado el parámetro –watch.

 

 

Ahora creamos nuestro componente, donde declararemos el selector que usaremos en nuestro código HTML, así como nuestra vista donde incluiremos la plantilla donde inyectaremos los cambios.

@Component({
  selector: 'my-app'
})

@View({
  template: '<h1>Hola {{ name }}</h1>'
})

Como nuestro compilador está vigilando por cambios y hemos incluido algunos es normal que veamos algo de actividad en nuestra consola.

 

Ahora solo nos queda realizar la declaración de nuestra clase e inicializar los objetos dentro del constructor que serán los que luego serán vaciados en la vista. Por último utilizamos la función de bootstrap() que se encargará de hacer el renderizado de los componentes en nuestra página.

class miComponente {
  name: string;
  constructor() {
    this.name = 'Jonathan';
  }
}

bootstrap(miComponente);

Ya tenemos nuestro código Typescript terminado, y si comprobamos en nuestra carpeta debemos tener un JavaScript que es el resultado de nuestra compilación del .ts.

 

 

 

 

3. Construyendo el HTML

Para finalizar nos queda construir el HTML, realizar las debidas importaciones así como incluir los selectores que declaramos en nuestro archivo .ts, para ello incluiremos el system.js, el cual nos permitirá realizar el import de nuestro archivo, veamos el contenido de nuestro HTML:

<html>
  <head>
    <title>Angular 2 en 10 minutos</title>
    <script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
    <script src="https://jspm.io/system@0.16.js"></script>
    <script src="https://code.angularjs.org/2.0.0-alpha.28/angular2.dev.js"></script>

  </head>
  <body>
    <my-app></my-app>
    		    <script>System.import('aplicacion');</script>
  </body>
</html>

Hecho esto solo nos queda ejecutar nuestro servidor y correr nuestra aplicación, para ello detenemos el compilador y ejecutamos el servidor con el siguiente comando:

http-server

Esto levantará un servidor en localhost:8080 y nos permitirá acceder a nuestra aplicación.

 

Veremos los datos definidos en nuestro archivo TypeScript son aquellos inyectados en nuestra aplicación, de esta forma separamos la lógica de nuestra aplicación y podemos tener un documento HTML limpio que solo maneje los selectores que hemos creado gracias a Angular 2, dándonos una aplicación que funciona de manera más óptima y eficiente empleando el menor esfuerzo posible.