Angular Vs AngularJS 2: A detailed comparison
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.
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!”; } } |
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
- Share this
