Angular 2
Created at 2016-09-19 Updated at 2024-11-07 - 3 min. read Category experience / javascript / work
On September 15, Angular 2 was officially released with version 2.0.0. There are many changes that have been introduced to angular 2 to increase the performance which angular 1 lacked. Some of the comparison of the data are:
[caption id=”” align=”alignnone” width=”605”]
https://auth0.com/blog/more-benchmarks-virtual-dom-vs-angular-12-vs-mithril-js-vs-the-rest/[/caption]
The above graphs depicts the garbage collection of different framework. As you can see angular 1 tops the list where angular 2 is quite low in comparison to it. Which shows the performance increment.
[caption id=”” align=”alignnone” width=”605”]
https://auth0.com/blog/more-benchmarks-virtual-dom-vs-angular-12-vs-mithril-js-vs-the-rest/[/caption]
Also another graph shows the total amount of time spent by the browser executing JavaScript code. Ember 1 and 2 are the slowest here. Again the difference between Angular 1 and 2 is abysmal. While virtualdom and react are performing out of the way.
Angular 2 is entirely based on Typescript and meets the ECMAScript 6 specification. Some of the major change that have been introduced in Angular 2 are:
Component-Based
Angular 2 is entirely component based. Controllers and $scope are no longer used. They have been replaced by components and directives. Components are directives with a template.Angular 1.x has 2 ways to bootstrap angular. One using ng-app attribute and other via code. In Angular 2, say goodbye to ng-app. The only way to bootstrap angular is via code.
Dependency Injection
The improved dependency injection model in Angular2 there are more opportunities for component / object-based work. The dependency injection consists of 3 parts. The Injector, which contains the APIs to inject the dependencies and make dependency injection available. Bindings make it possible for dependencies to be named. Finally the actual dependencies of the object are generated so they can be injected
In Angular 2, local variables are defined using hash(#) prefix. Angular 2 uses camelCase syntax for built-in directives. For example, ng-class is now ngClass and ng-model is now ngModel.One of the major change in Angular 2 is, that it directly uses the valid HTML DOM element properties and events. Due to this, many of the available built-in directives in Angular 1.x are now no longer required. Like, ng-href, ng-src, ng-show and ng-hide. Angular 2 uses href, src and hidden properties to get the same output. And same goes with event based directives like ng-click and ng-blur. In Angular 1.x, ng-model is used for two way data binding, but with Angular 2 it is replaced with [(ngModel)].
These were some of the things i tracked over Angular 1.x and Angular 2. I am still exploring angular 2. Will update in the next blog. Thanks to JSlover and specially to Jaswant Sandhu. Next update comming soon :)