De 0 à Angular en 1h30! (french)
4 j'aime1,652 vues
Le document présente un aperçu des formations Angular et de TypeScript, un langage de programmation open source développé par Microsoft pour améliorer le JavaScript. Il décrit les concepts clés d'Angular, tels que les composants, les services et le routage, tout en mentionnant l'utilisation des Progressive Web Apps (PWA) et les mises à jour fréquentes du framework. De plus, il liste diverses entreprises et organisations qui utilisent Angular et fournit des instructions pour commencer à travailler avec Angular CLI.
![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!](https://image.slidesharecdn.com/angular-181128140431/85/De-0-a-Angular-en-1h30-french-10-320.jpg)
De 0 à Angular en 1h30! (french)
- 1. De 0 à Angular en ~1h30! 27 Novembre 2018 HTML5Mtl Meetup, Montréal Laurent Duveau @LaurentDuveau
- 2. merci!
- 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. =???
- 5. =666
- 7. 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
- 8. TypeScript est un sur-ensemble de JavaScript TypeScript ES20XX ES7/ES2016 ES6/ES2015 ES5
- 9. Comment ça marche? TypeScript fichier.ts JavaScript fichier.js Compilateur TypeScript Génère du code ES5/ES6/… “Transpiler”
- 10. 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!
- 11. 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…
- 12. Interfaces interface Person { firstName : string; lastName: string; sayHi:() => void; } function receivePerson(person:Person) { person.sayHi(); } 12
- 13. 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() { } }
- 16. 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
- 17. 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
- 18. 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
- 21. 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
- 22. 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
- 23. 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
- 24. Angular Core Concepts Components Modules Dependency Injection Language (TypeScript) Services Data Binding Decorators Routing
- 25. Bâtir une app avec des composants
- 27. Votre app est un arbre de composants Map Update App DetailsList ProductsMenu Contact
- 28. 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
- 29. 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 { }
- 31. Merci!