AngularJS vs Angular 2 vs Angular 4: What's the Difference?
AngularJS was created by Misko Heavery. He had built a framework to handle the downfalls of HTML and also taking ideas and best practices of the libraries which were never done earlier.
This first version of the framework known as AngularJS was launched in the year 2009. It laid the foundation of the present-day front-end application development. Angular JS was one of the best single-page application development solution. Gradually, it wide adoption and become very popular.
Features of Angular JS
- Extends HTML support by adding tags, attributes, and expressions
- Allows easy event Handling
- Supports for Data Binding
- Built-In Template Engine and Routing
- Form Validations and Animations
- Dependencies Injection
In this tutorial, you will learn
- What is Angular JS?
- What is Angular 2?
- Why not Angular 3?
- What is Angular 4?
- What is Angular 5?
- History of Angular Versions
- Difference between AngularJS and Angular 2
- Difference between Angular 2 and Angular 4
- Difference between Angular 4 and Angular 5
There are many new features, along with other improvements and tweaks.
Some Important Features of Angular 2 are:
- Modern, faster, and highly scalable framework
- Equally useful framework for web, mobile, and desktop apps
- Web components based architecture
- Supports Hierarchical Dependency Injection
Angular 2 has been a single repository. Each package downloadable with the @angular/package-name convention. For example @angular/HTTP, @angular/router
All package names were assigned version 2, but router package by mistaken was given version 3. Therefore, the development team skipped Angular Version 3 and directly named it version 4 to maintain compatibility with Angular Router's version.
Some other features of Angular 4 are:
- Reduce the size of the generated bundled code up to 60%
- Animation moved out to a separated package @angular/animations
- Supports for if/else statement
- Supports for email validator
Angular 5 is an open-source web application framework which is based on TypeScript. There are lots of new features and improvements done in this version like dependency injection, declarative templates, end-to-end tooling, etc. It doesn't bring any significant change from Angular 4.
Features of Angular 5:
- Make AOT the default
- Easier to build progressive web apps
- Type checking in templates
- Support for Internationalized Number, Date, and Currency Pipes
- An update to Httpclient
- Zone speed improvements
- New Router Lifecycle Events
Following are the Angular version release dates:
- Angular version 1.0 which is known as AngularJS was released in 2010 by Google
- Angular version 2.0 was released in September 2016
- Angular 4.0 was released in March 2017
- Angular 5.0 was released in Nov 2017
- Angular 6.0 was released in May 2018
- Angular 7.0 was released in Oct 2018
- Angular 8.0 was released in May 2019
- Angular 9.0 was released in Feb 2020
- Angular 10.0 was released in June 2020
- Angular 11.0 was released in Nov 2020
Let's see the Angular version history in details:
History of Angular 1
History of Angular 2
Angular 2 is a fully built and completed rework version from Angular 1. It is compatible with mobile devices. Moreover, Angular 2 gives you an option to choose more languages where you can choose your language like ES5, ES6, or TypeScript to write the codes of Angular 2.
History of Angular 4
As discussed earlier, Angular 3 was not released by the Angular team. Angular 4 was released on March 6, 2017, which is compatible with most of the applications. However, there is not any major changes in Angular 4 from Angular 2, and it offers better bug fixed, and alerts compare to Angular 2.
History of Angular 5
Angular five was released in November 2017. In this Angular version, there are some biggest changes has also been made compared to previous Angular. In this version, there is a Build Optimizer that created with the Angular CLI by which allows you to apply build optimizer by default. Besides this, there is an Angular Universal State Transfer also given that supports API and DOM.
Below is a main difference between AngularJS Vs Angular 2:
|Angular JS||Angular 2|
|Released by Google in the year 2010.||Released in Sept 2016.|
|Still supported but no longer will be developed.||It's updated version regularly released because of Semantic Versioning.|
|The architecture of AngularJS is based on MVC.||The architecture of Angular 2 is based on service/controller.|
|AngularJS was not developed with a mobile base in mind.||Angular 2 is a mobile-oriented framework.|
|AngularJS code can write by using only ES5, ES6, and Dart.||We can use ES5, ES6, Typescript to write an Angular 2 code.|
|Based on controllers whose scope is now over.||Nowadays, the controllers are replaced by components, and Angular two is completely component based.|
|Factory, service, provider, value and constant are used for services||The class is the only method to define services in Angular2|
|Run on only client-side||Runs on client-side & server-side|
|ng-app and angular bootstrap function are used to initialize||bootstrapmodule() function is used to initialize|
Following is the key difference between Angular 2 Vs Angular 4:
|Angular 2||Angular 4|
|The code generated using Angular 2 is bigger, and the file size is also larger.||Angular 4.0 has reduced the bundled file size by 60%. Thus code generated is reduced which helps to accelerate the application performance.|
|Angular two is not backward compatible with Angular JS.||Angular four is backward compatible with Angular 2 for most applications.|
|There is no specific no proper disapproval phases to adjust codes.||There will be proper disapproval phases to allow developers to adjust their code|
|There is no animation feature offers in Angular 2.||Animation features are pulled out of @angular/core and included into their package|
Here is the difference between Angular 4 Vs Angular 5:
|Angular 4||Angular 5|
|Support for Router ParamMap||New Router Lifecycle Event|
|Dynamic Components with NgComponentOutlet||Compiler Improvements|
|HTTP Request Simplified||Optimization with HttpClient Feature|
|Includes Animation Package||Internationalized Date & Currency|
- All package names were assigned version 2, but router package by mistaken was given version 3. Therefore, the development team skipped Angular Version 3 and directly named it version 4 to maintain compatibility with Angular Router's version.
- Angular 5 is an open-source web application framework which is based on TypeScript. There are lots of new features and improvements done in this version like dependency injection, declarative templates, end-to-end tooling, etc.