Hierarchical Dependency Injection system is a major performance booster used by Angular 2.
Angular 2 implements unidirectional tree based change detection which again increases performance. As per ng-conf meetup, Angular 2 is 5 times faster as compared to Angular 1. Developer will learn a lot from Angular 2. And it’s not an update for Angular 1.x. As it’s rewritten and includes breaking changes. So the best way to learn is to compare with Angular 1.x and find out what’s new in Angular 2. In this post, I am going to show differences between Angular 1.x and Angular 2. Let’s begin.
1). Angular 2 is mobile oriented & better in performance.
Angular 1.x was not built with keeping mobile support in mind, where Angular 2 is mobile oriented. Angular 2 is using Hierarchical Dependency Injection system which is major performance booster. Angular 2 performance improves the moment it implements unidirectional tree based change detection. As per ng-conf meetup, angular 2 is 5 times faster as compared to angular.
In case you want to hire web development company then BR Softech is one of the best option
2). Angular 2 provides more choice for languages.
Angular 2 provides more choice for languages. You can use any of the languages from ES5, ES6, TypeScript or Dart to write Angular 2 code. Where as Angular 1.x can use languages such as ES5, ES6, and Dart. TypeScript is an awesome way to write JavaScript so using of TypeScript is a great step.
3). Angular 2 implements web standards like components.
Angular 2 implements web standards like components, and it provides better performance than Angular 1.
4). AngularJS 2.0 is not easy to setup as AngularJS 1.x.
AngularJS 1.x is easy to setup. All you need to do is to add reference of library and you are good to go. Where AngularJS 2 is dependent on other libraries and it requires some efforts to set up it.
5). Angular 1.x controllers and $scope are gone.
Angular 1.x controllers and $scope are gone. In Angular 2 controllers are replaced with “Components” . Angular 2 is component based. Angular 2 is using zone.js to detect changes.
6). Different ways to define local variables.
Local variables are defined using Hash(#) prefix in Angular 2.
7). Structural directives syntax is changed.
In Angular 2, Structural directives syntax is changed. ng-repeat is replaced with *ngFor.
Angular 1.x structural directives:
8). Angular 2 uses camelCase syntax for built-in directives.
Camel Case syntax is used by Angular 2 for built-in directives. For example, ng-class is now ngClass and ng-model is now ngModel.
9). Angular 2, directly uses the valid HTML DOM element properties and events.
Angular 2 directly uses the valid HTML DOM element properties and events which is one of the major change. 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 it goes same with event based directives like ng-click and ng-blur.
Take the HTML event and wrap it with parentheses in Angular 2.
10). One-way data binding directive replaced with [property].
In Angular 1.x, ng-bind is used for one-way data binding, but with Angular 2 it is replaced with [property], where ‘property’ is valid HTML DOM element property.
Angular 1.x, one-way data binding while one-way data binding is achieved via wrapping the properties with square brackets in Angular 2.
11). Two-way data binding: ng-model replaced with [(ngModel)]
In Angular 1.x, ng-model is used for two-way data binding, but with Angular 2 it is replaced with [(ngModel)]. Angular 1.x, two-way data binding,
12).Way of Bootstrapping Angular Application is changed:
Angular 1.x has 2 ways to bootstrap angular. And these two ways are as follows One using via code and other using ng-attribute. In Angular 2, say goodbye to ng-app. The only way to bootstrap angular is via code.
The bootstrap function is used and it takes starting component which is also parent component of your angular application.
13). Ways of Dependency Injection is Changed- syntax changed.
One of the advantages of Angular is Dependency Injection. With Angular 2 DI is there but now there is a different way to inject dependencies. As everything is ‘class’ in Angular, so DI is achieving via constructors.
14). Way of routing is Changed- syntax changed.
In Angular 1.x we use $route Provider.when() to configuring routing, where as in Angular 2, @RouteConfig{(…}) is used. ng-view present in Angular 1.x is replaced with <router-outlet>
Routing is a separate module that’s why need to import it. We needs to make routing work as required by 2 more configurations. One is adding[ROUTER_DIRECTIVES] as directive and other is to add ROUTER_DIRECTIVES in providers list. And in HTML page
Although angular 2 is still in beta, I consider this as a major upgrade from Angular 1. Angular 2 has very powerful routes. The Angular 2 Router will only load components when it absolutely needs them. Angular 2 is 5 times faster as compared to Angular 1 in case of kind of partial loading which is a great feature I think.
It certainly requires some efforts to migrate from Angular 1 to Angular 2, but it is in the right direction. Things are looking better and more inline with HTML. It is still in beta but eagerly waiting for the final release.
That’s all I can think of. I know there are many points which can be included in this list. If you come across any please mention in comments box section or send it on twitter/facebook. I will appreciate if somebody wants to add something which I have missed. Keep visiting for updates and share this in your network. Looking for a Angular js 2 development company consult BR Softech
