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 buzzes 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) specification.
And according to NG conference meetup, AngularJS 2 implements unidirectional tree based ultrafast change detection and immutable data structures, meaning it is 5 times faster than the 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 the 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, the AngularJS 2 has said goodbye to the ng-app attribute. So, the only way to bootstrap the 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 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 ‘hover’ and ‘NgFor’ directive in a component.
They will be imported initially and you can be made them known in @view.
Dependency Injection
Due to improved dependency injection model in AngularJS 2, it has now created many opportunities for object-based/component-based work. This improved dependency injection model consists mainly of 3 parts.
The Injector, which 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 though make a note that not all the specifications are fully implemented, most of them are still changing. Which 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 frontend is developed fully made of directives and components. Also, it’ll be a lot easier to communicate with the database and use Web Sockets.
All in all, with this combination of Typescript with AngularJS 2, it has opened new doors in the form of great opportunities in object-oriented programming in the frontend.
With all these upgrades, it looks quite promising and maybe soon, it’ll change the way we develop front-ends entirely.