notes-angular.md

+Module
+===
+Ensemble de composants et de services.
+
+Classe avec le décorateur _@NgModule_.
+
+Champs du décorateur _@NgModule_
+---
+
+* _declarations_
+
+  The view classes that belong to this module. Angular has three kinds of view classes: components, directives, and pipes.
+
+
+* _exports_
+
+  The subset of _declarations_ that should be visible and usable in the component templates of other modules.
+
+* _imports_
+
+  Other modules whose exported classes are needed by component templates declared in this module.
+
+* _providers_
+
+  Creators of services that this module contributes to the global collection of services; they become accessible in all parts of the app.
+
+* _bootstrap_
+
+  The main application view, called the root component, that hosts all other app views. Only the root module should set this bootstrap property.
+
+Composant
+===
+
+classe + metadata + template HTML, c'est la partie "VC" du MVC.
+
+décorateur @Component
+
+Data binding
+===
+
+Data binding unidirectionnel
+---
+
+dans une version intermédiaire de **heroes.component.html** :
+
+     <li>{{hero.name}}</li>
+     <hero-detail [hero]="selectedHero"></hero-detail>
+     <li> (click)="selectHero(hero)"></li>
+
+### composant -> DOM :
+
+* interpolation _{{value}}_
+
+  ex : The {{hero.name}} interpolation displays the component's _hero.name_ property value within the _&lt;li>_ element
+
+* property binding _[hero]_
+
+  ex : The _[hero]_ property binding passes the value of _selectedHero_ from the parent _HeroListComponent_ to the hero property of the child _HeroDetailComponent_.
+
+### DOM -> composant :
+
+* event binding _(click)_
+
+  ex : The _(click)_ event binding calls the component's _selectHero_ method when the user clicks a hero's name.
+
+data binding bidirectionnel
+----
+
+dans une version intermédiaire de **hero-detail.component.html** :
+
+     <input [(ngModel)]="hero.name">
+
+In two-way binding, a data property value flows to the input box from the component as with property binding.
+The user's changes also flow back to the component, resetting the property to the latest value, as with event binding.
+
+
+Directives
+===
+
+  classe + metadata (pas de template)
+
+  décorateur @Directive
+
+2 types : structurel et attribut
+
+directives structurelles
+---
+
+Structural directives alter layout by adding, removing, and replacing elements in DOM
+
+  ex :
+
+     <li> \*ngFor="let hero of heroes"></li>
+     <hero-detail> *ngIf="selectedHero"></hero-detail>
+  
+
+directives attributs
+---
+
+Attribute directives alter the appearance or behavior of an existing element
+
+   ex :
+
+     <input [(ngModel)]="hero.name">
+   
+   _ngModel_ modifies the behavior of an existing element (typically an _&lt;input>_) by setting its display value property and responding to change events
+
+
+Services
+===
+Simples classes sans metadata, c'est la partie "modèle" du MVC.
+
+Injection de dépendances
+===
+
+Fourniture automatique d'instances de classes, en général des services.
+L'injecteur maintient un conteneur de dépendances, il les crée au besoin.
+
+ex :
+
+    class HeroesComponent
+    {
+    constructor(private service: HeroService) { }
+
+L'injecteur va fournir une instance de _HeroService_ aux instances de _HeroesComponent_.
+
+L'injecteur sait comment créer des dépendances grâce au champ _[providers]_ soit :
+
+* du décorateur _@Component_ d'un composant,
+* du décorateur _@NgModule_  du module de haut niveau, typiquement _app.module.ts_. 
+
+  Dans ce cas, c'est la même instance de dépendance qui sera dispo pour tous les composants du module.
+
+
+Routage
+===
+
+Cf. <https://angular.io/guide/router>
+
+Module _RouterModule_.
+
+Route = couple (URL,composant) 
+
+* sous forme d'objet
+
+      { path : '/route', component : 'nomDuComposant' }
+
+* sous forme de lien dans un template :
+
+      <a routerLink="/heroes">Heroes</a>
+
+
+Protocole HTTP
+===
+Cf. <https://angular.io/guide/http>
+
+2 APIs fournies : _XMLHttpRequest_ (XHR) and _JSONP_.
+
+	import { Injectable }              from '@angular/core';
+	import { Http, Response }          from '@angular/http';
+	import { Observable } from 'rxjs/Observable';
+	import 'rxjs/add/operator/catch';
+	import 'rxjs/add/operator/map';
+
+	import { Hero } from './hero';
+
+	@Injectable()
+	export class HeroService {
+	  private heroesUrl = 'api/heroes';  // URL to web API
+
+	  constructor (private http: Http) {} // injection
+
+	  getHeroes(): Observable<Hero[]> {
+		return this.http.get(this.heroesUrl)
+						.map(this.extractData)
+						.catch(this.handleError);
+	  }
+	  private extractData(res: Response) {
+		let body = res.json();
+		return body.data || { };
+	  }
+
+	  private handleError (error: Response | any) {
+		// In a real world app, you might use a remote logging infrastructure
+		let errMsg: string;
+		if (error instanceof Response) {
+		  const body = error.json() || '';
+		  const err = body.error || JSON.stringify(body);
+		  errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
+		} else {
+		  errMsg = error.message ? error.message : error.toString();
+		}
+		console.error(errMsg);
+		return Observable.throw(errMsg);
+	  }
+	}
+
+Callbacks sur le cycle de vie (lifecycle hooks)
+===
+
+Cf. <https://angular.io/guide/lifecycle-hooks>
+
+On peut accrocher des callbacks sur des événements émis par les composants et les directives
+comme la création, le rendu, la destruction....
+
+Mis en oeuvre en implémentant une interface.
+
+Ex avec _OnInit_ :
+
+    class PeekABoo implements OnInit {
+    ngOnInit() { ... }
+
+
+Pipes
+===
+
+Mise en forme des données dans le template.
+
+Cf. <https://angular.io/guide/pipe>
+
+Ex :
+
+      <p>The hero's birthday is {{ birthday | date }}</p>
+
+La valeur de _birthday_ sera mise au format date.
+
+On peut paramétrer un pipe
+----
+
+* Paramétrage direct :
+     
+      <p>The hero's birthday is {{ birthday | date:"MM/dd/yy" }} </p>
+
+* Paramétrage avec une propriété d'un composant :
+
+   template :
+   
+      <p>The hero's birthday is {{ birthday | date:format }}</p>
+      
+   composant :
+
+      class HeroBirthday2Component {
+      birthday = new Date(1988, 3, 15); // April 15, 1988
+      get format() { return this.toggle ? 'shortDate' : 'fullDate'; }
+
+Chaînage
+---
+
+Ex :
+
+    {{ birthday | date | uppercase}}
+
+
+Pipes standards :
+---
+    DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, and PercentPipe
+
+Cf. <https://angular.io/api?type=pipe>
+
+
+Divers
+===
+
+template
+---
+
+     <router-outlet></router-outlet>
+
+zone d'affichage des composants gérés par le routeur
+
+@Component
+---
+    selector
+
+Définition du tag HTML utilisé pour référencer ce composant.
+
+
+    providers
+Array of dependency injection providers for services that the component requires.
+
+Observable
+---
+
+= flux d'événements auxquels sont attachés un callback qui est éxécuté pour chaque événement.
+
+Il peut être annulé.
+
+Il peut manipulé par des méthodes de tableau _map, forEach, reduce, ..._
+
+Promise
+---
+
+Cf. <https://basarat.gitbooks.io/typescript/content/docs/promise.html>
+
+Gestion du résultat d'une opération asynchrone qui peut échouer ou réussir.
+
+Mise en oeuvre :
+
+    const promise = new Promise((resolve, reject) => {
+    // code de l'opération asynchrone
+    // appelle resolve() en cas de succès
+    // appelle reject() en cas d'échec
+    });
+
+    promise.then((res) => {
+    // traitement en cas de succès
+    });
+
+    promise.catch((err) => {
+    // traitement en cas d'échec
+    });