Angular Vs AngularJS 2: A detailed comparison

July 11, 2016


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.


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.

import { Component } from “angular2/core”;
 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=”” />
<button type=”submit” ng-click=”submit”>Submit</button>
<div ngClass=”user-form”>
<input #item type=”text” />
<button type=”submit” (click)=”submit()”>


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';

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';

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


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 ,  lists  some of the sample app which has been developed using angularjs 1 and 2.

Learn More From Our Techies

Developing search friendly AngularJS applications
Angular14 Is Out with Tons of Great Features for Better Web App Development
React vs. Angular vs. Vue:
Angular web application development
Advantages and Disadvantages of Angular 5
typescrpit angular 2

Latest Post

Get a free quote