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!

Problema con el proxy en NPM

Estaba intentando realizar un ejemplo de Angular 2 desde el ordenador del trabajo.
Debido a la configuración del proxy, no conseguía conectarme al repositorio de npm para poderlo configurar.

El error era la configuración del proxy:
" tunneling socket could not be established, cause=Parse Error "


Y la solución que he aplicado satisfactoríamente para configurar el proxy, es esta:

npm config set http-proxy http://user:password@my.proxy:8000
npm config set https-proxy http://user:password@my.proxy:8000
npm config set strict-ssl false

Lógicamente, hay que poner vuestro usuario, password, url del proxy, y puerto.

Espero que además de a mi, que me lo dejo apuntado aquí por si me vuelve a pasar, pueda servir a alguien.

Un saludo!
Esprisions!

¿vuelvo?

En estas cortas vacaciones de verano, releí algunas entradas del blog.

Buff, hace mucho que no escribo, y no quiero que este pequeño espacio en internet se quede muerto y desangelado.

Al final, siempre ha sido una pequeña libreta donde apuntar, para mi y para el que lo necesite, ideas, frases, opiniones, ayudas...

Facebook ha destruido mi blog, porque ahora todo iba a parar a Facebook, y seguirá siendo así, supongo. Pero quiero volver a ir publicando de vez en cuando alguna entrada en mi bitácora.

Un saludo de nuevo a todos!

Esprisions!