What is difference between AngularJS and Angular 2

Advertisement

AngularJS 1:


·         AngularJS is a structural Framework for dynamic web apps. It can be added to an HTML page with a <Script> tag.

·         It extends HTML attributes with directives & binds data to HTML with expressions.

·         It is fully open source & free to use.

AngularJS has different directives, provides various functionality in the application.

ng-app: This directive initializes an AngularJS application

Ex: <div ng-app = ""></div>

ng-model: This directive is used to bind the values from AngularJS application to HTML input controls.

Ex: <input type = "text" ng-model = "name">

ng-bind: This directive bind AngularJS application data into HTML tags.

Ex: <span ng-bind = "name"></span>

 ng-repeat: This directive is used to repeat html element.

Angular 2:


·         Angular 2 implements unidirectional tree based change detection which again increases performance.

·         It implements web standards like components, and it provides better performance than AnguarJS 1.

·         In Angular 2, local variables are defined using hash (#) prefix.

Ex: <div *ngFor="# customer in customers” >


Difference between AngularJS 1.x & Angular 2:


AngularJS 1 .x
Angular 2
It was not built with mobile support.
Mobile oriented
Languages support: ES5, Es6, and Dart.
More choice for language.
Languages support:  Es5, ES6, Typescript or Dart.
Easy to setup, we need to add reference of the library.
It is not easy to setup.It is dependent of other libraries and it requires some efforts to set up it.
Controllers
Angular 1.x Controller:
var myApp = angular
.module("myModule", [])
.controller("productController", function($scope) {
         var prods = { name: "Prod1", quantity: 1 };
         $scope.products = prods;
});
Controllers are replaced with Components
Angular 2 Components using Typescript:
import { Component } from '@angular/core';
@Component({
    selector: 'prodsdata',
    template: '<h3>{{prods.name}}</h3>'
})
export class ProductComponent {
    prods = {name: 'Prod1', quantity: 1 };
}
Structural Directives
ng-repeat
Example:
<ul>
   <li ng-repeat="technology in technologies">
     {{technology.name}}
   </li>
</ul>
Structural Directives
*ngFor
Example:
<ul>
  <li *ngFor="#technology of technologies">
    {{technology.name}}
  </li>
</ul>
Asterisk (*) sign is used as prefix for structural directives & camel case syntax is used.
It is not used camel case syntax for built-in directives.
Example:
ng-class, ng-model
Uses camel case syntax for built-in directives.
Example:
ngClass , ngModel
Angular 1 not directly used valid HTML DOM element properties and events.
Example:
ng-href , ng-src, ng-show & ng-hide
Events:
ng-click, ng-blur
<button ng-click=”Showdata()”>
Directly uses the valid HTML DOM element properties and events.
Example:
href, src & hidden
Events:
click
<button (click) =”Showdata()”>
ng-bind is used for One-way data binding directive
Example:
<input ng-bind=”my.name”></input>
One-way data binding directive replaced with [Property]
Example:
<button (click) = “showdata()”>
ng-model is used for two-way data binding
Example:
<input ng-model=”my.name”></input>
Two way data binding is replaced with [(ngModel)]
Example:
<input [(ngModel)]=”my.name”></input>
AngularJS 1.x using ng-app for Bootstrapping.
Example:
<script>
   angular.element(document).ready(function() {
      angular.bootstrap(document, ['myApp']);
   });
</script>
Angular 2 using bootstrapping via code.
Example:
import { bootstrap } from 'angular2/platform/browser';
import { ProductComponent } from '-/product.component';
bootstrap(ProductComponent);

Advertisements
SHARE

Unknown

  • Image
  • Image
  • Image
  • Image
  • Image
    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment