By: Anchal Nigam

Picture source : mytechnology.com

In this article, Anchal provides highlights about when angular came and how quickly it grew into a market. In every six months, Angular team is coming with the new version of angular, making it more powerful with new features.
This an exciting article on how it evolved, what new features added in different versions. Let’s get started!

Before we start ‘Angular 8’ is the latest version which our talented angular team released.

Birth of Hero  (AngularJS) — 2010
AngularJS is a Javascript framework that is developed by Google. It is used to make single page application (SPA). SPA or Single page application is an application in which everything downloads in one go. All the necessary code is downloaded in one go. Unlike multiple page app, you don’t have to request a web page from the server for every hit and loads the page. In SPA, index.html file downloads once with all the content and then for every url change, existing webpage dynamically loads the demanding content. This approach gives better UX in switching between different pages and gives you feel of the app. AngularJS allow developers to develop web application faster. It uses a client side rendering — a technique in which rendering of the content is taken care by client (browser).
There are many great features of AngularJS. Here are some:
1) Data binding — automatic synchronization between model and view.
2) Dependency Injection System — a design pattern in which system supplies the dependent objects when it creates the object.
3) Scope — that takes care of controller and view.
4) Services — for sharing info among different parts of application.
5) Directives — It gives super power to HTML. For instance, ng-model, ng-app.
6) Controllers — heart of the application where logic resides.
7) Template — view that gives information using our controller and model.

Angular 2–2016

Angular 2 came into market with drastic changes. The biggest change was introduction of Typescript. Typescript is superset of javascript with additional features like it follows Oops concepts, strongly typed. Programmers that is coming from object oriented world finds it more familiar unlike javascript.

Components are the heart of angular 2+ world. Angular introduced various packages for achieving basic and important functionalities like routing package for easily defining routes, http package for fetching data from the server, animation package for animations and so on.
Angular 2 also provides directive concept like AngularJS. Directives gives superpowers to our HTML like *ngFor, *ngIf (structural directive) makes our html dynamic whereas attribute directives like ngModel (for two way data binding), ngStyle takes care of appearance and behaviour of our DOM.
Another feature which does not change in angular is, it also uses DI system. Like angularJS, DI system supplies the dependent objects (dependencies) to the component.
Angular team took care of it and introduced angular universal which takes care of SEO of your angular website. It uses server side rendering which in turn solves SEO problem.
These are the features with which angular 2 came in a market.

Angular 4 — March, 2017
The reason why not angular 3 was because of the router package. The angular router package was already distributed as v3. To avoid confusion, angular team released angular 4 version.
Angular 4 came with bug fixes and other new features and improvements. The biggest improvement that was done was in bundle size. They reduced bundle size by 60% which in turn made application lighter and hence application loading time decreased.
The other thing that was done was in animation package. They pulled out animation feature in a separate package- @angular/animations.
Another improvement was in structural directive. *ngIf came with else part in this version. This is the brief introduction of features of angular 4.

Angular 5 — Nov 2017
After six months, angular team came with another new version, i.e. angular 5. This angular 5 version again came with a lot of new features, improvements and bug fixes.
As the main concern for every website is faster loading time. Angular took care about it in this version as well.To enhance application performance more, they introduced build optimizer- It is a tool that was introduced to make small bundle size. It uses tree shaking technique to remove the dead code from application.
Compiler improvements were also made that makes faster rebuild of the application.
Another feature that was introduced was state Transfer key(TransferStateKey which is part of the platform/browser package). You can avail the beauty of this feature in your application if you are using SSR. Yes, if you have implemented SSR then you must use state transfer key feature. When you are using SSR and your application is making any HTTP request (which is quite common) then this request is going be to invoke two times i.e one on the server and another on the browser. This causes flickering issue (I have gone through this flickering issue in my application because the HTTP request was invoking two times). Thanks to state transfer key feature. This feature makes browser to use the response of HTTP request that is hit on server. It uses the response that server gets from HTTP request. As its name suggest, server transfers the state of response with html to browser. Hence, two times hit of HTTP request can be avoided.
Another improvement that was done was in http client package. In this version, HTTPClientModule came with improvements like using this module, developers do not have to parse the response using a map. Parsing step is not needed any more. Suppose if there is non-JSON type response, then you can specify that response using responseType in your HTTP request.
This is all about feature of angular 5.

In this version, angular CLI got updated. New commands were introduced like ng update. To update your angular project dependencies to latest, you can use it. For instance:

ng update @angular/core
The other improvement that was done was in RxJS library called as RxJS6. The two important changes were :

RxJS6 introduced new internal package structure.
Usage of operators.
New internal package structure involves changes in the way of importing packages. Instead of related import, we can use single import in this. For instance:

import {Observable} from ‘rxjs/Observable’;
import {Subject} from ‘rxjs/Subject’;
import ‘rxjs/add/operator/map’;
Now, with rxjs6 :
import {Observable, Subject} from ‘rxjs’;
import {map} from ’rxjs/operators’;
Operators usage are also changed in angular 6. For instance:
Old version:
import ‘rxjs/add/operator/map’;
this.http.get(url).map((response)=>response.json)
New version:
import {map} from ’rxjs/operators’;
this.http.get(url).pipe(map((data)=>data*2)

Another change is — angular-cli.json is replaced with angular.json. This file defines the configuration of the project like styles, scripts, testing, build process and so on. In angular.json, more options for configuration are added like multiple projects configuration can be done.
The other improvements are — <ng-template> is now available instead of <template>. There is change in the way of making services available for use like in previous version, if we want to make service available in entire application or in specific component- we have to provide it in provider array but in this version, in service file itself there is ‘providedIn’ metadata that is available for it. You can specify there the availability of services. By default, it makes service available at root level.
Another beauty that is added is an ‘angular element’ package. This package allows developers to use your angular component in another environment (non-angular environment) like Vue.js. It’s another interesting feature that makes you to use your angular component in other environment.

Angular 7 — October 2018
In October 2018, another version with more beauty came into the market.
The features that were added were CLI prompts, virtual scroll, drag and drop and again bundling size reduction. In CLI prompts, angular-cli asks you about options like when you make new application using ng new application-name. CLI asks you whether you want to add routing file or not and so on. There is also budget property added in angular.json in which you can specify your maximum and minimum budget size value.

Angular 8 – May 2019

Major features included in Angular 8 are:

• AngularJS API Migration Improvements with $location service
• Updated Typescript to 3.4.x
• @angular/platform-webworker and@angular/platform-webworker-dynamic both the packages are deprecated
• @angular/http removed from the list of packages
• ng-build, ng-test, and ng-run are equipped to be extended by 3rd-party libraries and tool.
• Angular router backward compatibility
• Dart-sass for Sass files