16. QU'EST-CE QU'UN COMPOSANT?
Un composant est un objet réutilisable
Fait de:
Offre un "sélecteur":
HTML
Template
Code
(classe)
<products-list></products-list>
17. CECI EST UN COMPOSANT
imports
décorateurs
classe
import { Component } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'product-details',
templateUrl: 'product-details.component.html'
})
export class ProductDetailsComponent {
}
18. ÉTAPE DE BOOTSTRAP AU DÉMARRAGE
<html>
<body>
</body>
</html>
<script src="angular2.js"></script>
<script src="..."></script>
1
index.html
<app-component>3
Bootstrap
@Component({
selector: 'app-component'
})
class AppComponent {
}
app.component.ts
2
21. BINDING SUR PROPRIÉTÉS
[ propriété ]
<my-menu [items]="mainMenu"></my-menu>
<img [src]="imageUrl" />
<div [hidden]="isHidden"></div>
<div [style.width.px]="mySize"></div>Binding “one way” sur
toute propriété du DOM
23. BINDING BI-DIRECTIONNEL
[( ngModel )]
Syntaxe “bananes dans une boîte”
<input type="text" [(ngModel)]="prod.prix" />
<my-comp [(title)]="name"></my-comp>
24. DIRECTIVES BUILT-IN
Angular 2 offre quelques directives built-in comme ngFor et ngIf
Les directives n’ont pas de vues
<div *ngIf="canViewProducts">
<tr *ngFor="let product of products">
<td>{{ product.name }}</td>
<td>{{ product.price }}</td>
</tr>
25. PIPES
Utilisation de Pipes pour formater des données
Plusieurs pipes built-in
uppercase, lowercase, slice, date, currency, json
<td>{{ customer.orderTotal | currency:'CAD':true:'2.1-3' }}</td>
Formater comme
monnaie
26. COMPOSANTS ET TEMPLATES
Composants s’appuient sur des décorateurs pour définir des metadatas
@Component({
selector: 'customers',
templateUrl: 'app/customers/customers.component.html',
providers: [DataService],
directives: [RouterLink, SortByDirective],
pipes: [CapitalizePipe, TrimPipe]
})
export class CustomersComponent {
constructor(private dataService: DataService) { }
}
<customers></customers>
Déclaration des directives et
pipes utilisés dans le template
30. SERVICES ?
Classes Js offrant des fonctionnalités réutilisables
règles d’affaire, calculs, appels Ajax, etc.
Implémentés comme des singletons
Indépendant des composants
Un service peut être utilisé par des composants par injection de dépendance
Un service peut utiliser d’autres services par injection de dépendance
31. CRÉER UN SERVICE
31
import { Injectable } from '@angular/core';
Import { Http } from '@angular/http';
@Injectable()
export class ProductsService {
constructor(private _http: Http) { }
getProducts() { … }
}
products.service.ts
Injecté au runtime
Charge les modules
Décorateur @Injectable si le service
utilise lui-même d’autres services
32. UTILISER UN SERVICE
services
32
@Component({
selector: 'products',
templateUrl: 'products-list.component.html',
providers: [ProductsService]
})
export class ProductsListComponent {
products: Product[];
constructor(private _productsService: ProductsService) { }
ngOnInit() {
this._productsService.getProducts()
.subscribe((data: Product[]) => {
this.products = data;
});
}
}
products-list.component.ts
Les services doivent être déclarés
au composant
ProductsService est injecté au runtime
35. SERVICE ANGULAR HTTP
Les services REST peuvent être consommés avec le service Angular Http
import depuis @angular/http et spécifier le provider)
Fonctions standards get, put, post, delete sont supportées
Utiliser RxJS Observables ou Promesses pour opérations asynchrones
35
36. SERVICE ANGULAR HTTP
36
import { bootstrap } from '@angular/platform-browser-dynamic';
import { HTTP_PROVIDERS } from '@angular/http';
import { AppComponent } from './app/';
bootstrap(AppComponent, [HTTP_PROVIDERS]);
Import depuis la
librairie HTTP
main.ts
Passer HTTP_PROVIDERS
comme dépendence pour
l’app au complet
37. http
37
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/Rx';
@Injectable()
export class ProductsService {
constructor(private _http: Http) { }
getProducts() : Observable<Product[]> {
return this._http.get('api/products')
.map((response: Response) => response.json())
.catch(this.handleError);
}
}
Injecter le service Http
products.service.ts
Imports
Retourne un
Observable