Cómo instalar Angular desde cero en Windows

Como instalar Angular en Windows desde cero

En el siguiente tutorial en español te muestro paso a paso cómo instalar Angular en Windows desde cero.

Si recién vas comenzando con Angular es probable que tengas algunas preguntas he intentaré contestar lo más acertado posible, es probable que éste artículo lo actualice varias veces. 

¿Que es Angular? 

Según Wikipedia y para no andar con rodeos.

Angular es un framework para aplicaciones web desarrollado en TypeScript, de código abierto, mantenido por Google, que se utiliza para crear y mantener aplicaciones web de una sola página. Su objetivo es aumentar las aplicaciones basadas en navegador con capacidad de Modelo Vista Controlador (MVC), en un esfuerzo para hacer que el desarrollo y las pruebas sean más fáciles.

Pre requisitos

Para la instalación de Angular en un ambiente local de pruebas necesitarás los siguiente:

Node.js

¿Que es node.js? 

Según Wikipedia

Node.js es un entorno en tiempo de ejecución multiplataforma, de código abierto, para la capa del servidor (pero no limitándose a ello) basado en el lenguaje de programación ECMAScript, asíncrono, con I/O de datos en una arquitectura orientada a eventos y basado en el motor V8 de Google. Fue creado con el enfoque de ser útil en la creación de programas de red altamente escalables, como por ejemplo, servidores web.4​ 

¿Como instalo Node.js?

La buena noticia es que node es multiplataforma, asi que existen versiones las siguientes plataformas. 

En la página oficial de Angular recomienda la instalación de la versión version 8.x ó 10.x.

https://nodejs.org/en/

Para el caso de este tutorial descarga el instalable par Windows. 

Se presentarán estas opciones, recomendamos la primera opción

Saldrá un instalador nada fuera de los normal en ambiente windows solo dar siguiente hasta terminar. 

Si abres la carpeta de instalación encontrarás esto: 

¿Como veo si se instaló correctamente Node.js? 

Puedes buscar en el grupo de programas de windows el siguiente icono como node

Cuando lo ejecutas podrás ver la consola de node, donde puedes ejecutar todos los comandos del shell de node.

El siguiente paso es la instalación de Angular.

npm packge manager

Todos los frameworks tienen una opción de actualización automática, y Angular no podría quedar atrás, así que el administrador de dependencias está a cargo de npm.

La otra buena noticia es que Node.js cuenta con su propia versión de npm, así que no tendrás que hacer nada más. 

Para ejecutar comandos npm ve la consola de windows y desde cualquier carpeta te deberá de funcionar como lo muestra la siguiente imagen.

El siguiente paso es la instalación de Angular.

Instalación de Angular CLI

Con el siguiente comando se instalará Angular CLI de manera global, para instalarlo ejecuta en la consola de windows el siguiente comando:

 npm install -g @angular/cli

Con esto quedará instalado pero aun no existe ninguna App creada. 

Crear un espacio de trabajo inicial (Workspace)

Un espacio de trabajo  --(en inglés workspace)-- contiene todos los archivos de uno o más proyectos, dicho de otra manera en un espacio de trabajo pueden existir 1 a N número de proyectos. 

Un proyecto es el conjunto de archivos que confirman una aplicación.

Para agregar un espacio de trabajo y crear una aplicación inicial ejecute el siguiente comando en consola.

 ng new my-app

Realizará dos preguntas, la primera deberás decir que si. 
La segunda trata de qué tipo de metodo de hojas de estilo deseas, CSS , LESS etc. Te recomiendo seleccionar la que tu ya conoscas.

Ver la aplicación funcionando 

Para poder ver la aplicación funcionando es necesario instalar un servidor local. 

Para lo cual tienes que ir a la carpeta donde se instaló tu aplicación mediante consola u ejecutar los siguientes comándos.

 cd my-mapp
 ng serve --open

Es probable que el firewall de windows lance una ventana que tendrás que permitir abrir los puertos que indique para que pueda funcionar. 

Y finalmente si todo está correcto se abrirá en tu browser una pantalla como la siguiente:

Felicidades si llegaste hasta aquí lo que sigue es comenzar a aprendender Angular.

Gracias por dejar tus comentarios.

Fuentes:

https://es.wikipedia.org/wiki/Angular_(framework) 

https://angular.io/guide/quickstart