Hello World en Angular

Angular

Ahora que ya comprendes mejor lo que es Angular y que ya lo tienes instalado, sino es así, pásate por este post para hacerlo; ya podemos crear nuestra primera página en este Framework.

Se trata de un Hello World, que es básicamente la página más sencilla del mundo con el objetivo de tener nuestra primera interacción con Angular y ya verás que gracias a Angular CLI será realmente sencillo.

¡En fin! Lista la introducción, procedamos a crear nuestro Hello World en Angular.

Crear Nuestro Hello World en Angular

Lo primero será crear una carpeta donde te de la gana que se llame curso-angular y dentro crear otro directorio llamado hello-world-angular. Esto es un ejemplo, realmente puedes ponerle el nombre que te de la gana.

A continuación accedemos a la terminal, yo lo hago desde un mac, así que si tú utilizas CMD puede que los pasos sean algo distintos, pero en fin, yo te explicaré cómo hacerlo en una terminal de linux o mac. En Windows imagino que será muy parecido, pero no sé utilizar el CMD, ¡lo siento!

En fin, desde la terminal acceder al directorio hello-world (o el que hayas creado para este ejercicio) y entramos dentro. En la terminal de Mac nos podemos desplazar con cd.

Una vez dentro del directorio utilizaremos el siguiente comando:

$ ng new hello-world

Sin el $, es solo para que veas que es código de la terminal, es como un estándar.

Dependiendo de la versión, nos harán o no una serie de preguntas. La primera es si queremos utilizar Angular Routing, debemos decirle que no. A continuación nos preguntarán si utilizamos CSS, SAS, LESS… debemos darle a CSS.

Al darle veremos que la consola comienza a instalar tela y tela de paquetes, es normal, simplemente espera unos minutos a que se instale todo correctamente. Puede que durante el proceso salga algún error, pero tú pasa de eso jajaja.

Ahora que ya tienes todo instalado deberás levantar el servidor que sostiene a Angular, deberás utilizar este comando dentro del directorio donde hemos instalado todo (a priori hello-world):

$ ng serve

Verás que comenzará a compilar cosas y si el proceso ha salido bien te saldrá lo siguiente:

ng serve success

En el mensaje verás que te dice que tienes la página en http://localhost:4200, accede a la dirección y comprueba que efectivamente se muestra la página de ejemplo de Angular.

¡Esto no es un Hello World!

¡Lo sé! ¡Ya vamos! Ahora tendrás que acceder a los ficheros instalados en el directorio hello-world (o el que hayas elegido), en ese sentido te recomiendo que utilices un IDE como VS Estudio o Atom para que sea más sencilla la manipulación del código.

Debemos entrar en src > app > app.component.html (Lo que hay dentro de los tag de body) y procedemos a borrar todo lo que hay en este fichero (que es todo lo que vemos en localhost:4200).

En su lugar pondremos lo siguiente, código HTML muy sencillo:


<h1>Hello World!</h1>

¡Y listo! Si accedemos a localhost:4200 veremos que ahora sí que sí tenemos nuestro Hello World. ¡A partir de ahora iremos profundizando más en todas las funciones que ofrece Angular hasta poder crear unas SPA increíbles!

Por cierto, para terminar con el proceso de angular en localhost:4200 tienes que acceder a la consola y pulsar ctrl + c. Será mejor que cuando termines de trabajar lo pares así, que sino tendrás el servidor arriba consumiendo recursos. Pero ten en cuenta que tendrás que levantar el servidor siempre que quieras que los cambios que realizas en el código se apliquen, de otro modo no se reflejarán los cambios.

¡Y eso es todo! ¿Has conseguido crear tu primera página en Angular? ¿Has tenido algún problema durante el proceso? ¿Quieres dar algún consejo a los demás? ¡Deja tu comentario!

Tags:

Leave a Reply