« Back
in angular javascript typescript es6 tutorial read.
Aprende Angular 2 en 5 minutos

Aprende Angular 2 en 5 minutos.

Angular 2 por fin está en beta... RELEASE CANDIDATE!

Este post ha sido actualizado a la última versión de Angular (2.0.0-rc.2) el 21/06/2016

Antes de seguir, quiero dejar aquí el link al repo de GitHub con el proyecto, siéntete libre de clonarlo para seguir los pasos o empieza tú otro desde cero. Aclarar también que, tal y como dije en un post anterior, este tutorial será íntegramente en TypeScript.

El pintor

Llegados a este punto tenemos que decidir si la unidad mínima de nuestra aplicación será una clase o una interfaz, en este caso, como no voy a añadir ninguna lógica en sí a los objetos, sino que lo único que quiero es beneficiarme del tipado de TypeScript, he optado por la interfaz.

Array de pintores

Una vez definida nuestra interfaz, podemos beneficiarnos del tipado para crearnos un array estático de pintores famosos que utilizaremos como mock de un servicio web REST auténtico.

El servicio

Ahora que ya tenemos el mock listo, haremos las cosas bien y nos haremos un servicio de angular para obtener los datos.

Como habrás podido observar, hemos seguido una convención que establece que los ficheros .ts son en minúscula, y utilizan distintos sufijos dependiendo de lo que se trate, .component si la clase es un @Component de Angular, .service.ts si es un servicio, etc...

Un par de cosas más a destacar sobre éste código:

  • Crear un servicio es tan fácil como importar la clase Injectable del 'angular2/core', y utilizar el decorador1 @Injectable.
  • Estamos devolviendo el resultado como una promesa, para hacer el servicio más auténtico todavía. Si te has perdido con esto último, échale un vistazo a este post. ;)

Primer componente

Ahora que ya está todo listo para mostrar nuestra lista de pintores famosos, empezaremos por algo más sencillo, la vista de detalle de cada pintor, para poder aclarar algunos conceptos previos.

Sí... lo sé, parece magia, puede que hasta un poco incomprensible pero, créeme, con el tiempo te acostumbras! ;) Básicamente nuestro componente está formado por el selector, que es la etiqueta de html en la que Angular va a renderizar nuestro Web Component, y el template, que es el html en sí que vamos a mostrar con los bindings de Angular.

Vamos por partes, como Jack el Destripador (badum tsss!...):

  • La clase que exportamos debajo del componente es la que gestiona la lógica de nuestro componente en sí, las anotaciones de arriba simplemente forman parte del decorador, lo que generará meta-datos necesarios para Angular 2.
  • Otro elemento importante del component es el inputs, que básicamente es un array de strings en el que le decimos al componente qué atributos de la clase vamos a usar dentro del template.
  • Los bindings de Angular, tienen esta sintaxis: {{painter.name}}, y simplemente implican que cualquier cosa contenida dentro de las dobles llaves Angular lo reemplazará por su valor en tiempo de compilación, en nuestro caso, el nombre de nuestro pintor (aquí acaba el único parecido de Angular 2 con el 1, aparte del nombre xD).
  • Más cosas raras: *ngIf, es una de las directivas que vienen built-in en el framework de Angular, vamos, un if() clásico de toda la vida. En este caso le estamos diciendo al render que sólo muestre los detalles del pintor si éste está definido, ya que vámos a pasárselo desde la lista de pintores, que será el componente principal de la aplicación.
  • Por último, pero no menos importante, vemos un input normal y corriente con un tag un tanto sospechoso... [(ngModel)]. Esto quiere decir que estamos bindeando (o asociando) el valor del input con el atributo que queramos modificar del objeto que representa. Los corchetes y paréntesis representan que es un two-way data-binding.
  • El resto del template es HTML normal y corriente (fiufff...)

La lista de pintores famosos

Llegamos al componente principal de la aplicación, la lista generada dinámicamente a partir del servicio web que vamos a consumir (nuestro mock).

Volvemos a la explicación poco a poco:

  • Habrás observado otra de las directivas por defecto de Angular, *ngFor, el anteriormente llamado ng-repeat, ahora mucho más estándar, ya que parece completamente un bucle for-of.
  • Cosas que nos extrañan en el template: [class.selected], es la manera de asignar classes de css, entre corchetes [].
  • La manera de registrar eventos nativos es (click), encerrando el evento entre paréntesis, como podrás observar, el evento al que llamamos es un método público de nuestro componente.
  • Aquí es donde pasa toda la magia... <my-painter-detail></my-painter-detail>, desde nuestro componente principal, estamos llamando al componente que definimos anteriormente y pasándole como parámetro el pintor seleccionado (ahora es cuando cobra sentido el atributo inputs del componente detalle).
  • El punto anterior no funcionaría sin registrar en directives las directivas (o componentes) a las que vamos a llamar dentro de nuestro template.

Para consumir nuestro servicio fake, hemos seguido los siguientes pasos básicos:

  • 1) lo hemos registrado en el providers
  • 2) lo hemos añadido en el constructor
  • 3) lo hemos llamado dentro de nuestro método ngOnInit2

Bootstrapping

Nos queda el pegamento de toda la aplicación, el archivo que llamará y cargará todos los demás componentes de la aplicación.

Últimos (o primeros pasos)

Para que todo lo anterior funcione, nos faltan tres ficheros, que serán siempre iguales (o parecidos):

  • Obviamente, el index.html:
  • El fichero de configuración system.config.js:
  • El package.json con alguna que otra pijada:
  • El tsconfig.json para el compilador de TypeScript:
  • Y por último, el typings.json, para tener las declaraciones en TypeScript, de todas las librerías JavaScript utilizadas en este tutorial.

Estructura de la aplicación

Para tener todo más o menos organizado, deberíamos seguir la siguiente estructura...

famous-painters  
+-- app
|   +-- app.component.ts
|   +-- main.ts
|   +-- painter-detail.component.ts
|   +-- painter.service.ts
|   +-- painter.ts
|   +-- painters.mock.ts
+-- img
|   +-- brush.png
+-- styles
|   +-- app.css
+-- index.html
+-- package.json
+-- system.config.js
+-- tsconfig.json
+-- typings.json

Resultado final

Nuestra flamante aplicación en Angular 2 debería tener este aspecto:

https://gyazo.com/480f37aefa3f628d41779854f9b62860

Espero que este tutorial te haya sido de ayuda y que haya aumentado tus ganas de seguir aprendiendo Angular 2. Cualquier comentario o cosa que sea susceptible de ser mejor explicada en futuros posts será bienvenida en los comentarios! ;)

Bonus

Algunas personas me han dicho (con razón) que es bastante confuso, sobre todo al principio, el ejecutar npm start y ver chorrocientos ficheros compilados (entre .js y .js.map). Si eres como yo y utilizas Visual Studio Code, aquí tienes un pequeño bonus que hará tu vida más feliz:

Este sencillo json de configuración (que debe ir dentro de la carpeta .vscode) evitará que se muestren en el editor todos los ficheros generados, dejándote ver sólo los que de verdad interesan (los .ts). Vamos, algo así como un .gitignore pero para VSCode!


  1. En adelante en este blog, utilizaré la palabra Angular para referirme a Angular 2, y AngularJS (tanto en mayúscula como en minúscula) para referirme a Angular 1.x, por lo que estoy viendo en internet, muchos otros desarrolladores están usando este criterio.

  2. Este evento también lleva la marca de la casa de Angular 2!

comments powered by Disqus