Difference between Angular 1.x Vs Angular 2

1). Angular 2 is mobile oriented & better in performance.

Angular 1.x was not built with 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 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.

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 Dartto write Angular 2 code. Where, Angular 1.x has ES5, ES6, and Dart. Using of TypeScript is a great step as TypeScript is an awesome way to write JavaScript.

3).Angular 2 implements web standards like components.

Angular 2 implements web standards like components,and it provides better performance than Angular 1.

4).Angular 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 referenceof library and you are good to go. Where Angular 2 is dependenton other libraries and it requires some efforts to set up it.
[UPDATE: Angular Team heard this and they introduced Angular CLI to create Angular 2 applications.]

5).Angular 1.x controllers and $scope are gone.

Angular 1.x controllers and $scope are gone. We can say that controllers are replaced with “Components”in Angular 2. Angular 2 is component based. Angular 2 is using zone.js to detect changes.

Angular 1.x Controller

var myApp = angular.module("myModule", []).controller("productController", function($scope) {
         var prods = { name: "Prod1", quantity: 1 };
         $scope.products = prods;
});

Angular 2 Components using TypeScript

import { Component } from '@angular/core';

@Component({
    selector: 'prodsdata',
    template: '
<h3>{{prods.name}}</h3>'
})

export class ProductComponent {
    prods = {name: 'Prod1', quantity: 1 };
}

Note: there is a class with ‘export’keyword,@Componentannotation (that’s also new in Angular 2). The@Componentannotation adds the metadata to the class.

6).Different ways to define local variables.

In Angular 2, local variables are defined using Hash(#)prefix.

<div *ngFor="#technicalDiary of technicalDiries">

7).Structural directives syntax is changed.

In Angular 2, Structural directives syntax is changed.ng-repeatis replaced with*ngFor.
Angular 1.x structural directives:

<ul>
<li ng-repeat="technology in technologies">
     {{technology.name}}
</li>
</ul>

Angular 2 structural directives:

<ul>
<li *ngFor="#technology of technologies">
    {{technology.name}}
</li>
</ul>

Note :Asterisk(*) sign is used asprefix for structural directives, is replaced with and camelCase syntax is used.

UPDATE: In AngularJS 2 version “2.0.0-beta.17”, there is a small change with respect to*ngFor instead of “#” use “let”.

8).Angular 2 uses camelCase syntax for built-in directives.

Angular 2 uses camelCase syntax for built-in directives. For example,ng-classis nowngClassandng-modelis nowngModel.

9).Angular 2, directly uses the valid HTML DOM element properties and events.

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-showandng-hide. Angular 2 useshref,srcandhiddenproperties to get the same output. And same goes with event based directives like ng-clickandng-blur.

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

And in Angular 2, take the HTML event and wrap it with parentheses.

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

10).One-way data binding directive replaced with [property].

In Angular 1.x,ng-bindis 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 <input ng-bind="technology.name"></input>

Angular 2, one-way data binding is achieved via wrapping the properties with square brackets.

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

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

In Angular 1.x,ng-modelis used fortwo-way data binding, but with Angular 2 it is replaced with[(ngModel)].
Angular 1.x, two-way data binding, <input ng-model="technology.name"></input>

In Angular 2,<input [(ngModel)]="technology.name"></input>

12).Way of Bootstrapping Angular Application is changed:

Angular 1.x has 2 ways to bootstrap angular. One using ng-appattribute and other via code.

<script>
   angular.element(document).ready(function() {
      angular.bootstrap(document, ['myApp']);
   });
</script>

In Angular 2, say goodbye tong-app. The only way to bootstrap angular is via code.

import { bootstrap } from 'angular2/platform/browser';
import { ProductComponent } from './product.component';
bootstrap(ProductComponent);

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.

In Angular 1.x,

var myApp = angular.module("myModule", []).controller("productController", function($scope, $http) {
        var prods = { name: "Prod1", quantity: 1 };
        $scope.products = prods;
    });

In Angular 2,

import {Injectable } from 'angular2/core';

@Injectable()

export class TechnologyService {
    constructor(private _http: Http) { }
    getTechnologies() {
        return [new technology(1, 'Angular'),
            new technology(2, 'jQuery',
            new technology(3, 'Node'),
            new technology(4, 'Knockout')
        ];
    }
}

Note:@Injectable()is added to service class. It is similar to Angular 1.x $injectused for DI.

14).Way of routing is Changed- syntax changed.

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

In Angular 1.x,

var app = angular.module("MyModule", ["ngRoute"])
        .config(function ($routeProvider) {
            $routeProvider
            .when("/home", { templateUrl: "home.html", controller: "homeController" })
            .when("/technology", { templateUrl: "technology.html", controller: "technologyController" })
        })
       .controller("homeController", function ($scope) {
            $scope.message = "Home Page";
        })   
       .controller("technologyController", function ($scope) {
             $scope.technologies = ["ASP.NET", "jQuery", "AngularJS", "JavaScript"];
       })

In Angular 2,

import { Component } from 'angular2/core';
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
import { TechnologyComponent } from './technology/technology.component';
import { TechnologyService } from './Technology/Technology.service';

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

export class AppComponent { }

Routing is a separate module that’s why need to import it. And 2 more configurations needs to be to make routing work, one is adding [ROUTER_DIRECTIVES]as directive and other is to add ROUTER_DIRECTIVES

in providers list. And in HTML page,

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

ng-hrefis also replaced by [routerLink]

Difference between Angular 1.x Vs Angular 2