As we all know, Angular is most discussed word in frontend development world. It has gained a lot of popularity in these years. Angular becomes a choice of a lot of frontend developers and I am also one of them.
In this article, I will highlight 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. I must appreciate the angular team for their wonderful efforts.
Well, now you might be excited how it evolved, what new features added in different versions. Now, the wait is over. Let’s get started!
Before moving ahead, I would like to let my readers know that ‘Angular 8’ is the latest version which our talented angular team released.
Birth of Hero (AngularJS) — 2010
In 2010, birth of today’s market hero took place. It was known as ‘AngularJS’.
AngularJS is a Javascript framework that is developed by Google. It is used to make single page application (SPA). Wait! I hope you know what is SPA. If not, ask Google about it and then come back as this is one of the beautiful approach that angular uses, but here is a brief intro of SPA (those who knows, you can skip):
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.
That’s it about SPA. I hope it gives you a brief picture of it. Let’s move to the original topic.
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). Well, I will not go into detail about what’s the pros and cons of this technique, but the main concern in this technique is SEO. This rendering which angular uses is poor in SEO. Wait! Dont’t think angular is bad. There is very popular Bollywood dialogue — “Picture abhi baki hai mere dost (Movie is still left, my friend)”. I think this dialogue suits the current situation. I will discuss why I said this.
Now, we should focus on the 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.
This list is long. I will not go into detail about angularJS but in angularJS, controllers are the heart of the application. Well, angularJS came with lots of features for developing a powerful web application but failed at some point like huge bundle size, performance issues, SEO problem, code maintainability issues but that does not mean that it is total failure. Data binding, Dependency Injection concepts are success of angular. Hence, we can say it’s half failure and half success.
The imperfection in AngularJS made angular team to rewrite the whole framework from scratch. Such big change in new version of any framework/library was never encountered in the market. New version of angular is totally different from AngularJS. How it is different? Let’s understand by diving into our next sub -topic.
Angular 2–2016
Later version of AngularJS came into the market in 2016, Then, it was no more known as AngularJS. It got a name ‘Angular’. Angular 1.x version is known as AngularJS. Later version after 2.x is known as Angular. When I encountered these two words in my web development journey. I literally thought that these are two different frameworks and after a research I got to know that angular is updated version of angularJS. I hope my readers would not have misunderstood it.
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.
Wait! I forgot to tell you about wonderful helping hand which angular provides which is angular-cli. It’s a great helping hand that helps us in developing our application faster like for generating component just use ‘ng g c component-name’ (‘g’ is generate and ‘c’ is component). This is another cool feature added in angular.
This is not the end. I told you that the biggest disadvantage of angularjs is that it is poor in SEO and remember that famous dialogue which I said. You will understand in few minutes why I used that.
It is biggest cons that angularJS is poor in SEO. When you view the page source, you can see there is nothing(no Html) which makes crawlers to think website useless i.e. without any info. It is very painful when your website wants google crawlers to index them and make them to reach on top in google search but could not achieve it. 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
After reading the subtopic, you might wonder why not Angular 3? This is a common question that can come in anyone mind. Don’t worry! I will let you know. 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. I think now my readers can jump to understand the features of angular 4.
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). Well! You might think what it is? When to use? 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. The reason why I said this because 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. Now the time has come to move to angular 6 version. After another six month, angular 6 came into market with more power.
Angular 6 — May 2018
In May, 2018- just after six months, angular team released another version of angular — angular 6. This version also came with lots of new features. I will list down some of them.
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)
I hope you got the changes which is done in RxJS library.
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
This is all about the features of angular 6 which I learnt. Now the last version’s feature I will discuss which is — Angular 7
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.
This is all about feature of angular 7. I know I have not stated all other features of angular 7 because I have not gone into those features.Hence, not comfortable in talking about those. We also know that Angular 8 version is released, but due to the same reason of not going into the features of angular 8, I have not written about it.
Note to my readers: I may have left many features, but tried my best to write about the features of different versions in short (It’s not possible to list down all the features but ya I tried whatever features I read in my journey) but I would love if my readers can comment about those features which they found in their learning journey.
Thanks for reading.