learn angular
learn angular

Hi Guys, Welcome to Proto Coders Point. This tutorial will be on How to start learning Angular to build web projects.

What is Angular

Angular is a client side scripting language helps in creating single page applications. So you might be wondering what exactly is Single Page Applications.

Single Page Applications (SPA) – In this application only a single page is created and this page keeps changing based on the user inputs. In Angular SPA a web page takes input from user and dynamically re-build the current website page with the new data requested by the user from web server, here the web page is loaded entire when new data is requested.

Requirement to build Web Application using Angular

In order to run a simple angular project, Firstly we need to install nodejs, Download nodejs.

For the angular project to run we need npm (Node Package Module) to be installed in our system, NPM also helps us in installing angular packages.This comes along nodejs installation.

What is npm

Npm stands for Node Package Module. As we all know the browser is not capable of understanding other languages. So Angular is a modern framework that is built entirely in TypeScript, so Npm helps us in converting the typescript to javascript.

Once nodejs is installed we can check using below cmd in Terminal.

node –version

npm –version

Install angular cli using cmd prompt

Once nodejs is installed, we will move ahead in installing the angular cli using command prompt.

npm install –g @angular/cli 

The above command will download angular cli, Here -g, means angular cli will get installed globally.

Angular Cli – helps us in creating an angular ready made boilerplate project.

once angular cli we can check using ng –version.

check angular version
check angular version

Nodejs & Angular is successfully installed in our system.

Installing IDE & Plugin Extension

Next step will be installing the IDE that is Visual Studio code, Download Visual Studio Code.

Once IDE is installed, we will be installing two angular extension in Visual Studio code.

In the visual studio code go to extensions and search there with below extensions and install.

  1. Angular Essentials.
  2. Material Icon.
angular essentials
angular essentials
angular essentials
Material icon theme

Create angular project

After following all the above steps, we are done with the installation and now we can create an angular boilerplate project:

Open the cmd & run as administrator.

Navigate to the path where we want to create the new angular project and we run the command as below.

     ng new <folder-name>

If it prompts message as shown below, do YES and enter

creating first angular project
creating first angular project

Further it asks you what type of stylesheet you want in your project you can select anyone from them, I have preferred the CSS stylesheet and then  press enter .

angular stylesheet selection
angular stylesheet selection

Now it will install all the required packages for the angular project nake sure you are connected to internet. Below is the screenshot attached.

Now you can go to particular path and check there will be a folder automatically created with all the packages needed for angular project.

How to run angular project

Next we need to open project in visual studio code and open a terminal and run the below command

ng serve

ngserve – ng serve command is used to run the angular project. Once we run this we will get the message as shown in screenshot that means it is successful.

how to run anguale project ng serve

As you can see above, our first angular project is been serving at port no 4200.

Now go to the browser and search for localhost:4200 and we can see there the boilerplate template created by angular cli been displayed.

getting started with angular

Recommended Article

Different between react and angular

Flutter vs React native

7 best tools for react development

How to use bootstrap in React

How to create custom hooks in react