Angular 1.x Vs Angular 2.0

Introduction

Angular is a platform to develop Web and mobile applications. Angular 2 is not just an update of Angular 1.x but Angular 2.0 is re-written and has many breaking changes. It is completely written in typed script (to meet ES 6 specifications). There will be a huge learning curve for the developers of Angular 2.

Difference between Angular 1.x and Angular 2.0



No Controller and $Scope

Angular 1.x is required to create a Controller and $scope. Both no longer exist in Angular 2.0. Angular 1.x’s Controller is replaced with the component in Angular 2.0.

Angular 1.x

varmyApp = angular.module("myApp", [])
.controller("empController", function($scope) {

   $scope.name = "Jignesh Trivedi";
});

Angular 2.0

import { Component } from 'angular2/core';

@Component({
  selector: 'mydata',
  template: `
<h3>{{name}}</h3> `
})

export class ProductComponent {
  name = "Jignesh Trivedi;
}

Angular 2.0 has introduced a new keyword, @Component, that is used to add metadata to the class.

Way of Bootstraping Angular Application is changed

Angular 1.x has two ways to bootstrap Angular. 

• Using directive ng-app.
• Using Angular.bootstrap function.

Angular 2.0 has only one way to bootstrap Angular Application, using the bootstrap function.

import { bootstrap } from 'angular2/platform/browser';
import { TestComponent } from './Test.component';

bootstrap(TestComponent);

Structural directives syntax is changed

ng-repeat directive is now replaced by *ngFor. ng-If is replaced with *ngIF. Angular 2.0.  Camel Case syntax and Asterisk (*) sign is used as a prefix for the structural directives.

Angular 1.x

<ul>
   <li ng-repeat="name in memberNames">
      {{name}}
   </li>
</ul>
<div ng-if="memberNames.length">
   <h3>You have {{memberNames.length}} Members.</h3>
</div>

Angular 2.0

<ul>
   <li *ngFor="let name of memberNames">
      {{name}}
   </li>
</ul>
<div *ngIf="memberNames.length">
   <h3>You have {{memberNames.length}} Members.</h3>
</div>

Local variables are defined, using let keyword.

Built-in directives syntax is changed

Angular 2.0 uses Camel case syntax for built-in directives. For example, ng-class is replaced with ngClass, ng-model is replaced with ngModel etc.

Event Syntax is changed

Angular 2.0 directly uses the valid HTML DOM element events. For example, ng-click is now replaced with (click)

Angular 1.x

<button ng-click="clickEvent()">

Angular 2.0

<button (click)="clickEvent()">

Some build-in directive no longer exist

Angular 2.0 directly uses the valid HTML DOM element properties. Due to these changes, many built-in directives of Angular 1.x are now no longer required. For example, ng-href, ng-src, ng-show and ng-hide is no longer required. Angular 2.0 use href, src and hidden instead of ng-href, ng-src, ng-show and ng-hide directive.

One way data binding directive replaced with [property]

ng-bind directive is used for one way binding in Angular 1.x. Angular 2.0 uses HTML DOM element property for one way binding.

Angular 1.x

<input type="text" ng-bind="name"></input>

Angular 2.0

<input type="text" [value]="name"></input>

Note that the square brackets are used with property name for one way data binding.

Two way data binding: ng-model replaced with [(ngModel)]

ng-model directive is used for two way data binding in Angular 1.x, but it is replaced with [(ngModel)] in Angular 2.0.

Angular 1.x

<input type="text" ng-model="name"></input>

Angular 2.0

<input type="text" [(ngModel)] ="name"></input>

Way of defining Service is changed

There are five different ways to define the Service in Angular 1.x. 

• Service
• Factory
• Constant
• Provider
• Values

Angular 2.0 has only one way to define the Service.

import { Injectable } from 'angular2/core';
@Injectable()
export class DataService {
    constructor(public http: Http) {
this.http = http;
    }
getTestData() {
        return this.http.get("/api/Home/GetTestData")
            .map((responseData) =>responseData.json());
    }
}

Here @Injectable() is added to the Service class, which is similar to $inject used in Angular 1.x, both are used for Dependency Injection.

Way of routing is Changed- syntax changed

$routeProvider is used to configure routing and ng-view is used to load the view in Angular 1.x. In Angular 2, these are replaced with @RouteConfig and <router-outlet>respectively.

Angular 1.x

var app = angular
        .module("MyModule", ["ngRoute"])
        .config(function ($routeProvider) {
            $routeProvider
              .when("/home", { templateUrl: "home.html", controller: "homeController" })

        })
       .controller("homeController", function ($scope) {
            $scope.message = "This is Home Page";
        })

In HTML

<ul>
   <li><a ng-href="#page4">Home</a></li>
</ul>

Angular 2.0 

import { Component } from 'angular2/core';
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';

@Component({
  selector: 'my-app',
templateUrl: 'app/app.component.html',
  directives: [ROUTER_DIRECTIVES],
  providers: [
    ROUTER_PROVIDERS
  ]
})
@RouteConfig([
  { path: '/home', name: 'Home', component: HomeComponent, useAsDefault: true },
])
export class AppComponent { }

In HTML

<ul>
   <li><a [routerLink]="['Home']" href="">Home</a></li>
</ul>

Angular 2.0 has built-in support for mobile applications whereas Angular 1.x did not have supports for mobile.

Angular 2.0 supports TypeScript as development language whereas Angular 1.x is not supporting TypeScript.

Summary

Angular 2.0 is completely different from Angular 1.x. It requires some effort to migrate from Angular 1.x to Angular 2.0. Angular 2.0 implements web standards, for example, component, and it provides better performance than Angular 1.x.