Angularjs1 Vs Angularjs2 A detailed comparision

Introduction

AngularJs, a javascript framework initially released by google on oct 20 2010. Angular 1.x is  developed using typescript and javascript and uses traditional HTML with two way data binding to present dynamic front-end. Angular1.x is responsive with no mobile support. It has been developed to build simple app and easy to maintain.

AngularJS 2 was released about an year ago. The architecture of AngularJS 2 is entirely different from the other javascript frameworks. It solves most of the issues in previous JavaScript application and have eight fold speed increase for rendering and updating pages. Angular 2 features includes improved performance, powerful template , simple APIs and easy debugging, however, all these changes are still in the Alpha phase.

Sample Project Setup in Angular1.x and Angular2

 Angular  Angular 2
 Installation:
npm install  angular -S
 Installation:  
npm install angular2 systemjs -S
npm install typescript -D
 Folder structure:
– index.html
– app
 – js
   – app.js
– node_modules
– package.json
 Folder structure:
– index.html– app  – ts
 – js
– node_modules
– package.json
– tsconfig.jsonConfigure tsconfig.json for typescript
{
   compilerOptions:

{
outDir: “app/js”,
target: “ES5”,
module: “system”,
moduleResolution: “node”,
sourceMap: true,
emitDecoratorMetadata: true,
experimentalDecorators: true,
removeComments: false,
noImplicitAny: false
},

     exclude: [“node_modules”]
}
 Inside app/js create app.js:
angular.module(“my-app”,[]);
 Inside app/ts create your component app.component.js
Import {Component} from “angular2/core”@Component({
selector:”my-app”,
Template : “<div></div>”
});
export class AppComponent {}
Inside app/ts create boot.ts
import { AppComponent } from “./components/app.component”;
import { bootstrap } from “angular2/platform/browser”;

bootstrap(AppComponent);
 Index.html
<!DOCTYPE html>
<html ng-app=”my-app”>
<head>
 <title>myapp</title>
 <script src=”./node_modules/angular/angular.js”></script>
 <script src=”./app/js/app.js”></script>
</head>
<body>
 
</body>
</html>
Index.html
<!DOCTYPE html>
<html>
 <head>
   <meta charset=”utf-8″>
   <title>my-app</title>
   <script src=”node_modules/es6-shim/es6-shim.min.js”></script>
   <script src=”node_modules/systemjs/dist/system-polyfills.js”></script>

   <script src=”node_modules/angular2/bundles/angular2-polyfills.js”></script>
   <script src=”node_modules/systemjs/dist/system.src.js”></script>
   <script src=”node_modules/rxjs/bundles/Rx.js”></script>
   <script src=”node_modules/angular2/bundles/angular2.dev.js”></script>

   <script>
     System.config({
       packages: {
         app: {
           format: ‘register’,
           defaultExtension: ‘js’
         }
       }
     });
     System.import(‘app/js/boot’)
           .then(null, console.error.bind(console));
   </script>
 </head>
 <body>
   <my-app></my-app>
 </body>
</html>
To run the application:
npm install -g serve
Then use the command serve to run

Comparison

Controllers to Components

Angular 2 do not have controller or directives, instead it follows component based UI. Component create less dependent fast entities similar to ReactJS. In this component selector used for HTML, tag and template will render the property defined inside the component.

angular.module(“my-app”,[])
.controller(“MyCtrl”,[“$scope”,function($scope){
             $scope.setVar=”Hello”;
}]);
import { Component } from “angular2/core”;
@Component({
 selector : “hello-world”,
 template : “<h1>{{ message }}</h1>”
})
export class HelloWorldComponent {
 message : string;

 constructor() {
            this.message = “Hello!”;
 }
}

 

$scope variable

The property binding in Angular 1 has been done using $scope, watch variable.$scope no longer used in Angular 2 and property binding is accomplished using component.

User event

Angular 2 introduces new syntax for the events and built-in directives , for events syntax (event)=”function” and for the built in directives ng-class, ng-model became ngClass, ngModel. The other seen difference is in the use of variable, here we can access the local variable with a prfix #.

<div ng-class=”user-form”>
<input type=”text” ng-model=”user.name” />
<button type=”submit” ng-click=”submit”>Submit</button>
</div>
<div ngClass=”user-form”>
<input #item type=”text” />
<button type=”submit” (click)=”submit()”>
Submit</button>
</div>

Services

Angular 1 uses five different ways to define service, Factory, Service, Provider, Constant, Values.

In Angular 2, class is the only way to define service.

For Example :

import { Injectable } from 'angular2/core';

@Injectable()
export class FunctionalService {
 getTechnologies() {
   return [
     new technology(1, 'SearchUser'),
   ];
 }
}

In order to use the service it has to be register using provider :

import { Component } from 'angular2/core';
import { FunctionalService } from './functional.service';

@Component({
 selector: 'my-app',
 template: '<functional></functional>',
 providers: [FunctionalService]
})
export class AppComponent {}

Conclusion

Migration from Angular 1 to Angular 2 seems to be difficult , but somewhat more hopeful. It includes more new features and changes in a view to be more powerful and fast using less memory.

The following links https://builtwith.angularjs.org/ , http://builtwithangular2.com/  lists  some of the sample app which has been developed using angularjs 1 and 2.

Learn More From Our Techies

Latest Post