Set up And Create Angular Application

Introduction to Angular

Angular is a front-end/client-side JavaScript framework. It is created and maintained by Google.It uses TypeScript which is free and open-source programming language developed by Microsoft.

Basically, in Angular, we divide our UI into separate components so as to increase the readability and reusability. So, we can say that an Angular application is a tree of Angular components. In this article, we are going to set up a development environment and create our first Angular application.

Step 1

Install node.js – we need it so that we can use NPM, i.e., node package manager, which is used to download all our Angular dependencies.

Download from here.



To check the version of node and NPM, you can use the following commands in command prompt.

• node – v
• npm -v
  
  
  

Step 2 - Install IDE - Visual studio code (Recommended)

It’s a really nice tool developed by Microsoft. It has Angular TypeScript extension, an integrated terminal that helps developers a lot.

https://code.visualstudio.com/Download

Step 3 - Install Angular CLI

It is Angular's command line interface that is used for rapid code generation. Open the command prompt and use the below command:

ng install -g @angular/cli

To check the version of Angular CLI, use this command.

ng -v

Step 4

Now, create an Angular application. Open the command prompt and move to the folder where you want to create the application.

Use command: ng new AppName

It will create a new application folder and download all the Angular dependencies.

Step 5

Open the folder in Visual Studio Code.

Step 6

Open integrated terminal from View >> Integrated Terminal or Ctrl + `.

Step 7

Now, use this command –

npm start

Step 8

Open the default port: http://localhost:4200/ on the browser.

Wow! We have successfully created and run our first Angular application.