Difference Among AngularJS, Angular 2, Angular 4 And Angular 5

Difference between AngularJS and Angular 2

• The first version of Angular was released in the year of 2010. Some people call this as AngularJS and some people call as Angular 1. But it is officially named as AngularJS.
• The Angular 2 was released in the year of 2016. The important point to note is that Angular 2 is not a simple upgrade of AngularJS. Angular 2 is completely rewritten from scratch and as a result, the ways we write in AngularJS and Angular 2 are completely different.
• AngularJS is completely based on controllers and the View communicates using $scope whereas Angular 2 is completely a component-based approach. In Angular 2, both, controller and $scope are completely gone. Angular 2 is completely based on the component. Components are the building blocks of an Angular 2 application. The advantage of the Component-based approach is that it facilitates greater code reuse.
• As compared to AngularJS, in Angular 2, the communication among components is very easy. The components can be reused anywhere in the application without much effort.
• In Angular 2, from the unit testing standpoint, the use of components makes the Angular 2 application more testable with minimal effort.
• From a performance standpoint, Angular 2 is 5 times faster compared to AngularJS.
• AngularJS doesn't support for mobile devices, whereas Angular 2 is designed by keeping in mind to support mobile devices.
• Angular 2 has more language choices (TypeScript, JavaScript, Dart, PureScript and Elm etc.)

To know the more benefits of Angular 2 in detail, you can go through the below link,

• Basics Of Angular And Its Versions - Part One

Difference between Angular 2 and Angular 4

 

We know that Angular 2 is completely rewritten from scratch, there is no match between AngularJS and Angular 2. From the developer standpoint, Angular 2 is a complete rewrite from AngularJS and moving from AngularJS to Angular 2 is a complete change. From the developer standpoint, it is learning two different frameworks.

• The Angular 2 is released in the year of 2016 whereas Angular 4 is released in the year 2017.
• Changing from Angular 2 to Angular 4 and even future versions of Angular won't be like changing from AngularJS and it won't be like a complete rewrite. It will simply be a change in core libraries.
• Angular 2and Angular 4 will use the same concept and patterns. Angular 4 simply is the next version of Angular 2.
• If you know Angular 2 already then it is not a big deal to learn Angular 4 because the underline concepts are still the same.
• Angular 4 is an inheritance from Angular 2. Angular 4 is simply is the next version of Angular 2with few changes and enhancements.
• In Angular 4, a lot of improvements made to reduce the size of the AOT (Ahead-of-time) compiler generated code.
• In Angular 2 only TypeScript 1.8 version was supported, whereas, in Angular 4, it supports TypeScript 2.1 and TypeScript 2.2 compatibility, which means now we can use all new features supported in TypeScript 2.1 and TypeScript 2.2 can be used in Angular 4 application.
• The Animation features are separated from @angular/core package and moved them to new packages. By this way, if we don't import animation packages into your application then the main bundle size will be reduced and gives the performance improvement. As I told you @angular/core package and moved them to new packages, so if you are using these packages in your Angular 2 application then at the time of moving from Angular 2 to Angular 4, we need to change the package reference as well.
• In Angular 4, else block newly introduced. I mean, along with *ngif, we can use else block as well. Sample code as below:

In Angular 2 we were writing like,

<div *ngIf="yourCondition">
    <h2>Condition true!</h2>
</div>
<div *ngIf="!yourCondition">
    <h2>Condition false!</h2>
</div>

Now you can rewrite the same in Angular 4,

<div *ngIf="yourCondition; else myFalsyTemplate">
    <h2>Condition true!</h2>
</div>
<ng-template #myFalsyTemplate>
    <h2>Condition false!</h2>
</ng-template>

What is new in Angular 5?

 

The Angular 5 is released on 1st November 2017.

• Build optimizer
  It helps to removed unnecessary code from your application.
  
  
• Angular Universal State Transfer API and DOM Support
  By using this feature, we can now share the state of the application between the server side and client side very easily.

• Compiler Improvements
  This is one of the very nice features of Angular 5, which improved the support of incremental compilation of an application.
  
  
• Preserve Whitespace
  In earlier versions of Angular, unnecessary new lines, tabs and white spaces were created during the build. Now, in Angular 5, the decision is in your hands whether you need them or not. Angular 5 supports to restrict them (newlines, tabs, and white spaces) in both, the application level or you can restrict them individual component level where you wish to restrict.

If you want to restrict them only for TestComponent  then below is the sample code,

@Component({
            templateUrl: 'test.component.html',
            preserveWhitespaces: false
        }
        export class TestComponent {}

If you want to restrict them throughout the application level then we have add the below lines of code in tsconfig.json file.

"angularCompilerOptions": {
    "preserveWhitespaces": false
}

• Increased the standardization across all browsers
  In earlier versions of Angular, we were depending on i18n whenever we wanted to support internationalization in our application.  In Angular 5 now no need to depend on i18n, it provides a new date, number, and currency pipes which increases the internationalization across all the browsers and eliminates the need of i18n polyfills.

• exportAs
  In Angular 5, multiple names support for both directives and components

• HttpClient
  Before Angular 4.3 versions, we were using @angular/HTTP module for all kinds of HTTP requests. Now, in Angular 5, @angular/http module has been deprecated and introduced new module called HttpClientModule which comes under @angular/common/http package.

• Improved Decorator Support
  In Angular 5, we can use lambda expressions instead of naming functions. Sample code snippet as below,

Before,

Component({
    provider: [{
        provide: 'my-service',
        useValue: testMethod()
    }]
})
export class CustomClass {}

Now in Angular 5,

Component({
            provider: [{
                provide: ''
                my - service ', useFactory: () => null}]
            })
            export class CustomClass {}

• Few new Router Lifecycle Events being added in Angular 5
  In Angular 5 few new life cycle events being added to the router and those are ActivationStart, ActivationEnd,  ChildActivationStart, ChildActivationEnd, GuardsCheckStart, GuardsCheckEnd, ResolveStart and ResolveEnd.

• Angular 5 supports TypeScript 2.3 version.
  
  
• Improved in faster Compiler support
  A huge improvement made in an Angular compiler to make the development build faster. We can now take advantage of by running the below command in our development terminal window to make the build faster.
  
  ng serve/s --aot

Recently Angular 6.0.0-beta.3 got released on 7th Feb 2018.  You can find the entire release cycle of Angular at the following link.

 

I would appreciate your valuable feedback. Happy reading :)