DEV Community: Alexander Tejeda

Learning angular from Scratch - Chapter #0

Alexander Tejeda — Tue, 07 Feb 2023 04:16:16 +0000

This is intended to be a list of articles that would be a guide to create web pages with Angular. However Angular can be very complex and the process could be overwhelming. If this is your first time working with Angular or any Javascript framework, I invite you to read this article with patience. Remember, learning a new framework is a process that require a lot of patience.

Content table

What's Angular?

According to the official documentation of Angular, Angular is a framework for designing applications and developing platforms of type SPA (Single Page Application). However, this definition isn't very clear and maybe only brought you more doubts than answers

What's a framework?
What's a Single Page Application?
How can I install Angular?

We will answer all of these questions in this article.

What are frameworks and what are they for?

Creating a web application can be complex and requires knowledge of HTML and CSS, just to get the user to see something on the screen. It gets even harder when you need the page to be interactive. That means you have two things to worry about, and the list grows when you realize that more is required. But what if I tell you that exists something to get this work easier and even provide you tools that make your code more maintainable? For that reason, the frameworks were created.

In other words, we'll be able to replicate all the functionalities that we can develop with native javascript, but instead with a framework that uses less code and with better standards.

It's worth noting that Angular is not the only framework in the market, there are also its main competitors such as React or VueJs.

What's a SPA platform?

A platform SPA or by its acronym Single Page Application makes references to an applicative that works as a root and according to a route show what the client needs, without the necessity to reload our page.

What do I need to work with Angular?

Install Angular is pretty simple, we only have to follow the next steps, in this case, I'll do the installation with an OS Windows 10.

Install NodeJS Open the next link Download NodeJS, it will show us a page like the next and we'll download the LTS version, according to our OS, once the download is finished, we have to run the executable.
Once the download is complete, we'll validate the installation success by running the following command in our prompt. On Windows, open the command prompt by pressing the "Windows + R" key combination, then typing "cmd then pressing enter.
Once the command prompt is open, enter the following command. The result should display a screen similar to the one shown > npm version >
Install typescript To install TypeScript, run the following command in a command prompt. > npm install -g typescript
To check if our installation was successful, we've to type the next command and have to display our typescript version. > tsc -version Install Angular CLI

We going to install Angular CLI through NodeJS with npm (Node Package Manager) with the command in our command prompt

npm install -g @angular/cli

This allows us to:

Create Angular projects
Create components, services, modules, guards, etc...
Download dependencies. To do that execute the next instruction > npm install -g @angular/cli

Creating our first Angular project

Once the installation of Angular CLI is done, we will be ready to create our first Angular project. To do this, we will open a new command line and run the following command:

ng new <Nombre del proyecto>

Once we have run the command, we will be asked the following

Upon completion of the installation, a screen similar to the following will be displayed, indicating the successful creation of our project.

What are our next steps?

In this article, we have learned how to create an application with Angular and have gained a foundational understanding of what Angular is and its advantages. However, we have yet to learn how to utilize these advantages, but that will be our next objective.

Aprendiendo Angular desde 0 - Capitulo #0

Alexander Tejeda — Tue, 07 Feb 2023 03:54:38 +0000

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

¿Qué es Angular?
¿Qué son los frameworks y para que funcionan?
¿Qué es una plataforma SPA?
¿Qué necesito para trabajar con Angular?
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.

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.