Skip to main content
Difference between Angular 1x and Angular 2

Difference between Angular 1.x and Angular 2

Angular 2 is still in beta (at the time of writing this post), but it has already created a buzz in community. Angular 2 will be a huge learning curve for developers. It is 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. In this post, find out difference between Angular 1.x and Angular 2.

Difference between Angular 1.x and Angular 2

  • Angular 1.x was not built with mobile support in mind, where Angular 2 is mobile oriented.
  • Angular 2 provides more choice for languages. You can use any of the language from ES5, ES6, TypeScript or Dart to write Angular 2 code. Where, Angular 1.x has ES5, ES6 and Dart. Addition of TypeScript is a great step as TypeScript is awesome way to write JavaScript. Read TypeScript Interview Questions to start with TypeScript.
  • AngularJS 1.x is easy to setup. All you need to do is to add reference of the library and you are good to go. Where AngularJS 2 is dependent of other libraries and it requires some efforts to set up it. Read this post to find out how to configure AngularJS 2.
    [UPDATE: Angular Team heard this and they introduced Angular CLI to create AngularJS 2 applications.]
  • 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 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 'angular2/core';
    
    @Component({
      selector: 'prodsdata',
      template: `
        <h3>{{prods.name}}</h3> `
    })
    
    export class ProductComponent {
      prods = {  name: 'Prod1', quantity: 1 };
    }
    

    Notice, there is a class with export keyword, @Component annotation (that’s also new in Angular 2). The @Component annotation adds the metadata to the class.

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

  • Structural directives syntax is changed. ng-repeat is replaced with *ngFor.
    Angular 1.x structural directives

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

    Angular 2 structural directives

    <ul>
      <li *ngFor="#technology of technologies">
        {{technology.name}}
      </li>
    </ul>
    <div *ngIf="technologies.length">
      <h3>You have {{technologies.length}} technologies.</h3>
    </div>
    

    Notice that Asterisk(*) sign is used as prefix for structural directives, in is replaced with of 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”. See the sample application here.

  • In Angular 2, local variables are defined using hash(#) prefix (see above code for *ngFor).
  • To filter output in our templates in Angular 1.x, we use the pipe character (|) and one or more filters. Where in Angular 2 they are called pipes. The syntax remains same.
  • Angular 2 uses camelCase syntax for built-in directives. For example, ng-class is now ngClass and ng-model is now ngModel.
  • 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.
    <button ng-click="doSomething()">
    

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

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

    Read my post to see click event in action How to bind Click event in Angular 2 and visit Bind Select DropDown List in Angular JS 2 to see all these features in action.

  • 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="technology.name"></input>
    

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

    <input [value]="technology.name"></input>
    <div [style.color]="color">Some text...</div>
    

    Remember for events, parentheses is used and for properties, square brackets are used. Read Bind RadioButton List in Angular 2.

  • 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>
    
  • In Angular 1.x, we can define a service via 5 different ways.
    • Factory
    • Service
    • Provider
    • Constant
    • Values

    And in Angular 2, class is the only way to define a service.

    import { Injectable } from 'angular2/core';
    
    @Injectable()
    export class TechnologyService {
      getTechnologies() {
        return [
          new technology(1, 'Angular'),
          new technology(2, 'jQuery',
          new technology(3, 'Node'),
          new technology(4, 'Knockout')
        ];
      }
    }
    

    And once defined, you need to register it with your main component using provider. Read Cascading DropDown List using AngularJS 2 for working demo of AngularJS 2 service.

    import { Component } from 'angular2/core';
    import { TechnologyService } from './character.service';
    
    @Component({
      selector: 'my-app',
      template: '<technology-list></technology-list>',
      providers: [TechnologyService]
    })
    export class AppComponent {}
    
  • One of the advantage 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 achieve via constructor.
    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')
        ];
      }
    }
    

    Notice, @Injectable() is added to service class. It is similar to Angluar 1.x $inject used for DI.

  • 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 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-href is also replaced by [routerLink]

  • Angular 2 implements webstandards like components and it’s provide better performance than Angular 1.

Read my post Bind Select DropDown List in Angular JS 2 to see all these new changes in action with sample application.

Summary

Angular 2 is a really big step forward. And 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 section or send it on twitter/facebook. Keep visiting for updates and share this in your network.

27 thoughts on “Difference between Angular 1.x and Angular 2

  1. That’s awesome! examples are well structured and presented I find very easy to understand angular2 now as b4 I must admit I’been scratching my head a little bit.
    Cheers for that well done!

  2. I was a little confuse about moving from Angular 1 to Angular 2 but after reading this I am motivated to start studying the Angular 2.

  3. This is great comparison! Thanks for sharing.
    I was hesitating about all the symbols *[(#… that angular2 introduced at first, your article makes me feel better for them. :)

  4. does angular 2 is backward compatible with 1.x. Lets say I have application in angular 1.x and wanted to migrate to 2 but my application is too big that I cannot do that all at once and expects to be working with the new version.

    1. Vijay,

      Angular 2 is not backward compatible with 1.x at this point of time. So upgrading from 1.x to 2 will be manual activity at this point of time. Since your application is huge, I recommend you to wait as 2 is still in Beta and I believe Angular team will be working on automatic migration guide. But you can run both Angular 1.x and Angular 2 together. This should help.

      http://blog.thoughtram.io/angular/2015/10/24/upgrading-apps-to-angular-2-using-ngupgrade.html

  5. Ang 2 is very tough.
    When convert code of angular 1 in angular 2 then exceed.

    how to reduce and secure in ang 2.

  6. Completely agree to your line it certainly requires some efforts to migrate from Angular 1 to Angular 2. The most awesome thing which is done with Angular 2 is it is mobile oriented which will be a good scope for the developers.
    Good write up and good explanations with structured and well defined crystal clear examples. :)

Leave a Reply to leon Cancel reply

Your email address will not be published. Required fields are marked *

twenty + thirteen =