Hola Mundo con Angular 2

En la entrada anterior resolví como conectar npm a través de un proxy, pero he pensado que lo mejor sería dejar un ejemplo desde 0, de como realizar un hola mundo en Angular 2.

Si tenéis tiempo, os recomiendo este video donde Alberto Basalo ( @albertobasalo ) explica de forma genial como empezar con Angular 2.

Si lo único que queréis desarrollar ahora es un hola mundo desde el más mínimo 0, os dejo todos los pasos a continuación:

Adelanto que yo lo haré desde Windows 10, puede que para las versiones de linux, haya alguna diferencia, pero será salvable.

1) descargar e instalar NPM ("node pakage manager" o en español "gestor de paquetes de nodejs")
Podéis obtenerlo desde aquí para vuestro sistema operativo: https://nodejs.org/en/download/

(en la pestaña de home, actualmente ofrecen una versión más avanzada, pero no recomendada para cualquiera)

2) Abrir una consola e instalar angular

npm install -g angular-cli

3) Nos movemos a la carpeta donde deseamos crear nuestra aplicación de angular, y la creamos.

ng new hola-mundo

(le cuesta un buen rato)

4) Instalar un editor para modificar los ficheros. En el video que he puesto anteriormente nos recomienda Visual Studio Code, pero hay muchos y muy buenos, así que puedes trabajar con el que quieras. Yo por seguir al video, instalaré el que recomienda.

Lo podéis descargar desde aquí: https://code.visualstudio.com/Download

5) Abrir la carpeta que habéis hecho con el editor

6) Arrancar el servidor de nmp para ver un primer resultado, para ello primero tenéis que posicionar vuestra consola en la carpeta donde tenéis el proyecto

../hola-mundo/ng serve

7) visualizar el resultado

desde vuestro navegador, accedeis a http://localhost:4200

--------------

Ya está vuestro proyecto de angular funcionando.

Ahora hay que modificarlo un poco para que tenga algo de funcionalidad y así poder probar correctamente nuestro "hola mundo"

Continuemos pues. Adelanto que no pondré el código, porque es preferible que lo copiéis a mano, ya que se quedan mejor los conceptos que si hacéis un copy/paste.

Vamos a src/app/shared/app.componets.ts y ahí modificamos el valor de la variable "title" para que en vez de que nos aparezca "app works!" nos aparezca lo que queramos.

Esa variable "title" está interpolada en src/app/shared/app.componets.html con el formato de la doble llave {{title}}

Esto nos sirve para poder comprobar como los valores que pongamos en este archivo, se pueden posteriormente representar en pantalla

A continuación solo nos queda tratar el html para que se vea como queramos.

Y ¡tachán! ya tenemos nuestro hola mundo molón funcionando:

Me he entretenido también en cambiar los nombres de los archivos, los componentes y demás, para ver todos los sitios que había que tocar.

Si seguís el vídeo de arriba, os será más fácil.

Un saludo

Esprisions!