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