Introduction à Angular 2

INTRODUCTION À ANGULAR 2 Laurent Duveau
7 juillet 2016
1

LAURENT DUVEAU
@LaurentDuveau
Fondateur de l’Académie Angular
Formation classroom Angular 2 sur 2 jours
23 formations en 10 mois
Montréal, Québec, Toronto, Vancouver,
Ottawa, Calgary, …

Angular 2 est en
Release Candidate
#RC4
www.angular.io

Angular 2 est
bâti avec
TypeScript

Angular 2 est
compatible avec
Internet Explorer 9+

CONFIGURATION TYPIQUE DE L'ENVIRONNEMENT…
10
Installation de NodeJs
package.json
tsconfig.json
typings.json
Setup grunt/gulp ou
WebPack
Setup module loader
Setup unit testing
Setup build release
> npm install angular typescript typings
tslint karma jasmine ……

CONFIGURATION TYPIQUE DE L'ENVIRONNEMENT…
11

ANGULAR CLI! (COMMAND LINE INTERFACE)
Mise en route rapide!
12
> npm install angular-cli -g
> ng new DemoApp
> ng serve
cli.angular.io

Votre app est un
arbre de
composants
modulaires

Map Update
App
DetailsList
ProductsMenu Contact

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>

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 {
}

É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

RENDERING
{{ expression }}
<div>
{{ product.name }}
</div>

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

GESTION DES ÉVÈNEMENTS
( event )
<button (click)="sort($event)">Total</button>
<select (change)="sortProperty('prix')">

BINDING BI-DIRECTIONNEL
[( ngModel )]
Syntaxe “bananes dans une boîte”
<input type="text" [(ngModel)]="prod.prix" />
<my-comp [(title)]="name"></my-comp>

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>

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

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

RÉCAPITULATIF
Angular 2 Cheat Sheet
https://angular.io/docs/ts/latest/guide/cheatsheet.html

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

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

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

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

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

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

Introduction à Angular 2

Contenu connexe

Tendances

Similaire à Introduction à Angular 2

Plus de Laurent Duveau

Dernier

Introduction à Angular 2