SlideShare une entreprise Scribd logo
1  sur  40
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
Angular 2 est en
Release Candidate
#RC4
www.angular.io
Angular 2
Final ?
Angular 2 est
bâti avec
TypeScript
Angular 2 est
compatible avec
Internet Explorer 9+
UN PREMIER
PROJET
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
COMPOSANTS
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
TEMPLATES
19
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
DÉMONSTRATION
28
SERVICES
29
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
DÉMONSTRATION
HTTP
34
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
DÉMONSTRATION
Merci!
Introduction à Angular 2

Contenu connexe

Tendances

Angular - Chapter 7 - HTTP Services
Angular - Chapter 7 - HTTP ServicesAngular - Chapter 7 - HTTP Services
Angular - Chapter 7 - HTTP ServicesWebStackAcademy
 
Technologies sur angular.pptx
Technologies sur angular.pptxTechnologies sur angular.pptx
Technologies sur angular.pptxIdrissaDembl
 
Documenting your REST API with Swagger - JOIN 2014
Documenting your REST API with Swagger - JOIN 2014Documenting your REST API with Swagger - JOIN 2014
Documenting your REST API with Swagger - JOIN 2014JWORKS powered by Ordina
 
Angular interview questions
Angular interview questionsAngular interview questions
Angular interview questionsGoa App
 
Angular 5 presentation for beginners
Angular 5 presentation for beginnersAngular 5 presentation for beginners
Angular 5 presentation for beginnersImran Qasim
 
Angular Best Practices - Perfomatix
Angular Best Practices - PerfomatixAngular Best Practices - Perfomatix
Angular Best Practices - PerfomatixPerfomatix Solutions
 
Architecture jee principe de inversion de controle et injection des dependances
Architecture jee principe de inversion de controle et injection des dependancesArchitecture jee principe de inversion de controle et injection des dependances
Architecture jee principe de inversion de controle et injection des dependancesENSET, Université Hassan II Casablanca
 
Angular Introduction By Surekha Gadkari
Angular Introduction By Surekha GadkariAngular Introduction By Surekha Gadkari
Angular Introduction By Surekha GadkariSurekha Gadkari
 
Introduction au Framework AngularJs
Introduction au Framework AngularJsIntroduction au Framework AngularJs
Introduction au Framework AngularJsRadhoueneRouached
 
Presentation of framework Angular
Presentation of framework AngularPresentation of framework Angular
Presentation of framework AngularLhouceine OUHAMZA
 
Workshop spring session 2 - La persistance au sein des applications Java
Workshop spring   session 2 - La persistance au sein des applications JavaWorkshop spring   session 2 - La persistance au sein des applications Java
Workshop spring session 2 - La persistance au sein des applications JavaAntoine Rey
 
Presentation JEE et son écossystéme
Presentation JEE et son écossystémePresentation JEE et son écossystéme
Presentation JEE et son écossystémeAlgeria JUG
 
Angular 2.0 forms
Angular 2.0 formsAngular 2.0 forms
Angular 2.0 formsEyal Vardi
 

Tendances (20)

Angular - Chapter 7 - HTTP Services
Angular - Chapter 7 - HTTP ServicesAngular - Chapter 7 - HTTP Services
Angular - Chapter 7 - HTTP Services
 
Technologies sur angular.pptx
Technologies sur angular.pptxTechnologies sur angular.pptx
Technologies sur angular.pptx
 
Documenting your REST API with Swagger - JOIN 2014
Documenting your REST API with Swagger - JOIN 2014Documenting your REST API with Swagger - JOIN 2014
Documenting your REST API with Swagger - JOIN 2014
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
 
Angular interview questions
Angular interview questionsAngular interview questions
Angular interview questions
 
Angular 5 presentation for beginners
Angular 5 presentation for beginnersAngular 5 presentation for beginners
Angular 5 presentation for beginners
 
Angular
AngularAngular
Angular
 
Angular Best Practices - Perfomatix
Angular Best Practices - PerfomatixAngular Best Practices - Perfomatix
Angular Best Practices - Perfomatix
 
Angular introduction students
Angular introduction studentsAngular introduction students
Angular introduction students
 
What is Angular?
What is Angular?What is Angular?
What is Angular?
 
Angular Avancé
Angular AvancéAngular Avancé
Angular Avancé
 
Architecture jee principe de inversion de controle et injection des dependances
Architecture jee principe de inversion de controle et injection des dependancesArchitecture jee principe de inversion de controle et injection des dependances
Architecture jee principe de inversion de controle et injection des dependances
 
Angular Introduction By Surekha Gadkari
Angular Introduction By Surekha GadkariAngular Introduction By Surekha Gadkari
Angular Introduction By Surekha Gadkari
 
Introduction au Framework AngularJs
Introduction au Framework AngularJsIntroduction au Framework AngularJs
Introduction au Framework AngularJs
 
Presentation of framework Angular
Presentation of framework AngularPresentation of framework Angular
Presentation of framework Angular
 
Workshop spring session 2 - La persistance au sein des applications Java
Workshop spring   session 2 - La persistance au sein des applications JavaWorkshop spring   session 2 - La persistance au sein des applications Java
Workshop spring session 2 - La persistance au sein des applications Java
 
Angular Basics.pptx
Angular Basics.pptxAngular Basics.pptx
Angular Basics.pptx
 
Angular
AngularAngular
Angular
 
Presentation JEE et son écossystéme
Presentation JEE et son écossystémePresentation JEE et son écossystéme
Presentation JEE et son écossystéme
 
Angular 2.0 forms
Angular 2.0 formsAngular 2.0 forms
Angular 2.0 forms
 

Similaire à Introduction à Angular 2

Angular2 / Typescript symposium Versusmind
Angular2 / Typescript symposium VersusmindAngular2 / Typescript symposium Versusmind
Angular2 / Typescript symposium VersusmindPhilippe Didiergeorges
 
Angular développer des applications .pdf
Angular développer des applications .pdfAngular développer des applications .pdf
Angular développer des applications .pdfimenhamada17
 
Chapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfChapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfBoubakerMedanas
 
Chapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfChapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfBoubakerMedanas
 
SPA avec Angular et SignalR (FR)
SPA avec Angular et SignalR (FR)SPA avec Angular et SignalR (FR)
SPA avec Angular et SignalR (FR)Rui Carvalho
 
Alphorm.com Formation Angular - Les fondamentaux
Alphorm.com Formation Angular - Les fondamentauxAlphorm.com Formation Angular - Les fondamentaux
Alphorm.com Formation Angular - Les fondamentauxAlphorm
 
Angular : Un aperçu du framework de développement d’applications Web
Angular : Un aperçu du framework de développement d’applications WebAngular : Un aperçu du framework de développement d’applications Web
Angular : Un aperçu du framework de développement d’applications WebDekeltv1
 
Ionic, AngularJS,Cordova,NodeJS,Sass
Ionic, AngularJS,Cordova,NodeJS,SassIonic, AngularJS,Cordova,NodeJS,Sass
Ionic, AngularJS,Cordova,NodeJS,Sassmarwa baich
 
Cours n°1.1-Introduction.pdf angularrrrr
Cours n°1.1-Introduction.pdf angularrrrrCours n°1.1-Introduction.pdf angularrrrr
Cours n°1.1-Introduction.pdf angularrrrrinesrdissi60
 
Plateformes et infrastructure infonuagique natif de ville de Montréall
Plateformes et infrastructure infonuagique natif de ville de MontréallPlateformes et infrastructure infonuagique natif de ville de Montréall
Plateformes et infrastructure infonuagique natif de ville de MontréallCloudOps2005
 
Le futur de AngularJS (2.0)
Le futur de AngularJS (2.0)Le futur de AngularJS (2.0)
Le futur de AngularJS (2.0)Clément Dubois
 
Evolutions scub foundation 3.0 = 4.0
Evolutions scub foundation 3.0 =  4.0Evolutions scub foundation 3.0 =  4.0
Evolutions scub foundation 3.0 = 4.0adrienhautot
 
Workshop angular2
Workshop angular2 Workshop angular2
Workshop angular2 sihemhcine
 
Objet direct 2013-05-11 Microsoft ALM 2013 Software Factory
Objet direct 2013-05-11 Microsoft ALM 2013 Software FactoryObjet direct 2013-05-11 Microsoft ALM 2013 Software Factory
Objet direct 2013-05-11 Microsoft ALM 2013 Software FactoryFactoVia
 
Chaine de production pipeline
Chaine de production   pipelineChaine de production   pipeline
Chaine de production pipelineNicolas wallerand
 

Similaire à Introduction à Angular 2 (20)

Angular2 / Typescript symposium Versusmind
Angular2 / Typescript symposium VersusmindAngular2 / Typescript symposium Versusmind
Angular2 / Typescript symposium Versusmind
 
Angular 11
Angular 11Angular 11
Angular 11
 
Angular développer des applications .pdf
Angular développer des applications .pdfAngular développer des applications .pdf
Angular développer des applications .pdf
 
Cours 1 introduction
Cours 1 introductionCours 1 introduction
Cours 1 introduction
 
Chapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfChapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdf
 
Chapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfChapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdf
 
AngularJS
AngularJSAngularJS
AngularJS
 
SPA avec Angular et SignalR (FR)
SPA avec Angular et SignalR (FR)SPA avec Angular et SignalR (FR)
SPA avec Angular et SignalR (FR)
 
Cours 2 les composants
Cours 2 les composantsCours 2 les composants
Cours 2 les composants
 
Alphorm.com Formation Angular - Les fondamentaux
Alphorm.com Formation Angular - Les fondamentauxAlphorm.com Formation Angular - Les fondamentaux
Alphorm.com Formation Angular - Les fondamentaux
 
Angular : Un aperçu du framework de développement d’applications Web
Angular : Un aperçu du framework de développement d’applications WebAngular : Un aperçu du framework de développement d’applications Web
Angular : Un aperçu du framework de développement d’applications Web
 
Ionic, AngularJS,Cordova,NodeJS,Sass
Ionic, AngularJS,Cordova,NodeJS,SassIonic, AngularJS,Cordova,NodeJS,Sass
Ionic, AngularJS,Cordova,NodeJS,Sass
 
Cours n°1.1-Introduction.pdf angularrrrr
Cours n°1.1-Introduction.pdf angularrrrrCours n°1.1-Introduction.pdf angularrrrr
Cours n°1.1-Introduction.pdf angularrrrr
 
Plateformes et infrastructure infonuagique natif de ville de Montréall
Plateformes et infrastructure infonuagique natif de ville de MontréallPlateformes et infrastructure infonuagique natif de ville de Montréall
Plateformes et infrastructure infonuagique natif de ville de Montréall
 
Le futur de AngularJS (2.0)
Le futur de AngularJS (2.0)Le futur de AngularJS (2.0)
Le futur de AngularJS (2.0)
 
Evolutions scub foundation 3.0 = 4.0
Evolutions scub foundation 3.0 =  4.0Evolutions scub foundation 3.0 =  4.0
Evolutions scub foundation 3.0 = 4.0
 
Workshop angular2
Workshop angular2 Workshop angular2
Workshop angular2
 
Retour d'experience projet AngularJS
Retour d'experience projet AngularJSRetour d'experience projet AngularJS
Retour d'experience projet AngularJS
 
Objet direct 2013-05-11 Microsoft ALM 2013 Software Factory
Objet direct 2013-05-11 Microsoft ALM 2013 Software FactoryObjet direct 2013-05-11 Microsoft ALM 2013 Software Factory
Objet direct 2013-05-11 Microsoft ALM 2013 Software Factory
 
Chaine de production pipeline
Chaine de production   pipelineChaine de production   pipeline
Chaine de production pipeline
 

Plus de Laurent Duveau

Shit happens… debugging an Angular app.
Shit happens… debugging an Angular app.Shit happens… debugging an Angular app.
Shit happens… debugging an Angular app.Laurent Duveau
 
8 things you didn't know about the Angular Router, you won't believe #6!
8 things you didn't know about the Angular Router, you won't believe #6!8 things you didn't know about the Angular Router, you won't believe #6!
8 things you didn't know about the Angular Router, you won't believe #6!Laurent Duveau
 
De 0 à Angular en 1h30! (french)
De 0 à Angular en 1h30! (french)De 0 à Angular en 1h30! (french)
De 0 à Angular en 1h30! (french)Laurent Duveau
 
Angular 6, CLI 6, Material 6 (french)
Angular 6, CLI 6, Material 6 (french)Angular 6, CLI 6, Material 6 (french)
Angular 6, CLI 6, Material 6 (french)Laurent Duveau
 
Angular Advanced Routing
Angular Advanced RoutingAngular Advanced Routing
Angular Advanced RoutingLaurent Duveau
 
Debugging an Angular App
Debugging an Angular AppDebugging an Angular App
Debugging an Angular AppLaurent Duveau
 
TypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret WeaponTypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret WeaponLaurent Duveau
 
Introduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersIntroduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersLaurent Duveau
 
TypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret WeaponTypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret WeaponLaurent Duveau
 
Introduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersIntroduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersLaurent Duveau
 
Introduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersIntroduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersLaurent Duveau
 
Introduction to Angular with TypeScript for .NET Developers
Introduction to Angular with TypeScript for .NET DevelopersIntroduction to Angular with TypeScript for .NET Developers
Introduction to Angular with TypeScript for .NET DevelopersLaurent Duveau
 
Introduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersIntroduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersLaurent Duveau
 
Angular 2... so can I use it now??
Angular 2... so can I use it now??Angular 2... so can I use it now??
Angular 2... so can I use it now??Laurent Duveau
 
Microsoft Edge pour les développeurs web
Microsoft Edge pour les développeurs webMicrosoft Edge pour les développeurs web
Microsoft Edge pour les développeurs webLaurent Duveau
 
Microsoft Edge pour les développeurs web
Microsoft Edge pour les développeurs webMicrosoft Edge pour les développeurs web
Microsoft Edge pour les développeurs webLaurent Duveau
 
Introduction to SPAs with AngularJS
Introduction to SPAs with AngularJSIntroduction to SPAs with AngularJS
Introduction to SPAs with AngularJSLaurent Duveau
 
Xamarin.Forms [french]
Xamarin.Forms [french]Xamarin.Forms [french]
Xamarin.Forms [french]Laurent Duveau
 
Back from Xamarin Evolve 2014
Back from Xamarin Evolve 2014Back from Xamarin Evolve 2014
Back from Xamarin Evolve 2014Laurent Duveau
 

Plus de Laurent Duveau (20)

Shit happens… debugging an Angular app.
Shit happens… debugging an Angular app.Shit happens… debugging an Angular app.
Shit happens… debugging an Angular app.
 
8 things you didn't know about the Angular Router, you won't believe #6!
8 things you didn't know about the Angular Router, you won't believe #6!8 things you didn't know about the Angular Router, you won't believe #6!
8 things you didn't know about the Angular Router, you won't believe #6!
 
De 0 à Angular en 1h30! (french)
De 0 à Angular en 1h30! (french)De 0 à Angular en 1h30! (french)
De 0 à Angular en 1h30! (french)
 
Angular 6, CLI 6, Material 6 (french)
Angular 6, CLI 6, Material 6 (french)Angular 6, CLI 6, Material 6 (french)
Angular 6, CLI 6, Material 6 (french)
 
Angular Advanced Routing
Angular Advanced RoutingAngular Advanced Routing
Angular Advanced Routing
 
Debugging an Angular App
Debugging an Angular AppDebugging an Angular App
Debugging an Angular App
 
TypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret WeaponTypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret Weapon
 
Introduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersIntroduction to Angular for .NET Developers
Introduction to Angular for .NET Developers
 
TypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret WeaponTypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret Weapon
 
Introduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersIntroduction to Angular for .NET Developers
Introduction to Angular for .NET Developers
 
Introduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersIntroduction to Angular for .NET Developers
Introduction to Angular for .NET Developers
 
Introduction to Angular with TypeScript for .NET Developers
Introduction to Angular with TypeScript for .NET DevelopersIntroduction to Angular with TypeScript for .NET Developers
Introduction to Angular with TypeScript for .NET Developers
 
Introduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersIntroduction to Angular for .NET Developers
Introduction to Angular for .NET Developers
 
Angular 2... so can I use it now??
Angular 2... so can I use it now??Angular 2... so can I use it now??
Angular 2... so can I use it now??
 
ngconf 2016 (french)
ngconf 2016 (french)ngconf 2016 (french)
ngconf 2016 (french)
 
Microsoft Edge pour les développeurs web
Microsoft Edge pour les développeurs webMicrosoft Edge pour les développeurs web
Microsoft Edge pour les développeurs web
 
Microsoft Edge pour les développeurs web
Microsoft Edge pour les développeurs webMicrosoft Edge pour les développeurs web
Microsoft Edge pour les développeurs web
 
Introduction to SPAs with AngularJS
Introduction to SPAs with AngularJSIntroduction to SPAs with AngularJS
Introduction to SPAs with AngularJS
 
Xamarin.Forms [french]
Xamarin.Forms [french]Xamarin.Forms [french]
Xamarin.Forms [french]
 
Back from Xamarin Evolve 2014
Back from Xamarin Evolve 2014Back from Xamarin Evolve 2014
Back from Xamarin Evolve 2014
 

Dernier

Etude_Bpifrance_-_Les_Greentech_francaises_-_3eme_edition_annuelle_2024.pdf
Etude_Bpifrance_-_Les_Greentech_francaises_-_3eme_edition_annuelle_2024.pdfEtude_Bpifrance_-_Les_Greentech_francaises_-_3eme_edition_annuelle_2024.pdf
Etude_Bpifrance_-_Les_Greentech_francaises_-_3eme_edition_annuelle_2024.pdfsnapierala
 
Intelligence Artificielle: Vers l'ère de l'imagination
Intelligence Artificielle: Vers l'ère de l'imaginationIntelligence Artificielle: Vers l'ère de l'imagination
Intelligence Artificielle: Vers l'ère de l'imaginationTony Aubé
 
Milo-AI Milo AI Congress est conçu pour transformer votre compréhension de l'IA
Milo-AI Milo AI Congress est conçu pour transformer votre compréhension de l'IAMilo-AI Milo AI Congress est conçu pour transformer votre compréhension de l'IA
Milo-AI Milo AI Congress est conçu pour transformer votre compréhension de l'IAUGAIA
 
Le Comptoir OCTO - MLOps : Les patterns MLOps dans le cloud
Le Comptoir OCTO - MLOps : Les patterns MLOps dans le cloudLe Comptoir OCTO - MLOps : Les patterns MLOps dans le cloud
Le Comptoir OCTO - MLOps : Les patterns MLOps dans le cloudOCTO Technology
 
La Grosse Conf 2024 - Philippe Stepniewski -Atelier - Live coding d'une base ...
La Grosse Conf 2024 - Philippe Stepniewski -Atelier - Live coding d'une base ...La Grosse Conf 2024 - Philippe Stepniewski -Atelier - Live coding d'une base ...
La Grosse Conf 2024 - Philippe Stepniewski -Atelier - Live coding d'une base ...OCTO Technology
 
LA SUPERINTELLIGENCE ARTIFICIELLE, SES BÉNÉFICES ET NUIRES ET QUE FAIRE POUR ...
LA SUPERINTELLIGENCE ARTIFICIELLE, SES BÉNÉFICES ET NUIRES ET QUE FAIRE POUR ...LA SUPERINTELLIGENCE ARTIFICIELLE, SES BÉNÉFICES ET NUIRES ET QUE FAIRE POUR ...
LA SUPERINTELLIGENCE ARTIFICIELLE, SES BÉNÉFICES ET NUIRES ET QUE FAIRE POUR ...Faga1939
 
La Grosse Conf 2024 - Philippe Prados - Atelier - RAG : au-delà de la démonst...
La Grosse Conf 2024 - Philippe Prados - Atelier - RAG : au-delà de la démonst...La Grosse Conf 2024 - Philippe Prados - Atelier - RAG : au-delà de la démonst...
La Grosse Conf 2024 - Philippe Prados - Atelier - RAG : au-delà de la démonst...OCTO Technology
 
GUM365 - Rencontre mensuelle Avril 2024 - Montréal
GUM365 - Rencontre mensuelle Avril 2024 - MontréalGUM365 - Rencontre mensuelle Avril 2024 - Montréal
GUM365 - Rencontre mensuelle Avril 2024 - MontréalNicolas Georgeault
 

Dernier (8)

Etude_Bpifrance_-_Les_Greentech_francaises_-_3eme_edition_annuelle_2024.pdf
Etude_Bpifrance_-_Les_Greentech_francaises_-_3eme_edition_annuelle_2024.pdfEtude_Bpifrance_-_Les_Greentech_francaises_-_3eme_edition_annuelle_2024.pdf
Etude_Bpifrance_-_Les_Greentech_francaises_-_3eme_edition_annuelle_2024.pdf
 
Intelligence Artificielle: Vers l'ère de l'imagination
Intelligence Artificielle: Vers l'ère de l'imaginationIntelligence Artificielle: Vers l'ère de l'imagination
Intelligence Artificielle: Vers l'ère de l'imagination
 
Milo-AI Milo AI Congress est conçu pour transformer votre compréhension de l'IA
Milo-AI Milo AI Congress est conçu pour transformer votre compréhension de l'IAMilo-AI Milo AI Congress est conçu pour transformer votre compréhension de l'IA
Milo-AI Milo AI Congress est conçu pour transformer votre compréhension de l'IA
 
Le Comptoir OCTO - MLOps : Les patterns MLOps dans le cloud
Le Comptoir OCTO - MLOps : Les patterns MLOps dans le cloudLe Comptoir OCTO - MLOps : Les patterns MLOps dans le cloud
Le Comptoir OCTO - MLOps : Les patterns MLOps dans le cloud
 
La Grosse Conf 2024 - Philippe Stepniewski -Atelier - Live coding d'une base ...
La Grosse Conf 2024 - Philippe Stepniewski -Atelier - Live coding d'une base ...La Grosse Conf 2024 - Philippe Stepniewski -Atelier - Live coding d'une base ...
La Grosse Conf 2024 - Philippe Stepniewski -Atelier - Live coding d'une base ...
 
LA SUPERINTELLIGENCE ARTIFICIELLE, SES BÉNÉFICES ET NUIRES ET QUE FAIRE POUR ...
LA SUPERINTELLIGENCE ARTIFICIELLE, SES BÉNÉFICES ET NUIRES ET QUE FAIRE POUR ...LA SUPERINTELLIGENCE ARTIFICIELLE, SES BÉNÉFICES ET NUIRES ET QUE FAIRE POUR ...
LA SUPERINTELLIGENCE ARTIFICIELLE, SES BÉNÉFICES ET NUIRES ET QUE FAIRE POUR ...
 
La Grosse Conf 2024 - Philippe Prados - Atelier - RAG : au-delà de la démonst...
La Grosse Conf 2024 - Philippe Prados - Atelier - RAG : au-delà de la démonst...La Grosse Conf 2024 - Philippe Prados - Atelier - RAG : au-delà de la démonst...
La Grosse Conf 2024 - Philippe Prados - Atelier - RAG : au-delà de la démonst...
 
GUM365 - Rencontre mensuelle Avril 2024 - Montréal
GUM365 - Rencontre mensuelle Avril 2024 - MontréalGUM365 - Rencontre mensuelle Avril 2024 - Montréal
GUM365 - Rencontre mensuelle Avril 2024 - Montréal
 

Introduction à Angular 2

  • 1. INTRODUCTION À ANGULAR 2 Laurent Duveau 7 juillet 2016 1
  • 2. 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, …
  • 4. Angular 2 est en Release Candidate #RC4 www.angular.io
  • 6. Angular 2 est bâti avec TypeScript
  • 7.
  • 8. Angular 2 est compatible avec Internet Explorer 9+
  • 10. 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 ……
  • 11. CONFIGURATION TYPIQUE DE L'ENVIRONNEMENT… 11
  • 12. ANGULAR CLI! (COMMAND LINE INTERFACE) Mise en route rapide! 12 > npm install angular-cli -g > ng new DemoApp > ng serve cli.angular.io
  • 14. Votre app est un arbre de composants modulaires
  • 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
  • 20. RENDERING {{ expression }} <div> {{ product.name }} </div>
  • 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
  • 22. GESTION DES ÉVÈNEMENTS ( event ) <button (click)="sort($event)">Total</button> <select (change)="sortProperty('prix')">
  • 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
  • 27. RÉCAPITULATIF Angular 2 Cheat Sheet https://angular.io/docs/ts/latest/guide/cheatsheet.html
  • 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