7OK

Outils du site

Ne dites pas: \"J'ai trouvé la vérité\", mais plutôt: \"J'ai trouvé une vérité\". Ne dites pas: \"J'ai trouvé le chemin de l'âme\". Dites plutôt: \"J'ai rencontré l'âme marchant sur mon chemin\". Car l'âme marche sur tous les chemins.L'âme ne marche pas sur une ligne de crête, pas plus qu'elle ne croit tel un roseau.L'âme se déploie, comme un lotus aux pétales innombrables. [Khalil GIBRAN]
Vous êtes ici : 7OK » Tⓞⓞls » Angular
56-tools:angular

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision		Révision précédente
56-tools:angular [2018/03/06 23:58] – [Interpolation] Roge56-tools:angular [2018/04/08 20:48] (Version actuelle) – [*ngFor] Roge
Ligne 16: Ligne 16:
 ===== Ressources ===== ===== Ressources =====
  
 +https://blog.angularindepth.com/
  
 https://material.angular.io/components/categories https://material.angular.io/components/categories
Ligne 34: Ligne 35:
 | ''%%(event)%%'' | Event binding | | ''%%(event)%%'' | Event binding |
  
-===== Interpolation =====+==== Interpolation ====
  
  
Ligne 56: Ligne 57:
  
   * ''<button **(click)**="onSave()">Save</button>''   * ''<button **(click)**="onSave()">Save</button>''
-  * ''<button **on-click**="onSave()">On Save</button>''+  * ''<button **on-click**="onSave()">Save</button>''
  
  
Ligne 68: Ligne 69:
 ===== Template reference variables ( #var ) ===== ===== Template reference variables ( #var ) =====
  
 +variable locale qui peut être utilisée par la suite :
 <code> <code>
 <input #phone placeholder="phone number"> <input #phone placeholder="phone number">
Ligne 73: Ligne 75:
 <!-- phone refers to the input element; pass its `value` to an event handler --> <!-- phone refers to the input element; pass its `value` to an event handler -->
 <button (click)="callPhone(phone.value)">Call</button> <button (click)="callPhone(phone.value)">Call</button>
 +</code>
 +
 +===== Directives structurelles =====
 +
 +==== *ngIf ====
 +
 +Micro syntax:
 +<code>
 +<div *ngIf="hero" class="name">{{hero.name}}</div>
 +</code>
 +
 +Equivallent full syntax:
 +<code>
 +<ng-template [ngIf]="hero">
 +  <div class="name">{{hero.name}}</div>
 +</ng-template>
 +</code>
 +==== *ngFor ====
 +
 +Micro code:
 +<code>
 +<div *ngFor="let hero of heroes; let i=index; let odd=odd; trackBy: trackById" [class.odd]="odd">
 +  ({{i}}) {{hero.name}}
 +</div>
 +</code>
 +
 +Equivalent full syntax:
 +<code>
 +<ng-template ngFor let-hero [ngForOf]="heroes" let-i="index" let-odd="odd" [ngForTrackBy]="trackById">
 +  <div [class.odd]="odd">({{i}}) {{hero.name}}</div>
 +</ng-template>
 +</code>
 +
 +==== ngSwitch  ====
 +
 +Micro code:
 +<code>
 +<div [ngSwitch]="hero?.emotion">
 +  <app-happy-hero    *ngSwitchCase="'happy'"    [hero]="hero"></app-happy-hero>
 +  <app-sad-hero      *ngSwitchCase="'sad'"      [hero]="hero"></app-sad-hero>
 +  <app-confused-hero *ngSwitchCase="'app-confused'" [hero]="hero"></app-confused-hero>
 +  <app-unknown-hero  *ngSwitchDefault           [hero]="hero"></app-unknown-hero>
 +</div>
 +</code>
 +
 +Equivalent full syntax:
 +<code>
 +<div [ngSwitch]="hero?.emotion">
 +  <ng-template [ngSwitchCase]="'happy'">
 +    <app-happy-hero [hero]="hero"></app-happy-hero>
 +  </ng-template>
 +  <ng-template [ngSwitchCase]="'sad'">
 +    <app-sad-hero [hero]="hero"></app-sad-hero>
 +  </ng-template>
 +  <ng-template [ngSwitchCase]="'confused'">
 +    <app-confused-hero [hero]="hero"></app-confused-hero>
 +  </ng-template >
 +  <ng-template ngSwitchDefault>
 +    <app-unknown-hero [hero]="hero"></app-unknown-hero>
 +  </ng-template>
 +</div>
 </code> </code>
 ===== Input and Output properties ===== ===== Input and Output properties =====
  
-An **Input property** is a settable property annotated with an ''@Input'' decorator. Values flow into the property when it is data bound with a **//property binding//** ''[property]''.+An **Input property** is a settable property annotated with an ''@Input()'' decorator. Values flow into the property when it is data bound with a **//property binding//** ''[property]''.
  
 //Exemple://  //Exemple:// 
Ligne 85: Ligne 148:
  
  
-An **Output property** is an observable property annotated with an ''@Output'' decorator. The property almost always returns an //**Angular EventEmitter**//. Values flow out of the component as events bound with an **//event binding//** ''%%(event)%%''.+An **Output property** is an observable property annotated with an ''@Output()'' decorator. The property almost always returns an //**Angular EventEmitter**//. Values flow out of the component as events bound with an **//event binding//** ''%%(event)%%''.
  
  
Ligne 105: Ligne 168:
  
  
 +===== Testing =====
 +
 +https://psamsotha.github.io/angular/2016/12/16/angular2-testing-karma-systemjs.html
 +
 +https://jasmine.github.io/api/edge/matchers.html
 +
 +https://github.com/mgechev/angular-performance-checklist
 +
 +https://blog.oasisdigital.com/2017/angular-runtime-performance-guide/
 +===== Exemples et tests =====
 +
 +https://stackblitz.com/edit/ng-countdown-timer
  
 +https://stackblitz.com/edit/ng-material-dialog-test
  
Dernière modification : 2018/03/06 23:58

Outils de la page