7OK

Outils du site

La diminution de la quantité de travail permettant de produire les biens nécessaires devrait être saluée comme un des grands succés de notre imagination créatrice. Que cette diminution soit source de chômage est le signe d'une erreur fondamentale de l'organisation de notre société. Le véritable remède contre le chômage est qu'il n'y ait plus de travail pour personne, mais pour chacun une place dans la société. [Albert Jacquard]
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/29 00:28] – [Ressources] Roge56-tools:angular [2018/04/08 20:48] (Version actuelle) – [*ngFor] Roge
Ligne 57: 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 75: 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 =====
Ligne 112: Ligne 173:
  
 https://jasmine.github.io/api/edge/matchers.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 ===== ===== Exemples et tests =====
  
Dernière modification : 2018/03/29 00:28

Outils de la page