$http con Karma y Angular
$http con Karma y Angular
¡INSCRÍBETE A CUALQUIER CURSO CON UN 50% DE DESCUENTO PARA NUEVOS CLIENTES!

Primer tutorial sobre Angular2, aunque está en una fase muy temprana y aún se están desarrollando muchos de los componentes ya podemos tomar nuestras primeras impresiones para entender un poco cómo funciona todo.

En este tutorial vamos a crear un ejemplo utilizando el generador de Yeoman yo angular2 para ver lo básico y cómo empezar con Angular2.

Primer proyecto con Angular2

Crea un directorio donde quieras tener tu proyecto y ejecuta el siguiente comando para obtener la base de nuestro proyecto con todas las dependencias, mi directorio se llamará app1, te recomiendo que hagas lo mismo.


Ahora que tenemos instalado el generador ejecuta el siguiente comando (ahora sí que es necesario que estés en tu directorio).


Esto habrá creado el proyecto completo con todas las dependencias, lo que nos interesa son 3 archivos, src/index.html, src/index.js, src/app1.html.

angular2dir

Si quieres lanzar el proyecto puedes hacerlo a través de gulp con el siguiente comando.


Si abrimos el archivo index.html veremos parte de la configuración de la app.


Parece complejo pero no lo es, simplemente definimos los paths de los archivos de la aplicación e importamos nuestra app para que pueda funcionar con module.main();

Ahora vamos a abrir el archivo index.js y tratemos de entenderlo.


Importamos los componentes que necesitamos de angular2/angular2 y lo mismo con angular2/di, de esta forma ya los tenemos disponibles.

Después a través de la anotación @Component, disponible en la nueva versión de typescript definimos el selector de nuestra app, en nuestro caso app1.

Lo mismo hacemos con template, donde definimos la url del archivo html. Después tenemos la clase App1 y a través de su constructor hacemos un console.log.

Finalmente lanzamos la app con bootstrap(App1); a través de la función main que llamamos desde el archivo index.html.

Ahora vamos a crear una nueva clase para ver cómo podemos añadir nuevos componentes, importarlos a nuestra app y utilizarlos en nuestras vistas.

Crea un nuevo directorio dentro de src llamado services y dentro un archivo llamado Todos.js con el siguiente código.


Para poder utilizar esta clase en nuestro index.js vamos a modificar el código de la siguiente forma.


Lo primero que hacemos es incorporar la directiva For de Angular2 para utilizarla en nuestro archivo app1.html.

Con la línea.


Tenemos disponible la clase Todos para ser utilizada.

Si te fijas, también hemos modificado @Component añadiendo la propiedad services el cuál es un array donde añadimos nuestra clase Todos.


Y lo mismo hacemos con @Template, en este caso añadimos la directiva For para poder utilizarla en nuestra vista.


Lo último que hemos modificado ha sido la clase App1 añadiendo la propiedad todos la cuál contiene una instancia de la clase Todos que hemos definido anteriormente.


Ahora ya tenemos disponible en la vista app1.html el objeto todos con la propiedad items el cuál es un array que hemos definido en la clase Todos.

Antes de poder mostrar los items debemos añadir el path services a System.paths desde el archivo index.html, así que abre dicho archivo y modifica System.paths.


Ahora sí, abre el archivo app1.html y modifica el código para mostrar los items.


Aquí vemos la directiva for en acción, así de sencillo es poder recorrer los items de nuestra clase Todos.

Espero que te haya gustado el tutorial y si es así te agradezco que lo compartas en las redes sociales.

Aunque todavía queda mucho tiempo para que salga Angular2 podemos tener una primera impresión para saber hacia donde se mueve todo.