Difference between Angular 1 VS Angular 2

Difference between Angular 1 VS Angular 2

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

· Angular 2 implements web standards like components.

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

· 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.

· 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.

· Different ways to define local variables.

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

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

· Structural directives syntax is changed.

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

· Angular 2 uses camelCase syntax for built-in directives.

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

· 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-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.

· 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

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

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

<input [ng-bind]="name"></input>

· 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,

<input ng-model="technology.name"></input>

In Angular 2,

<input [(ngModel)]="technology.name"></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.

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

In Angular 2, say goodbye to ng-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.

· 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 $inject used for DI.

· Way of routing is Changed- syntax changed.

Angular 2 has very powerful routes. The Angular 2 Router will only load components when it absolutely needs them. Kind of partial loading which is a great feature I think. Angular 2 is 5 times faster as compared to Angular 1

In Angular 1.x, we use $routeProvider.when() to configuring routing. Where in Angular 2, @RouteConfig{(...}) is used. ng-view present 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 need 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-href is also replaced by [routerLink]

Conclusion:
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. Kind of partial loading which is a great feature I think. Angular 2 is 5 times faster as compared to Angular 1.