Aprendiendo Angular desde 0 - Capitulo #0

Esta es una lista de artículos con el objetivo de explicar el roadmap para crear páginas web con Angular. Sin embargo, trabajar con Angular o cualquier framework de JavaScript puede ser abrumador, por lo que te animo a tomar los siguientes artículos con paciencia. Recuerda que este es un proceso de aprendizaje que requiere mucha práctica

Tabla de contenidos

1. ¿Qué es Angular?
2. ¿Qué son los frameworks y para que funcionan?
3. ¿Qué es una plataforma SPA?
4. ¿Qué necesito para trabajar con Angular?
5. Creando nuestro primer proyecto de Angular

¿Qué es Angular?

De acuerdo con la documentación oficial de Angular (Documentación Angular), Angular es un framework para el diseño de aplicaciones y el desarrollo de plataformas de tipo SPA (Single Page Application). Sin embargo, esta definición puede generar varias dudas la primera vez que se lee, como:

• ¿Qué es un framework?
• ¿Qué es una plataforma SPA?
• ¿Cómo instalo Angular?

Todas estas preguntas serán respondidas en este artículo.

¿Qué son los frameworks y para que funcionan?

Crear una aplicación web es complejo, ya que requiere conocimientos previos de HTML y CSS, sólo para que el usuario pueda ver algo en la pantalla y esto se complica más si se requiere que la página sea interactiva. A medida que uno avanza en el desarrollo, se da cuenta de que se necesita mucho más que eso.

Pero, ¿y si te digo que existe una forma de simplificar este trabajo e incluso proporcionarte herramientas que hagan que el mantenimiento del código sea más fácil? Para esto se crearon los frameworks, que nos brindan una serie de mecanismos para replicar de manera más sencilla y rápida lo que haríamos con código nativo.

En otras palabras, podremos replicar todas las funcionalidades que podemos desarrollar con JavaScript nativo, pero en su lugar con un framework que lo haga con menos líneas de código y con estándares de programación más sostenibles que haciéndolo nosotros desde cero.

Cabe destacar que Angular no es el único framework en el mercado, también están sus principales competidores como React o VueJs.

¿Qué es una plataforma SPA?

Una aplicación SPA, o Single Page Application en inglés, se refiere a una aplicación que funciona como raíz y, de acuerdo a la ruta que se encuentra, realiza el renderizado de lo solicitado por el cliente.

¿Qué necesito para trabajar con Angular?

Instalar Angular es muy fácil, solo debemos seguir los siguientes pasos. En este caso, la instalación se realizará en una computadora con sistema operativo Windows 10.

1. Instalar Node.js:

• Visite el siguiente enlace para descargar Node.js Descargar Node.js, se mostrará una página donde podrá descargar la versión LTS, acorde al sistema operativo de su computadora. Una vez descargado, ejecute el archivo ejecutable.
• Para validar la instalación de Node.js en una computadora con sistema operativo Windows, abriremos la linea de comandos ejecutando la combinación de teclas "Windows + R" y escribiendo "cmd" en la ventana que se abre.
• Una vez abierta la línea de comandos, escribiremos el siguiente comando y deberíamos obtener una salida similar a la siguiente imagen: >npm version
• Instalar typescript
• Ejecutaremos el siguiente comando en la línea de comandos para instalar TypeScript: > npm install -g typescript
• Para validar la correcta instalación de TypeScript, ejecutaremos el siguiente comando en la línea de comandos, y se nos mostrará la versión instalada: > tsc -version
• Instalar Angular CLI
• Instalar Angular mediante el siguiente comando en la línea de comandos: npm install -g @angular/cli. Angular CLI es la herramienta de línea de comandos de Angular que nos permitirá:

1. Crear proyectos de angular. 
2. Crear componentes, servicios, módulos, guards, etc...
3. Descargar librerias

• Para ello tendremos que ejecutar el siguiente comando > npm install -g @angular/cli ### Creando nuestro primer proyecto de Angular Una vez realizada la instalación de Angular CLI, estaremos listos para crear nuestro primer proyecto de Angular. Para hacerlo, abriremos una nueva línea de comandos y ejecutaremos el siguiente comando: > ng new <Nombre del proyecto>

Una vez hayamos ejecutado el comando se nos preguntara lo siguiente

Una vez finalizada la instalación, se nos mostrará una pantalla similar a la siguiente, que indicará que la creación de nuestro proyecto se realizó con éxito.

¿Cuáles son nuestros siguientes pasos?

En este artículo, hemos aprendido cómo crear una aplicación con Angular y conocemos las primeras nociones sobre qué es Angular y sus ventajas. Sin embargo, todavía no sabemos cómo utilizar estas ventajas, pero eso será nuestro próximo objetivo.