Hello! My name is Yue Hern. Today, I am going to teach you how to install Angular.

What is Angular?
Angular is a front-end web application platform that uses TypeScript. It is developed and maintained by Google.

Angular vs AngularJS
As you can see by the name, AngularJS uses Javascript. Angular is developed by the same team that developed AngularJS but uses TypeScript instead. Although they are developed by the same team, it is not the same. For example, in AngularJS, you only need a .js file with a controller. But for Angular, there is a different file structure.

However, although Angular uses TypeScript, all the code is compiled down to Javascript, so that it can run on any Javascript compatible browser.

Enough with the explaination, lets get started with installing Angular!

1. Installing Node.js
First, head over to Node.js to download the Node.js client. Node.js comes with npm which stands for node package manager. With npm, you can install 3rd party packages like Angular Material which is very useful. You can view what kinds of packages are available at npmjs. Click version 8.11.1 and the installer will download automatically.

You can use any text editor of your choice but I recommend using Visual Studio Code.

2. Installing Angular CLI
Next, open a terminal like cmd or PowerShell and type:
npm install -g @angular/cli

-g indicates global installation so you can use it outside the current directory

This will install the Angular CLI(Command Line Interface) so you will be able to interact with Angular through the terminal. Installation might take awhile so be patient.

3. Starting a new project
Once you have installed the Angular CLI, you can create your first Angular project through the terminal. Before that, head to the directory that you want to create the new project in (e.g. Desktop).
Open PowerShell and type:
ng new my-app
Where my-app refers to the project name. It can be anything!

Once created, head into the project by typing in PowerShell:
cd my-app

My preferred text editor would be Visual Studio Code so I would type in PowerShell:
code .

in order to open the whole directory in VS Code.You should see something similar to this at the left.

That is all! You can start to edit your code. Type in PowerShell:ng-serve to open your project and you should see this.

In my next post, I will be talking about the file structure of an Angular project.Thank you for visiting my blog ! Do leave your comments below if you have any.