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>
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
978E49854B
ReplyDeletekiralık hacker
hacker arıyorum
belek
kadriye
serik
ReplyDeleteMany studies have shown that regular exercise can significantly improve mental health and overall well-being. Incorporating physical activity into daily routines not only boosts mood but also enhances cognitive function. For more detailed information, you can visit the original research, which is available at SOURCE. Staying active is a simple yet effective way to promote a healthier lifestyle.