mardi 14 mars 2017

Convert from 1.x to Angular 2.0

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


Angular 2 Components using TypeScript

import { Component } from 'angular2/core';

  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


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

   angular.element(document).ready(function() {
      angular.bootstrap(document, ['myApp']);
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 function in our case is used to start component, it's also the root (parent) component of your AngularJS App.
Structural directives 

Angular 1.x structural directives

   <li ng-repeat="client in clients">
<div ng-if="clients.length">
   <h3>You have {{clients.length}} clients.</h3>

Angular 2 structural directives

  <li *ngFor="#client of clients">
<div *ngIf="client.length">
  <h3>You have {{client.length}} clients.</h3>
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}}">
<a ng-href="{{}}">

Angular 2 

<div [style.visibility] = "story ? 'visible' : 'hidden' ">
<img [src] = "imagePath">
<a [href] = "link"> {{story}}</a>
==>Angular 2 uses camelCase syntax for built-in directives. For example, ng-class is now ngClass and ng-model is now ngModel.


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