Instalación de Angular 10
Tags: angular, frontend, beginners, spanish
Published: 2020-09-30 18:15:58

Hola a todos 

En este post te explicaré como instalar Angular 10 en tu aplicación y los pasos previos para el entorno. Esta publicación requiere conocimientos de HTML y JavaScript.

## **Pasos previos**

#### **Instalar Node y Npm**

Angular requiere Node.js. Así que para poder empezar deberás tener instalado Node.js

Puedes comprobar si lo tienes instalado desde el terminal.

<code>node --version</code>

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/17cwuvvr60def8hzag3n.JPG)

En caso de no tenerlo instalado puedes descargarlo desde su web oficial Node.js en https://nodejs.org/es/download/

#### **Instalar Angular CLI**

Ahora vamos a instalar el CLI de Angular, el cual nos va a ayudar a crear un proyecto de angular desde cero. La instalación será de manera global para que esté disponible en todos los proyectos de tu computadora. Se recomienda ejecutar este comando como administrador. En la terminal, escribe el siguiente comando:

<code>npm install -g @angular/cli<c/ode>

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6bog2yif3cmlx1n9d4fg.JPG)

## **Creando tu primera APP en Angular**

Estamos listos para empezar a trabajar con Angular, en este caso utilizaremos la versión 10.

En la terminal, ve al directorio donde quisieras colocar tu proyecto y ponle un nombre a tu app. Para crear el proyecto, ejecutemos el siguiente comando:
           
<code>ng new nombreDeTuApp</code>

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/llhx2a92fgzi5z8lhat1.JPG)

En la consola saldrán varias preguntas, la primera es si queremos tener routing, es decir añadir rutas a tu aplicación de Angular. El routing sirve para tener algo así como distintas pantallas en nuestra aplicación a las cuales podemos navegar y se muestren  presentando la pantalla correcta en cada momento. Para este ejemplo responderemos No con N del (Y/N) y presionamos enter.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pof6qzx6geeou3em4pu9.JPG)

La otra opción es qué tipo de estilos utilizar. En Angular, podemos utilizar CSS, Scss, Sass, Less y Stylus.

Para nuestro ejemplo, elegimos Sass utilizando las flechas de desplazamiento.

Ya con esto se va a empezar a crear el proyecto, es normal que  demore unos minutos por la instalación de las dependencias.

Ahora tenemos creado una carpeta con el nombre de nuestro proyecto.

Vamos a nuestra carpeta y encontrarás en el boilerplate varias carpetas y ficheros.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7ptrif9585qnrr819xqy.JPG)

Para arrancar nuestra aplicación de Angular 10 en el servidor.
Ejecutamos en la consola el comando

<code>ng serve</code>

Te aparecerá un localhost:4200 (a tí te puede salir otro puerto :blush:) al cual deberás de darle ctrl + click.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lipffuktgom5yaht1wbx.JPG)

Este comando sirve para compilar y levantar en nuestro servidor local, de este modo podemos acceder a ella desde un navegador web y tendremos nuestra primera aplicación en Angular 10.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qlzudfn1vonxjbfom173.JPG)

Esto es el primer paso para crear tu primera app en Angular, no te pierdas los próximos posts donde iremos profundizando en esto. Hasta la próxima :smirk: