Autenticación con Angular y Firebase
Autenticación con Angular y Firebase


Para instalar Angular 4 simplemente podemos ir al repositorio quickstart de Angular y clonarlo en tu equipo, una vez lo hayas clonado recuerda ejecutar el comando npm install para instalar las dependencias.

Cuando tengamos las dependencias instaladas, veremos que todas hacen referencia a Angular 2.4 y Angular Router 3.4.

Instalar Angular 4

Para actualizar a Angular 4 simplemente ejecuta el siguiente comando, y recuerda tener instalada la versión >= 2.16 de typescript.

Recuerda ejecutar de nuevo el comando npm install y verás que tu archivo package.json se ha actualizado y ahora contiene lo siguiente.

Para lanzar la aplicación en el navegador simplemente ejecuta el comando npm start y verás como todo está funcionando exactamente igual que con versiones anteriores.

Hola Mundo con Angular 4

La verdad que si has trabajado anteriormente con Angular 2 no verás nada nuevo, pero para los que se estén introduciendo a Angular 4 vamos a crear un nuevo archivo llamado hello.component.ts dentro del directorio src/app y añadimos el siguiente código.

Este es el tipo de componente más básico que nos vamos a encontrar, para crear un componente simplemente debemos importar Component, utilizar el decorador @Component y a continuación añadir una clase, la cual estará relacionada con el componente.

Gracias a moduleId: module.id podemos hacer referencia a la template sin tener que buscar el path relativo, por lo tanto ahora puedes crear un archivo hello.html dentro del directorio src/app y añadir el siguiente código.

Ahora mismo no podemos ver nuestro componente ya que no le estamos diciendo a Angular que lo utilice, para decírselo simplemente abre el archivo src/app/app.module.ts y modifica el código por el siguiente.

Finalmente lo único que nos queda por hacer es utilizarlo ya que Angular ya sabe de la existencia del componente HelloComponent, para ello vamos a abrir el componente src/app/app.component.ts y vamos a añadir el componente hello a template.

Si revisas tu navegador de nuevo verás que ya aparece el componente HelloComponent y todo está funcionando, ya tienes tu primera app funcionando con Angular 4.

Cursos de Angular

Si estás interesado en Angular, visita Cursosdesarrolloweb, tenemos varios cursos sobre Angular que seguro te interesan.

Todos los cursos tienen acceso de forma indefinida 24/7, así que puedes seguirlos adecuando el horario a tus necesidades.