Subir archivos con Angular2
Subir archivos con Angular2
¡INSCRÍBETE A CUALQUIER CURSO CON UN 50% DE DESCUENTO PARA NUEVOS CLIENTES!

Angular 2 está en beta desde hace unos días, es decir, el core ha sido definido y ya no debe cambiar nada excepto solventar errores y pequeñas modificaciones, esto no quiere decir que no debamos o podamos seguir creando nuestras aplicaciones con la versión 1 de este framework, Angular 1 seguirá siendo estable durante mucho tiempo aunque la Angular 2 pase a RC, así que podremos seguir creando aplicaciones con ambas versiones.

En este tutorial vamos a seguir el tutorial de la documentación para crear nuestra primera aplicación con Angular 2, lo primero que debemos hacer es crear un proyecto con la siguiente estructura.

angular2-start

Lo primero que vamos a hacer es definir instalar las dependencias necesarias, así que abre el archivo package.json y añade lo siguiente.


Para instalar todas las dependencias simplemente ejecuta el siguiente comando desde tu terminal.


Ahora vamos a hacer la configuración de typescript a través del archivo tsconfig.json, así que abre el archivo y añade el siguiente código.


Este archivo se encargará de generar los javascripts a partir de los archivos typescript (.ts).

Primer Componente con Angular 2

Abre el archivo app.component.ts y añade el siguiente código, el cuál define un componente en Angular 2.


Es muy sencillo, importamos Component de angular2/core, utilizamos el decorador estableciendo el nombre de nuestra app (my-app), similar al ng-app en Angular 1 y escribimos el contenido de la template, que será el html que contenga nuestro componente.

Finalmente sólo debemos exportar la clase AppComponent para poder hacer el boostrap de nuestra aplicación.

Ahora abre el archivo boot.ts y añade el siguiente código.


Si te fijas es más de lo mismo, importamos bootstrap de angular2/platform/browser y nuestro componente AppComponent, finalmente lanzamos la aplicación.

Abre el archivo index.html y añade lo siguiente, con lo cuál nuestra aplicación estará finalizada.


Y eso es todo, para ver tu app en acción sólo debes ejecutar el siguiente comando.


Este comando lanzará el compilador typescript para generar los javascripts y un servidor estático llamado lite-server que cargará el index.html y se refrescará cada vez que actualicemos cualquier archivo.