Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
De 0 à Angular
en ~1h30!
27 Novembre 2018
HTML5Mtl Meetup, Montréal
Laurent Duveau
@LaurentDuveau
merci!
Laurent Duveau
Montréal
Fondateur de l’Académie Angular
Formation en classe de 2 jours
129 workshops en 2 ans et demi
Mont...
=???
=666
TypeScript?
TypeScript est un langage de programmation libre et
open source développé par Microsoft qui a pour but
d'améli...
TypeScript est un sur-ensemble de JavaScript
TypeScript
ES20XX
ES7/ES2016
ES6/ES2015
ES5
Comment ça marche?
TypeScript
fichier.ts
JavaScript
fichier.js
Compilateur TypeScript
Génère du code
ES5/ES6/…
“Transpiler”
Annotations de type
let height:number = 6;
let isDone:boolean = true;
let name:string = "Académie Angular";
let list:numbe...
class Auto {
private engine:string;
constructor(_engine:string) {
this.engine = _engine;
}
get Engine():string {
return th...
Interfaces
interface Person {
firstName : string;
lastName: string;
sayHi:() => void;
}
function receivePerson(person:Pers...
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
a...
Angular CLI
Mise en route rapide!
+ génération de composants, services, routes, …
> npm install -g @angular/cli
> ng new D...
Angular CLI
Mettre à jour votre app Angular!
PWA : ProgressiveWeb Apps
« Application web au comportement natif »
Angular s...
Angular Console
UI pour la Angular CLI!
Convient aux débutants (Pas à l’aise avec le terminal)
Créer des projets, interagi...
Angular Console
19
Angular ?
Framework JavaScript particulièrement adapté pour les applications
web modernes monopage (Single Page Applicatio...
Ils utilisent Angular…
Média etTélécoms
• CBC
• Radio Canada
• Cogeco Media
• Rogers
• Telus
• Videotron
• Stingray Digita...
JavaScript, HTML,
CSS, …
Angular est là
API REST et:
ASP.NET,C#,
Java, PHP, Ruby,
Node, …
Votre BD est ici!
Où est
TypeScr...
Angular Core Concepts
Components Modules
Dependency
Injection
Language
(TypeScript)
Services Data Binding Decorators Routi...
Bâtir une app avec des composants
Header
Component
Items List
Component
Menu
Component
Grid
Component
Votre app est un arbre de composants
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
(class...
La classe d’un composant
imports
décorateur
classe
import { Component } from '@angular/core';
import { DataService } from ...
Merci!
Formations Angular
De 0 à Angular en 1h30! (french)
De 0 à Angular en 1h30! (french)
De 0 à Angular en 1h30! (french)
De 0 à Angular en 1h30! (french)
De 0 à Angular en 1h30! (french)
Próxima SlideShare
Cargando en…5
×

De 0 à Angular en 1h30! (french)

752 visualizaciones

Publicado el

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

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

Publicado en: Tecnología
  • Sé el primero en comentar

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

×