Select Page

Recently, the beta version of Angular 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, Angular 2 is written completely in Typescript and meets ES 6 (ECMAScript 6) specification. And according to NG conference meetup, Angular 2 implements unidirectional tree based ultrafast change detection and immutable data structures, meaning it is 5 times faster than the Angular 1.

And just for your knowledge, it is not an update for Angular 1. The Angular 2 has been completely rewritten and includes essential changes. Therefore, the better way to understand more about Angular 2 is to compare it with Angular 1.

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

  • Component-Based

Yes, Angular 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 ng-app attribute and the other is via code. But, the Angular 2 has said goodbye to the ng-app attribute. So, the only way to bootstrap the Angular is only via code.

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

  • Structured-Based Directives

The specification of the directives in Angular 2 has significantly simplified. Although, they’re still subject to change. And directives in Angular 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 Angular 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 Angular 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 Angular 2 is that they introduced Zones, which can be compared to a thread-local context in java. This zone mechanism in Angular 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 Angular 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 Angular 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.