7OK

Outils du site

Qu'est-ce que le premier janvier, sinon le jour honni entre tous où des brassés d'imbéciles joviaux se jettent sur leur téléphone pour vous rappeler l'inexorable progression de votre compte à rebours avant le départ vers le Père Lachaise. Cet hiver, afin de m'épargner au maximum les assauts grotesques de ces enthousiasmes hypocrites, jai modifié légèrement le message de mon répondeur téléphonique. Au lieu de dire \"Bonjour à tous\", jai mis \"Bonne anne mon cul\". C'est net, c'est sobre, et ça vole suffisamment bas pour que les grossiers trouvent ca vulgaire. [Pierre Desproges]
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/08 01:41] – [Directives] 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 =====
  
-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 86: 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 106: 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 ===== ===== Exemples et tests =====
  
-https://ng-countdown-timer.stackblitz.io+https://stackblitz.com/edit/ng-countdown-timer 
 + 
 +https://stackblitz.com/edit/ng-material-dialog-test
  
Dernière modification : 2018/03/08 01:41

Outils de la page