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.

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:

What is new in Angular 5?

Angular Universal State Transfer API and DOM SupportBy using this feature, we can now share the state of the application between the server side and client side very easily.

Compiler ImprovementsThis is one of the very nice features of Angular 5, which improved the support of incremental compilation of an application.

Preserve WhitespaceIn 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

}

exportclass 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 browsersIn 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.

exportAsIn Angular 5, multiple names support for both directives and components

HttpClientBefore 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.

Few new Router Lifecycle Events being added in Angular 5In 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 supportA 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.