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/21 01:58] – [Testing] 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 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 74: 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 111: 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/21 01:58

Outils de la page