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 :

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

Post By : Akshaya Moorthy (10 Posts)

"Akshaya Moorthy is a Software Engineer from Kerala with Bachelor’s Degrees in Computer Science. She has been working with Cubet for nearly a year and can handle technologies like PHP and Nodejs. She has always showed ardent interest in exploring new technologies and also strive for social service. She is an innovative thinker who also likes to write."


You might also like...

INDIA OFFICE

info@cubettech.com
+91 484 4054324
Skype : cubettech
Leela Info Park,
Unit IX-C, 9th floor PhaseIV,
Kochi, Kerala, India

LONDON OFFICE

info@cubettech.com
+44 2071938618
Skype : cubettech
Kemp House
160 City Road
London- EC1V2NX, UK.
Top