Post
Ask Question

Difference between AngularJS and Angular 2

Angular JS 1.X

  1. Introduction

    Angular JS 1.X is the most popular JavaScript framework to build web applications. It was released by Google on October 20, 2010. Angular 1 is developed using TypeScript and JavaScript and uses traditional HTML. Angular 1 uses Controllers and Scope object.

  2. Prerequisites - to learn Angular 1 – JavaScript, HTML only

  3. Binding
    • One-Way binding – you are required to use ng-bind for one way data binding in Angular 1
      For Ex. <div ng-bind=”message”></div>
    • Two-Way Binding – you are required to use {{ message }} for two way data binding in Angular 1
      For Ex. <div ng-model=”message”> </div>
  1. Bootstrapping
    There are two ways to bootstrap Angular app in Angular 1.

    Via ng-app
    For Ex. <html ng-app=”myAngularApp”></html>

    Via code

    For Ex. 
  1. <script>  
  2.     angular.element(document).ready(function() {  
  3.         angular.bootstrap(document, ['smyAngularApp']);  
  4.     });  
  5. </script>  
  1. Performance

    Angular 1 is slow if you have used too many watchers in your angular 1 app. You need to reduce watchers to make it faster.
         For more information about Watchers & Digest Cycle in AngularJS, Read the below article -       
 
  1. Mobile Support
    Angular1 is responsive but, does not have mobile support. It was not built for mobile devices. It is possible to run Angular 1 on mobile, but using 3rd party frameworks.

  2. Services
    There are various ways to create services in Angular 1 like Service, Factory, Provider etc.

  3. Filters
    Filters are used to filter a result set in Angular 1.

Angular 2

  1. Introduction

    Angular 2 is not an upgraded version of Angular JS 1. It is completely rewritten with a lot of improvements also by Google and released in September 2016. It has been designed for implementing big and complicated applications in a feasible way.

    Angular 2 is following a component-based UI and there is no longer controllers and scope in Angular 2. Controllers are replaced by Components here.

    Angular 2 is currently being developed in Typescript but will be compatible with both ES5 & ES6 JavaScript standards.

  1. Prerequisites - to learn Angular 2 – ES6, Typescript etc.

  2. Binding
    • One-Way Binding
      There are two techniques for one way data binding in angular 2,

      • Using Interpolation
        For Ex. <div> {{ message }} </div>

      • Using Property Binding
        For Ex. <img [src]=’imagePath’ />

        There is an alternate syntax of property binding, which is known as canonical form.

        For Ex. <img bind-src=’imagePath’ />

    • Two-Way Binding
      [( message )] you are required to use parenthesis inside of brackets for two way data binding in Angular 2

      For Ex. <div [(ngModel)]=”message” ></div>

      This is a combination of Property binding & Event binding.
  1. Bootstrapping
    This process has been changed in Angular 2. Here we connect angular components to view, not modules.
    1. \import {bootstrap} from '@angular/platform-browser-dynamic';  
    2. import {AppComponent} from './app.component';  
    3. // Connect the component to our view  
    4. bootstrap(AppComponent);  
  1. Performance
    Angular 2 is 5 times faster than Angular 1. It is using hierarchical DI system which is major performance booster.

  2. Mobile Support
    Angular 2 is mobile oriented. It is designed from ground up with mobile support.

  3. Services
    There in the only way to use Service in Angular 2.

  4. Filters
    Filters have now been renamed pipes is Angular 2.