Difference between Angular 2, Angular 4 and Angular 5

AngularJS is an open source Model-View-Controller framework which is relatable to the JavaScript framework. Angular JS is probably one of the most trendy modern day web frameworks available today. This framework is used for developing mostly Single Page applications. This framework has been developed by a group of developers from Google itself.

Because of the sheer support of Google and ideas from a wide community forum, the framework is always kept up to date. Also, it always incorporates the latest development trends in the market.

AngularJS Architecture

Angular.js follows the MVC architecture, the diagram of the MVC framework as shown below.

• The Controller represents the layer that has the business logic. User events trigger the functions which are stored inside your controller. The user events are part of the controller.
• Views are used to represent the presentation layer which is provided to the end users
• Models are used to represent your data. The data in your model can be as simple as just having basic declarations. For example, if you are maintaining a student application, your data model could just have a student id and a name. Or it can also be complex by having a structured data model. If you are maintaining a car ownership application, you can have structures to define the vehicle itself in terms of its engine capacity, seating capacity, etc.

What is Angular 2?

After, releasing Angular JS, the Angular team released Angular 2 which is a complete rewrite of its original Angular 1 or Angular JS. Angular 2 version is built around the concept of the component. It was rewritten from scratch by the Angular team using Typescript. It offers better performance to web developers. There are many new features along with other improvements and tweaks. Angular 2 comes with everything you need to build a complicated frontend web or mobile apps, form handling, data management, HTTP services, and so much more. The flowchart can be explained as:

Some Important Features of Angular 2 are:

• A modern, faster, and highly scalable framework
• An equally useful framework for the web, mobile, and desktop apps
• Web components based architecture
• Supports Hierarchical Dependency Injection
• Improved Data Binding

What is Angular 4?

Angular 4 is unlike Angular 2 (which is completed rewritten version of Angular 1). There are in fact only a few minor changes and new features added in it. Angular 4 supports TypeScript, which compiles to JavaScript and displays the same in the browser. The architecture is been shown below:

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

What is Angular 5?

Angular 5 doesn't bring any significant change from Angular 4. However, lots of new features and many new improvements are done in this version. Angular 5 comes with an enhanced modular architecture covering the approaches, practices, and applications across all phases, including UI designing to testing, to help you both design and develop application correspondingly. Angular 5 is highly known for eliminating useless code from your application with the help of Build Optimizer. 

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

Difference between Angular 2 and 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

• If we have to write a code in Angular 2 it would be like:

1. <div *ngIf=”yourCondition”>
2.        <h2>Condition true!</h2>
3.    </div>
4.    <div *ngIf=”!yourCondition”>
5.        <h2>Condition false!</h2>
6.    </div>

• You can write it in Angular 4 like this:

1.    <div *ngIf=”yourCondition; else myFalsyTemplate”>
2.        <h2>Condition true!</h2>
3.    </div>
4.    <ng-template #myFalsyTemplate>
5.        <h2>Condition false!</h2>
6.    </ng-template>

Difference between Angular 4 and Angular 5

Angular 4	Angular 5
Support for Router ParamMap	New Router Lifecycle Eventwhich helps to accelerate the application performance.
Dynamic Components with NgComponentOutlet	Compiler Improvements
TypeScript 2.4 with this version that functions as a JavaScript superset that can be used for optional static typing, interfaces, and classes	Angular 5 comes with build optimizer which is a part of the platform's command as a tool.
HTTP Request Simplified	Optimization with HttpClient Feature
Includes Animation Package	Internationalized Date & Currency

• Before Angular 5 was released the following style was followed to write a code:

1. Component({
2. provider: [{
3. provide: ‘my-service’,
4. useValue: testMethod()
5. }]
6. })
7. export class CustomClass {}

•  Now in Angular 5:

1. Component({
2. provider: [{
3. provide: ”
4. my – service ‘, useFactory: () => null}]
5. })
6. export class CustomClass {}