Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

De 0 à Angular en 1h30! (french)

707 views

Published on

Présentation technique de Laurent Duveau au Meetup HTML5Mtl du 27 Novembre 2018 à Montréal, Canada.

https://www.meetup.com/HTML5mtl/events/256372842/

Published in: Technology
  • Be the first to comment

De 0 à Angular en 1h30! (french)

  1. 1. De 0 à Angular en ~1h30! 27 Novembre 2018 HTML5Mtl Meetup, Montréal Laurent Duveau @LaurentDuveau
  2. 2. merci!
  3. 3. Laurent Duveau Montréal Fondateur de l’Académie Angular Formation en classe de 2 jours 129 workshops en 2 ans et demi Montréal, Québec,Toronto, Ottawa, Vancouver, Calgary, Winnipeg, Rimouski , Boston, London, Copenhague, Helsinki, Punta Cana… @LaurentDuveau
  4. 4. =???
  5. 5. =666
  6. 6. TypeScript? TypeScript est un langage de programmation libre et open source développé par Microsoft qui a pour but d'améliorer et de sécuriser la production de code JS. Sur-ensemble de JavaScript (c'est-à-dire que tout code JavaScript peut être utilisé avecTypeScript). Le codeTypeScript est transpilé en JavaScript, pouvant ainsi être interprété par n'importe quel navigateur web. -Wikipédia
  7. 7. TypeScript est un sur-ensemble de JavaScript TypeScript ES20XX ES7/ES2016 ES6/ES2015 ES5
  8. 8. Comment ça marche? TypeScript fichier.ts JavaScript fichier.js Compilateur TypeScript Génère du code ES5/ES6/… “Transpiler”
  9. 9. Annotations de type let height:number = 6; let isDone:boolean = true; let name:string = "Académie Angular"; let list:number[] = [1, 2, 3]; function add(x: number, y: number): number { return x + y; } let res = add(18, "5"); 10 Erreur TypeScript dans l’IDE!
  10. 10. class Auto { private engine:string; constructor(_engine:string) { this.engine = _engine; } get Engine():string { return this.engine; } set Engine(val:string) { this.engine = val; } start() { console.log("Take off using: " + this.engine); } } méthode constructeur propriété get/set private/public/protected…
  11. 11. Interfaces interface Person { firstName : string; lastName: string; sayHi:() => void; } function receivePerson(person:Person) { person.sayHi(); } 12
  12. 12. Décorateurs Un décorateur est une expression qui est évaluée après qu’une classe soit définie, et peut être utilisé pour annoter ou modifier le code. Angular les utilise beaucoup 13 @Component(…) class Car { @Input() cpt: number; @methodDecorator() drive() { } }
  13. 13. Angular CLI Mise en route rapide! + génération de composants, services, routes, … > npm install -g @angular/cli > ng new DemoApp > cd DemoApp > ng serve https://angular.io/cli > ng g c products/product-list
  14. 14. Angular CLI Mettre à jour votre app Angular! PWA : ProgressiveWeb Apps « Application web au comportement natif » Angular supporte PWA et la CLI nous permet de l’activer en 1 commande. > ng add @angular/pwa > ng update
  15. 15. Angular Console UI pour la Angular CLI! Convient aux débutants (Pas à l’aise avec le terminal) Créer des projets, interagir avec votre éditeur, générateurs et commandes, installer des extensions, … Vous aide en fournissant auto-complétion et validation des commandes 18 https://angularconsole.com
  16. 16. Angular Console 19
  17. 17. Angular ? Framework JavaScript particulièrement adapté pour les applications web modernes monopage (Single Page Application, ou SPA) Maintenu par Google enTypeScript Large communauté Forte adoption en entreprise Compatible avec IE 9+ et autres navigateurs modernes Open Source, licence MIT v2 Septembre 2016 v7 Octobre 2018 www.angular.io 1 nouvelle version aux 6 mois
  18. 18. Ils utilisent Angular… Média etTélécoms • CBC • Radio Canada • Cogeco Media • Rogers • Telus • Videotron • Stingray Digital Québec • RAMQ • Sûreté du Québec • Ville de Montréal • Ville de Longueuil • Ville de Gatineau • Unisersité du Québec • Université de Montréal • Université Laval • Université de Sherbrooke • Commission scolaire de Laval • Loto Québec • HydroQuébec • CRIM (Centre de Recherche Informatique de Montréal) • BAnQ (Bibliothèque et Archives nationales du Québec) • Caisse de dépôt et placement du Québec • Cirque du Soleil • CCQ (Commission de la construction du Québec) • Corporation d'Industrie Touristique du Québec • Régime des Bénéfices Autochtone • INRS (Institut national de la recherche scientifique) Divers • Boeing • Fedex • CanadianTire • Schneider Electric • SAP • ESRI • Expedia • Hewlett-Packard • Fujitsu • Cisco • Microsoft • Jean Coutu Canada • CAA • Canada Post • CIRA (Canadian Internet Registration Authority) • CPA (Canadian Pharmacists Association) • CMHC (Société canadienne d'hypothèques et de logement) • Office of the Superintendent of Financial Institutions Canada • ONF (Office national du film du Canada) • Canadian Museum of History • CHRC (Canadian Heart ResearchCentre) Gouvernement et Armée • Forces Canada • Government of Canada • Government of Ontario • House of Commons • Emploi et Développement social Canada • Canadian Cadet Organizations • Canadian Forces Morale andWelfare Services • CMHC (Société canadienne d'hypothèques et de logement) • Ministère de la défense Canada • Ministère de la Santé et des Services Sociaux • Ministère de la Sécurité publique • Ministère de l'Économie, Innovation, Exportation • Ministère desTransports du Québec • Ministère du Développement Durable, Environnement, Faune et Parcs • Ressources NaturellesCanada • Revenu Québec • SOQUIJ (Société Québécoise d'Information Juridique) • Transportation Safety Board of Canada • Treasury Board of Canada Secretariat • Nuclear Safety Commission Banques • RBC • Desjardins • Banque Nationale • BMO (Bank of Montreal) • Scotia Bank • TD • Banque de développement du Canada (BDC) • Morgan Stanley Assurances • DesjardinsAssurances • IndustrielleAlliance • Intact • La Capitale • Manulife • Pacific Blue Cross
  19. 19. JavaScript, HTML, CSS, … Angular est là API REST et: ASP.NET,C#, Java, PHP, Ruby, Node, … Votre BD est ici! Où est TypeScript ? Angular est l’app front end pour n’importe quel backend Ce qui signifie que Angular (JavaScript) ne pourra *jamais* se connecter directement à une base de données… (bien sûr!) … mais peut émettre des requêtes Http HTTP
  20. 20. Angular Core Concepts Components Modules Dependency Injection Language (TypeScript) Services Data Binding Decorators Routing
  21. 21. Bâtir une app avec des composants
  22. 22. Header Component Items List Component Menu Component Grid Component
  23. 23. Votre app est un arbre de composants Map Update App DetailsList ProductsMenu Contact
  24. 24. Qu'est-ce qu'un composant? Un composant est un objet réutilisable Fait de: Offre un "sélecteur": HTML Template Code (classe) <product-list></product-list> TypeScript! place une instance du composant dans le DOM
  25. 25. La classe d’un composant imports décorateur classe import { Component } from '@angular/core'; import { DataService } from './data.service'; @Component({ selector: 'product-detail', templateUrl: 'product-detail.component.html' }) export class ProductDetailComponent { }
  26. 26. Merci!
  27. 27. Formations Angular

×