Introduction à Angular 2

874 vues

Publié le

Présentation technique en français donnée par Laurent Duveau lors de la conférence DevTeach Montréal le 07 Juillet 2016.

Publié dans : Technologie
0 commentaire
6 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
874
Sur SlideShare
0
Issues des intégrations
0
Intégrations
354
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
6
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Introduction à Angular 2

  1. 1. INTRODUCTION À ANGULAR 2 Laurent Duveau 7 juillet 2016 1
  2. 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, …
  3. 3. ANGULAR 2
  4. 4. Angular 2 est en Release Candidate #RC4 www.angular.io
  5. 5. Angular 2 Final ?
  6. 6. Angular 2 est bâti avec TypeScript
  7. 7. Angular 2 est compatible avec Internet Explorer 9+
  8. 8. UN PREMIER PROJET 9
  9. 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 ……
  10. 10. CONFIGURATION TYPIQUE DE L'ENVIRONNEMENT… 11
  11. 11. ANGULAR CLI! (COMMAND LINE INTERFACE) Mise en route rapide! 12 > npm install angular-cli -g > ng new DemoApp > ng serve cli.angular.io
  12. 12. COMPOSANTS
  13. 13. Votre app est un arbre de composants modulaires
  14. 14. Map Update App DetailsList ProductsMenu Contact
  15. 15. 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>
  16. 16. 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 { }
  17. 17. É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
  18. 18. TEMPLATES 19
  19. 19. RENDERING {{ expression }} <div> {{ product.name }} </div>
  20. 20. 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
  21. 21. GESTION DES ÉVÈNEMENTS ( event ) <button (click)="sort($event)">Total</button> <select (change)="sortProperty('prix')">
  22. 22. BINDING BI-DIRECTIONNEL [( ngModel )] Syntaxe “bananes dans une boîte” <input type="text" [(ngModel)]="prod.prix" /> <my-comp [(title)]="name"></my-comp>
  23. 23. 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>
  24. 24. 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
  25. 25. 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
  26. 26. RÉCAPITULATIF Angular 2 Cheat Sheet https://angular.io/docs/ts/latest/guide/cheatsheet.html
  27. 27. DÉMONSTRATION 28
  28. 28. SERVICES 29
  29. 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
  30. 30. 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
  31. 31. 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
  32. 32. DÉMONSTRATION
  33. 33. HTTP 34
  34. 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
  35. 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
  36. 36. 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
  37. 37. DÉMONSTRATION
  38. 38. Merci!

×