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