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.

Angular

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

  • node – v
  • npm -v

    Angular

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

Angular

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

Angular

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

ng -v

Angular

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

Angular

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

Step 5

Open the folder in Visual Studio Code.

Angular

Step 6

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

Angular

Angular

Step 7

Now, use this command –

npm start

Angular

Step 8

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

Angular

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

Up Next
    Ebook Download
    View all
    Learn
    View all