notes angular

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 <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 <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
});