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