What is AngularJs?

AngularJS Tutorial: A Detailed introduction on AngularJs.
Written by Paayi Tech |01-Aug-2020 | 0 Comments | 392 Views

Angular is a client-side JavaScript framework that is developed and maintained by Google. Main reason behind to write this language is that, to make a framework which makes it easy to implement structured and well-designed web applications, using an MVVM/MVC framework.

It all started in the year 2010 when one of the Google employees started developing a side project for making ease in making internal products. It is a re-write of AngularJs.

Miško Hevery first developed AngularJs at Brat Tech LLC in 2009 as the primary source behind JSON storage services. Then they launched in the market to make the application easier. They were using the domain called "GetAngular.com." But with the only handful of subscribers, owners decided to drop the idea and make this as an open-source library. And then, from 2010 to 2014, the angular JS was used in most of the projects but not actively used by the developer community, but then trend changes and whole attire of web development changed with the more demand of single-page applications. Then angular JS came in more demand and more developer than starting using angular JS.


Angular Version 2.0

On September 14, 2016, Google released a whole new framework, which is Angular2.0. Major flip in Angular 2.0 from Angular created essential disagreements among coders.

Google actually announced about Angular 2.0 on October 22, 2014. But the first release came in May 2016, and final on September 14, 2016.


Angular Version 4.0

On December 13, 2016, Google announced Angular 4, and they skipped Angular Version 3 because they don't want any confusion just because of misalignment of router package's versions, Which they are distributed before as V3.3.0. Angular Version 4 is backward compatible with Angular Version 2.0. After this release, Google released Angular 4.3 with these essential features. 


They introduced HttpClient, and It is a library that is easier to use and smaller and powerful for making HTTP requests. Router life cycle events: Guards and Resolvers.

Four news events: ResolveStartResolveEnd, GuardsCheckEnd, GuardsCheckStart joined the existing set of lifecycle events such as NavigationStart.


Angular Version 5

Google released Angular version 5.0 on 1 Nov 2017. Major improvements in this version of Angular 5.0 now has the support for progressive web apps, a build optimizer & some improvements on Material design.


Angular Version 6

Google released Angular version 5.0 on 4 May 2018. That was a major release. It was focused on the toolchains and made Angular easier to work with in the future.

Like: ng add, ng update, Angular Elements, Angular Material Starter Components, Tree Shakable Providers, Animations Performance Improvements, CLI Workspaces, Library Support, Angular Material + CDK Components, and RxJS v6.


Angular Version 7

Google released Angular version 7.0 on 18 Oct 2018. In this update, they focused on Application Performance, Improved Accessibility of Selects, Angular Material & CDK, Virtual Scrolling, Angular now supports content projection using web standards for custom elements. Dependency updates regarding RxJS 6.3, Typescript 3.1, Node 10 (still supporting Node 8).


Angular Version 8

Google released Angular version 8.0 on 28 May 2019. Google released differential loading for applications, lazy routes dynamic imports, TypeScript 3.4 support, Angular Ivy as an opt-in preview, and Web workers.


In the year 2017-2018, angular become so popular that it became the part of almost all the new web applications.

Difference between Library and Framework:

We have seen that Angular is a framework, so question arises what the framework is and what is an ordinary library. So the answer to the question can be given in one line, and that is "Inversion of control." 

Inversion of control means in the library, and a developer controls how to & where to write the code & where to put the specific files.

But in the framework, it dictates you were to put a specific file and where to import the packages.

Now you may think that it will be difficult to follow that protocol. The answer is yes, to some extent, but this activity makes your application safer than any other app. The frameworks give you security from all the injections and data theft. Your data and your application remain safe when you use the framework.


Design Pattern:

The design pattern that Angular follows is MVW, which stands for Model View Whatever. Here the model is the schema on which basis we make the HTTP request. The view is the view of a web application, which includes all the HTML templates. And whatever includes whatever backend you want to use, it can be either express JS, Django, Laravel, etc. We can connect the frontend with the backend by API calls.


Single Page Application:

Angular achieves the functionality of Single Page Application, which means that we go from one page to the other without refreshing the browser page. 

By single page application, now it is possible to develop the mobile application in Angular. And Ionic is the framework which is built on the top of Angular by which you can make hybrid mobile apps. 

Which are cross-platform that means we build the app in angular, and that app can be run on both android and iPhone. That makes the app development much easier we don't have to make separate iPhone and android applications.


Pillars of Angular:

Angular has been written using typescript, which in turn has been written using JavaScript. Typescript provides the functionality of inheritance, abstraction, and encapsulation.



Typescript is a superset of a language JavaScript. Typescript provides safety for the application by using the concept of object-oriented programming. It must be remembered that JavaScript itself is not the object-oriented programming language rather than it is a functional programming language. So it extends the JavaScript functional approach to encapsulation, inheritance, and abstraction. Furthermore, typescript supports the ES6 syntax, which we will discuss later.



It is a library for reactive programming. Now the question arises what is reactive programming. So the answer to that question is reactive programming is the representation of the asynchronous stream of data. It is a very powerful library that offers built-in tools to transform, filter, and observe the stream of data and even combine multiple sources of data. Angular handle this data stream as an observable from routing to HTTP responses.



For asynchronous operations, Zone.JS provides execution context. It converts the standard API of DOM listeners and converts it to XML HTTP Request to run them in a "zone." It is constructed in such a way to provide hook-on asynchronous operations, so we can get the notification of different types of states like cancel state, handle errors, or extends executions with more operations.


Tips for Angular:

Before starting the Angular, we should know a few tips that we also implement in further topics. These guidelines make things easier to develop in the angular. Following are some tips:

  • We will follow the official style guide to have the structure of our project, which is then easier to maintain and easy to track if there are some errors to resolve.
  • Route guarding so that no one who is not authorized can access the project or part of the project. This thing makes the application more reliable.
  • Use the command-line interface to generate all the files. This CLI provides files in a hierarchy, which is easy to maintain.
  • Writing of pipes and components so that we can share all over the application where it is needed.
  • Service creation for the HTTP requests to use for a defined purpose. By this, we can connect the front end with the backend. It must be noted for that purpose, and we should make REST API's to achieve this.


The evolution of the framework brought many other key features by which we can achieve, developing an excellent application with good security purposes. 

The other thing that is worth mentioning is using the angular material, which is ready-made components for the application so that you don't have to write code for normally used codes.

So this is some theoretical info and background of angular. In the next parts, we will see how we can install angular in and how we can make our first app.

Login/Sign Up


Related Posts

© Copyright 2020, All Rights Reserved. paayi.com

This site uses cookies. By continuing to use this site or clicking "I Agree", you agree to the use of cookies. Read our cookies policy and privacy statement for more information.