In our previous blog on ‘Angular JS 2.0 – The New Wave of Application Development’, we provided you with a brief overview of Angular JS 2.0 and why should you be upgrading to Angular JS 2.0. Moving further, in this blog we are highlighting what is new in Angular JS 2.0, which makes Angular JS 2.0 so popular.

What’s new in Angular JS 2.x?

AngularJS has become one of the most popular open source JavaScript frameworks in the world of web application development.

Angular 2.0 is five times faster as compared to Angular 1.x. Angular 2.0 written entirely in Typescript and meets the ES6 specification. 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.0

Angular 2.x is mobile oriented & better in performance

Angular 1.x was not built with mobile support, whereas Angular 2.0 is mobile oriented.
Angular 2.0 is using Hierarchical Dependency Injection system which is major performance booster.
Angular 2.0 implements unidirectional tree based change detection which again increases performance
@component ({
selector: “textbox”
templateUrl: “textbox.html”
});

<switch>
<input type=”textbox”>

Angular 2.0 provides more choice for languages

Angular 2.0 provides more choice for languages. You can use any of the languages from ES5, ES6, TypeScript or Dart to write Angular 2.0 code. Where, Angular 1.x has ES5, ES6, and Dart.

Angular 2.0 implements web standards like components

Angular 1.x controllers and $scope are no more. We can say that controllers are replaced with Components in Angular 2.0.
Angular 1.x Controller
var myApp = angular
.module(“myModule”, [])
.controller(“dataController”, function($scope) {
var prods = { name: “Data1”, quantity: 1 };
$scope.products = prods;
});

Angular 2.0 Components using TypeScript

import { Component } from ‘angular2/core’;
@Component({
selector: ‘prodsdata’,
template: `
<h3>{{prods.name}}</h3> `
})
export class ProductComponent {
prods = { name: ‘Prod1’, quantity: 1 };
}

Different ways to define local variables

In Angular 2.0, local variables are defined using Hash(#) prefix
<div *ngFor=”#technicalSkill of technicalSkills”>

Structural directives syntax is changed

In Angular 2.0, Structural directives syntax is changed. ng-repeat is replaced with *ngFor.

Angular 2.0 uses camelCase syntax for built-in directives

Angular 2.0 uses camelCase syntax for built-in directives.
For example, ng-class is now ngClass and ng-model is now ngModel.

Angular 2.0 directly uses the valid HTML DOM element properties and events.
One of the major change in Angular 2.0 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.0 uses href, src and hidden properties to get the same output. And same goes with event based directives like ng-click and ng-blur.
<button ng-click=”clickMe()”>
And in Angular 2.0, take the HTML event and wrap it with parentheses.
<button (click)=”clickMe()”>

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.0 it is replaced with [property], where ‘property’ is valid HTML DOM element property.
Angular 1.x, one-way data binding
<input ng-bind=”technology.skill”></input>

Angular 2.0, one-way data binding is achieved via wrapping the properties with square brackets.
<button (click)=”clickMe()”>

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.0 it is replaced with [(ngModel)].
Angular 1.x, two-way data binding,
<input ng-model=”technology.skill”></input>
In Angular 2.0,
<input [(ngModel)]=”technology.skill”></input>

Way of Bootstrapping Angular Application is changed

Angular 1.x has 2 ways to bootstrap angular. One using ng-app attribute and other via code.
In Angular 2.0, say goodbye to ng-app. The only way to bootstrap angular is via code

Ways of Dependency Injection is Changed- syntax changed

One of the advantages of Angular is Dependency Injection. With Angular 2.0 Dependency Injection is there but now there is a different way to inject dependencies. As everything is ‘class’ in Angular, so Dependency Injection is achieving via constructors.

Way of routing is Changed- syntax changed

In Angular 1.x, we use $routeProvider.when() to configuring routing. Where in Angular 2.0, @RouteConfig{(…}) is used. ng-view present in Angular 1.x is replaced with <router-outlet>

In a nutshell, Angular JS 2.0 is a big step forward. And it certainly requires some efforts to migrate from Angular JS 1.x to Angular JS 2.0. But it is in the right direction. Things are looking better and more in line with HTML. Angular JS 1.x is fine and here to stay but Angular JS 2.0 is better. Angular 1.x was not built with mobile support in mind; however, Angular JS 2.0 is designed to be exceptional and ready for anything coming its way that is mobile oriented.