Learning angular from Scratch - Chapter #0

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

1. What's Angular?
2. What are frameworks and what are they for?
3. What's a platform SPA (Single Page Applicattion)?
4. What do I need to work with Angular?
5. Creating our first project with Angular.

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

1. What's a framework?
2. What's a Single Page Application?
3. 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:

1. Create Angular projects
2. Create components, services, modules, guards, etc...
3. 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.