AngularJS 1 and Angular 2 – interesting comparison

AngularJS is now well-known javascript framework, now let us quickly know more about AngularJS for comparison.

What is AngularJS?

AngularJS is not a library. It’s framework. It has lots of advantages in terms of developing an advanced web application in JavaScript. Before AngularJS introduced it used to be very tough to manage web application in JavaScript. There are some other frameworks also available in the market but I recommended AngularJS. Why? Of course, there are many advanced and rich features with AngularJS itself. such as two-way data binding, modular code management and last but not in list "Google is behind the project".

 

 

 

AngularJS 1

  • The core concept was the $scope.
  • Template Directive + Controller are key features.
  • Service & Factory. Always confusion for me when to use.
  • It becomes slower while increasing watcher.
  • In terms of performance, very hard to control two-way binding. Almost NILL.
  • Example,
    • [code:javascript] angular.module("myApp", []) .controller(‘myController’, [‘$scope’, function($scope){ $scope.databases = ["MS Sql","My Sql","MongoDB"]; }]); [/code]
  • ng-repeat: for looping objects.
    • [code:javascript]<ul>
      <li ng-repeat="db in databases">{{db}}</li>
      </ul>[/code]

Angular 2

  • No $scope. It’s COMPONENT.
  • Template Directive + Controller both are replaced with Component.
  • Only Service. No factory so No confusion.
  • It’s faster than AngularJS 1 because Here we can control two-way binding.
  • The default behavior of any variable is one-way binding. I think that thing boost performance.
  • Example,
    • [code:javascript] import { Component } from ‘angular2/core’;
      @Component({
      selector: ‘app-db’,
      template: <h3>{{databases}}</h3>})
      export class DBComponent {
      databases:string[] = [&quot;MS Sql&quot;,&quot;My Sql&quot;,&quot;MongoDB&quot;];
      } [/code]
  • *ngFor: for looping objects. No ng-repeat.
    • [code:javascript]<ul>
      <li *ngFor="let db of databases">
      {{db}}
      </li>
      </ul>[/code]

There are so many differences between AngularJS V1 & V2. Angular 2 is not upgraded version of AngularJS 1. It is completely rewritten version. There is migration path called "ng-upgrade" from V1 to V2. Nowadays, Angular 2 is called only Angular.

Conclusion:

Angular 2 has very powerful Routes. It will load component when it is absolutely required. It’s faster in comparing to  AngularJS 1.

There are many differences to explore to compare these javascript frameworks once trying everything practically gradually realizing that Angular 2 definitely looks more powerful than AngularJS 1.