The Difference Between AngularJS 1 and AngularJS 2

Manthan Bhavsar September 27, 2016 0

Recently, the beta version of AngularJS 2 was announced claiming that it has a number of essential changes compared to Angular 1. And being just a beta version, Angular 2 has already created a lot of buzz all around the community.

But, do you know the reason behind it?

Well, for starters, AngularJS 2 is written completely in Typescript and meets ES 6 (ECMAScript 6) specifications.

And according to the NG conference meetup, AngularJS 2 implements unidirectional tree-based ultrafast change detection and immutable data structures, meaning it is 5 times faster than AngularJS 1.

And just for your knowledge, it is not an update for AngularJS 1.

The Angular 2 has been completely rewritten and includes essential changes.

Therefore, the better way to understand more about AngularJS 2 is to compare it with AngularJS 1.

In this article, we’re going to show the differences between Angular 1 and 2.

Component-Based

Yes, AngularJS 2 is fully component based. This means, $scope and controllers will no longer be used. They are being replaced with directives and components.

However, these components are nothing but directives with a template.

What you need to remember while using components is, they also have to be imported on the page.

Bootstrapping in Angular 2

In Angular 1, you had 2 options to bootstrap the Angular:

one is by using the ng-app attribute and the other is via code. But, AngularJS 2 has said goodbye to the ng-app attribute. So, the only way to bootstrap Angular is only via code.

Also, in AngularJS 2, the bootstrap function is used that takes the starting of the parent component of your Angular application.

Structured-Based Directives

The specification of the directives in AngularJS 2 has been significantly simplified. Although, they’re still subject to change.

And directives in AngularJS 2 now can be declared with the @Directive annotation.

But the good news is, directives can also be used in components now.

And this applies to predefined as well as its own directives both.

For instance, it is now possible to use the ‘hover’ and ‘NgFor’ directives in a component.

They will be imported initially and you can be made them known in @view.

Dependency Injection

The improved dependency injection model in AngularJS 2, has now created many opportunities for object-based/component-based work. This improved dependency injection model consists mainly of 3 parts.

The Injector holds the required APIs to inject dependencies and make the dependency injection available.

Another is Bindings.

They allow naming the dependencies. Lastly, the objects of these dependencies.

They’re generated so that they can be injected.

These objects are passed to the constructor of the component through the injector view.

Data Binding

Those who have worked in AngularJS 1 are aware of the fact that the ng-model functionality makes it possible to edit a form and instantly have those changes updated on JavaScript POJO.

But, to integrate 3rd party libraries, you often need the AngularJS module wrapper whenever the library event occurs.

So, the best thing updated in AngularJS 2 is that they introduced Zones, which can be compared to a thread-local context in java.

This zone mechanism in AngularJS 2 has made the digest cycle no more necessary.

More to Come

Phew! Now my hungry mind is satisfied with the answers.

But make a note that not all the specifications are fully implemented, most of them are still changing. This means it’ll not be possible to develop the whole application in AngularJS 2 for now. But, on the bright side, it’s a great deal that the front end is developed fully and made of directives and components. Also, it’ll be a lot easier to communicate with the database and use Web Sockets.

All in all, this combination of Typescript with AngularJS 2, has opened new doors in the form of great opportunities in object-oriented programming in the front end.

With all these upgrades, it looks quite promising, and maybe soon, it’ll change the way we develop front-ends entirely.