Creando mi primer proyecto en Angular 9

Angular es uno de los frameworks de código abierto lideres en el mercado para el desarrollo de aplicaciones, tanto web como móvil. No puede ser de otra manera ya que el equipo de Angular (perteneciente a Google) ya nos tiene acostumbrados a una versión mayor cada 6 meses, incluso manteniendo la API estable desde el lanzamiento de su versión 2.

En esta entrada no vamos a hablar demasiado de los cambios ya que son muy técnicos y al final la manera de programar es la misma, así que vamos a realizar un ejemplo de como correr una app desde el inicio usando este framework que cada día gana mas demanda en el mercado.

Instalando nuestras dependencias

Primero debemos tener instalado nodejs en nuestro equipo, para esto podemos ir a la web de nodejs y descargar la version recomendada por el sitio, una vez instalado podremos actualizarlo con el siguiente comando:

-> npm install -g npm@latest

Esté buscara nodejs en nuestro equipo y lo actualizara a la version mas conveniente para trabajarlo. Una vez que la terminal instale los componentes debemos consultar que todo vaya bien para eso podemos escribir los comandos:

-> node --version
v13.3.0
-> npm --version
6.13.12

Esté nos arrojara las versiones que tenemos instaladas en nuestro equipo como se muestra arriba en este caso estoy trabajando con esas versiones.

Lo siguiente es instalar el cli de angular, este es el que nos va a generar la aplicación y va estar al tanto de los cambios de la misma. Para este ejemplo es suficiente con saber eso, el cli se instala con el siguiente comando:

-> npm install -g @angular/cli@latest

Puede que la terminal nos pregunte si queremos enviar informes a Google para ayudar a depurar errores y otras cosas yo sugiero poner N y dar enter para negar el acceso. Una vez terminando ya tenemos lo necesario para generar nuestra primer app.

Crear nuevo proyecto de Angular

Ahora creamos una carpeta y nos posicionamos en ella desde la consola para empezar a crear el proyecto, una vez dentro escribimos el comando

-> ng new

Al generarse la app nos preguntara si queremos asignarle algún nombre, escribimos el nombre y damos enter, después preguntará si requerimos un router en la app, por ahora no es necesario, tecleamos N y enter. Por ultimo preguntará si requerimos algún prepropresador de css igualmente no es necesario así que solo seleccionamos css y listo la aplicación empieza a generarse.

La terminal debe generar una carpeta con el nombre de nuestra aplicación y dentro deben estar todos los archivos generados. A continuación dejo una captura de mi terminal con los archivos generados

Ejecutando el proyecto

Podemos abrir la carpeta con nuestro editor de código para ver lo que se ah creado pero en otro tutorial veremos como funciona cada archivo y la estructura de la carpeta que se creo.
Finalmente para ejecutar la aplicacion dentro de la carpeta primerapp ejecutamos el comando:

-> ng serve

Con este comando se ejecutara la aplicacion podremos ver algo parecido a esto.

Cuando nos arroje el mensaje de que compilo exitosamente ya podremos acceder a nuestra aplicación simplemente entrando a la URL que nos marca la terminal, en mi caso localhost:4200. Accediendo a esta dirección me encuentro con la app generada por Angular.

Recordemos que si cerramos la terminal la aplicación se detendrá, automaticamente cada cambio que le hagamos al proyecto refrescara la web, ya que trabaja con un paquete llamado live-server que actualiza la página en cuanto guardamos un cambio.