Overview of Angular

Overview of Angular

What is Angular?
angular definition

Angular is an open-source, client side/ front-end web development framework based on  Microsoft’s TypeScript. It is one of the most popular JavaScript frameworks that is mainly developed and  maintained by Google.  it easy to build applications with in web/mobile/desktop using Angular. Angular started as a SPA (Single-Page-Application) framework and now supports dynamic content based on different users through dependency injection. YouTubeTV is the most popular company that uses Angular. It integrates powerful features like


  • 1.   declarative templates
  • 2.   an end to end tooling
  • 3.   dependency injection
  • 4.   Modular approach
  • 5.   Re-usable code
  • 6.   Quick and easy development
  • 7.   Unit testing
  • 8.   Single Page Application development
  • 9.   And various other best practices that smoothens the development path.


Difference between AngularJS and Angular

 The first version of Angular was released in the year of 2010. Some people call this as AngularJS and some people call as Angular 1. But it is officially named as AngularJS.The Angular 2 was released in the year of 2016. The important point to note is that Angular 2 is not a simple upgrade of AngularJS. Angular 2 is completely rewritten from scratch and as a result, the ways we write in AngularJS and Angular 2 are completely different. The differences between them are given below :




Based on JavaScript

Based on TypeScript

Based on the MVC design pattern

Based on components, modules, and directives

Based on controllers and the View communicates using $scope

controller and $scope are completely gone

No support for mobile app

Supports mobile

Can’t build SEO friendly applications

SEO friendly applications can be easily created

Dependency Injection tokens can only be strings. Also, only the injector is present.

DI Tokens can be of any type, for example, strings or class. Angular follows a tree-hierarchy for injectors starting with the root injector, and a nozzle for each component henceforth.

No support or backward compatibility

Backward compatibility can be done without issues. Also, there is a lot of support documentation for the same.

Uses $routeprovider.when() for routing

Routing is done using @RouteConfig[()]

Requires specific ng directive for each of property, event, and image

For event binding, () is used and for image or property binding [] is used

No facility of Unit testing

Greater facility of Unit testing

Used ng-directive for binding an event, or a property

Used Expression for binding an event, or a property. property binding
is done using "[ ]" attribute and event binding is done using "( )"

Angular’s History





Angular Js


Angular 2

2016 Dec

Angular 4

2017 Nov

Angular 5

2018 May

Angular 6

2018 October

Angular 7 

2019 May

Angular 8

2020 February

Angular 9

2020 June

Angular 10

Angular Version Change

Semantic Versioning:



Major            Minor               Fix(Patch)

For example, version 7.2.11 indicates major version 7, minor version 2, and patch level 11.

Pacth: Increase when any bug fixes.

Minor : Increases when added feature that does not break any functionalities.

Major : Increases when break any functionality.

Advantages of Angular

A few of the major advantages of using Angular framework are listed below:

  • It supports two-way data-binding
  • It follows MVC pattern architecture
  • It supports static template and Angular template
  • You can add a custom directive
  • It also supports RESTfull services
  • Validations are supported
  • Client and server communication is facilitated
  • Support for dependency injection
  • Has strong features like Event Handlers, Animation, etc.
  • We can add custom animations, directives, and services.

What is Angular mainly used for?

Angular is typically used for the development of SPA which stands for Single Page Applications. Angular provides a set of ready-to-use modules that simplify the development of single page applications. Not only this, with features like built-in data streaming, type safety, and a modular CLI,  Angular is regarded as a full-fledged web framework.

In which scenario Angular is not a right choice ?

Angular may not be the right fit in some scenario, For example, for short-term projects or light-weight websites that have more static content do not require a complex framework like Angular. Same way, apps that have a microservice design approach will find too many unused features if they use Angular since it is a complete solution. There is less flexibility with the developer to choose additional tools.

Development Environment for Angular

1.   Node

2.   Npm

3.   Angular CLI

4.   Text Editro (VS Code)

Check Development Environment for Angular

To check Development Environment for Angular  , check version of Node,NPM and angularcli.

Command for Check node version in cmd

Node –v

Command for Check npm version in cmd       

 Npm –v

Command for Check angular cli version in cmd

ng  --v

Transpiling in Angular

Transpiling is the process of converting the typescript into javascript (using Traceur, a JS compiler). Though typescript is used to write code in the Angular applications, the code is internally transpiled into javascript.


Angular CLI

CLI  stand for Command Line Interface Angular CLI(Command Line Interface) is a command line interface to scaffold and build angular apps using nodejs style (commonJs) modules. You need to install using any one of the  below npm command.

npm install @angular/cli@latest

npm install @angular/cli@9

Below are the list of few commands, which will come handy while creating angular projects

                     i.        Creating New Project: ng new

                    ii.        Generating Components, Directives & Services: ng generate/g The different types of commands would be,

§  ng generate class my-new-class: add a class to your application

§  ng generate component my-new-component: add a component to your application

§  ng generate directive my-new-directive: add a directive to your application

§  ng generate enum my-new-enum: add an enum to your application

§  ng generate module my-new-module: add a module to your application

§  ng generate pipe my-new-pipe: add a pipe to your application

§  ng generate service my-new-service: add a service to your application

                   iii.        Running the Project: ng serve

                  iv.        Running the Project and open in browser : ng serve –o

                   v.        Running the Project and open in browser with port number: ng serve --port 4563 -o

Back to Blogs