- Angular 1.x was not built with mobile support But in Angular 2 we have a Support for native mobile rendering in Android and iOs.
- Angular 1.x is in JavaScript but Angular 2 provides more choice for languages : ES5, ES6, TypeScript or Dart to write Angular 2 code.
- In Angular 1.x we work using controllers and $scope but they doesn't used anymore in AngularJS 2
This is an example :
We will use TypeScript for convertion.
Angular 1.x Controller
var myApp = angular
.module("myModule", [])
.controller("clientController", function($scope) {
var clients = { firstname: "Hamida", lastname: "Rebai", Reference: 12 };
$scope.clients = clients;
});
Component-Based
Angular 2 Components using TypeScript
import { Component } from 'angular2/core';
@Component({
selector: 'clientsdata',
template: '
<h3>{{clients.firstname}}</h3> '
})
export class ClientComponent {
clients = { firstname: "Hamida", lastname: "Rebai", Reference: 12 };
}
In template we can call a html page like this :
templateUrl: './app.component.html',
And we can mention the Css Class related to this page like this :
styleUrls: ['./app.component.css']
@Component annotation adds the metadata to the class and it's a new word in Angular 2.
Controllers to Components
Directives
Directive ng-app
Directive ng-app designates the root element in an application, it's placed usually in root DOM element like : <body> or <html> tags.
Angular 1.x
<script>
angular.element(document).ready(function() {
angular.bootstrap(document, ['myApp']);
});
</script>
Angular 2
We can Say Bye Bye ng-app because we will bootstrap angular only with code :
import { bootstrap } from 'angular2/platform/browser';
import { ClientComponent } from './client.component';
bootstrap(ClientComponent);
bootstrap function in our case is used to start component, it's also the root (parent) component of your AngularJS App.
Structural directives
ng-repeat is replace by ngFor : https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html
Angular 1.x structural directives
<ul>
<li ng-repeat="client in clients">
{{client.firstname}}
</li>
</ul>
<div ng-if="clients.length">
<h3>You have {{clients.length}} clients.</h3>
</div>
Angular 2 structural directives
<ul>
<li *ngFor="#client of clients">
{{client.firstname}}
</li>
</ul>
<div *ngIf="client.length">
<h3>You have {{client.length}} clients.</h3>
</div>
We can use the word let instead of #
<li *ngFor="let client of clients">
Structural Built-In Directives
==>Asterisk(*) sign is used as prefix for structural directives
==> For filters we keep using the same syntax (|) the pipe.
Removes the Need for Many Directives
Angular 1.x
<div ng-style="vm.strory ? {visibility :'visible' } : {visibility :'hidden' }>
<img ng-src="{{vm.imagePath}}">
<br/>
<a ng-href="{{vm.link}}">
{{vm.story}}
</a>
</div>
Angular 2
<div [style.visibility] = "story ? 'visible' : 'hidden' ">
<img [src] = "imagePath">
<br/>
<a [href] = "link"> {{story}}</a>
</div>
==>Angular 2 uses camelCase syntax for built-in directives. For example, ng-class is now ngClass and ng-model is now ngModel.
Interpolation
Angular 1.x
<h2> {{vm.client.firstname}}</h2>
vm is the context !
Angular 2
<h2> {{client.firstname}}</h2>
1 Way Binding
I Angular 1.x, ng-bind is used for one way data binding, but with Angular 2 it is replaced with [property], where property is valid HTML DOM element property.
Angular 1.x
<h2 ng-bind="vm.client.firstname"></h3>
Angular 2
<h2 [innerText]="client.firstname"></h3>
<div> [style.color] = "color">{{client.firstname}}</div>
==> Any HTML element property ! one way data binding is achieved via wrapping the properties with square brackets.
2 Way Binding
In Angular 1.x, ng-model is used for two way data binding, but with Angular 2 it is replaced with [(ngModel)].
Angular 1.x
<input ng-model="client.firstname"></input>
Angular 2
<input [(ngModel)]="client.firstname"></input>
Event Binding
For events, parentheses is used and for properties, square brackets are used.
Angular 1.x
<button ng-click="vm.log('click')" ng-blur="vm.log('blur')">OK </button>
Angular 2
<button (click)= "log('click')" (blur) = "log('blur')">OK</button>
Removes the Need for Many Directives ==> Next ARTICLE :)
0 commentaires:
Enregistrer un commentaire