Introduction to Angular & How to Set Up an Angular Development Environment

Introduction

 
In this article, I will explain what Angular is and how to set up an Angular Development Environment.
 
The following topics are covered in this article:
  • What is Angular?
  • Angular CLI (Command Line Interface)
  • Setting up angular CLI
  • Create an Angular APP

What is Angular?

 
Angular is open-source and is used to develop a modern web application. It is created and maintained by Google. Angular is totally rewritten as AngularJS, and the Angular name includes all versions of the Angular framework. The Angular versions are released from 2 up to 8. Now Angular's latest version is released, Angular 9.
 
Angular is based on TypeScript because Typescript is the core of Angular. TypeScript is an Open-Source Programming Language, developed by Microsoft. It is fully based on an Object-Oriented Programming (OOPS) Concept. TypeScript runs on any platform, and in any browser. The TypeScript is a superset of JavaScript.
 

Angular CLI (Command Line Interface)

 
Angular CLI is the tool for creating Angular apps. To perform all the tasks are taken by CLI. You don’t need to spend any time installing and configuring, as it will do everything automatically if you give it the command. Use CLI to install Angular CLI by following the below tutorial.
 

Setting Up Angular CLI

 
Step 1
 
Before installing Angular CLI we need to install Node.JS because Angular is using an NPM package. The latest version is 13.9.0. To download Node.JS, use this link.
 
Angular Development Environment
 
Step 2
 
After installation, open the Command Prompt, then enter the command “node -v.” It will show the node.js version.
 
Angular Development Environment
 
Step 3
 
After installing the node.js open command prompt, install Angular CLI. Enter the following command to install automatically.
 
“npm install -g @angular/cli”
 
NPM denotes node package manager.
 
Angular Development Environment
 
Step 4
 
We can install the packages if you see the version of Angular CLI. Enter the command to check the version “ng v or ng version”. Now, we can see that it is Angular CLI version 9.0.4
 
Angular Development Environment
 

Create an Angular App

 
Let's create a new Angular application. To create a new Angular app, enter the following command.
 
Step 6
 
 ng new <app-name>
“ng new myproject”
 
Angular Development Environment
 
Step 7
 
Next, it will ask “Would you like to add Angular routing?”
 
Press “Y” If you want to use Angular routing, or press “N” if you don’t want to use Angular routing. Then press enter.
 
Angular Development Environment
 
Step 8
 
Next, it will ask which stylesheet format you would like to use. Use the arrow key to choose the options and press enter. I chose CSS, as you can see in the below image.
 
Angular Development Environment
 
It will take some time to create a new Angular app.
 
Angular Development Environment
 
Step 9
 
Next, open my project using this command “ng serve --open”. It will be opened in the browser.
 
Angular Development Environment
 
We have seen the output running in the browser:
 
Angular Development Environment
 

Summary

 
In this article, we have seen an introduction to Angular and how to create an Angular app. I hope this article is useful to you. Thank you!