SlideShare une entreprise Scribd logo
1  sur  32
Télécharger pour lire hors ligne
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
Montréal, Québec,Toronto, Ottawa,
Vancouver, Calgary, Winnipeg,
Rimouski , Boston, London,
Copenhague, Helsinki, Punta Cana…
@LaurentDuveau
=???
=666
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
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: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!
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…
Interfaces
interface Person {
firstName : string;
lastName: string;
sayHi:() => void;
}
function receivePerson(person:Person) {
person.sayHi();
}
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() {
}
}
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
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
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
Angular Console
19
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
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
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
Angular Core Concepts
Components Modules
Dependency
Injection
Language
(TypeScript)
Services Data Binding Decorators Routing
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
(classe)
<product-list></product-list>
TypeScript! place une instance du
composant dans le DOM
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 {
}
Merci!
Formations Angular

Contenu connexe

Tendances

AngularJS - Présentation (french)
AngularJS - Présentation (french)AngularJS - Présentation (french)
AngularJS - Présentation (french)Yacine Rezgui
 
Introduction à React JS
Introduction à React JSIntroduction à React JS
Introduction à React JSAbdoulaye Dieng
 
Introduction à spring boot
Introduction à spring bootIntroduction à spring boot
Introduction à spring bootAntoine Rey
 
Initiation à Express js
Initiation à Express jsInitiation à Express js
Initiation à Express jsAbdoulaye Dieng
 
Concevoir, développer et sécuriser des micro-services avec Spring Boot
Concevoir, développer et sécuriser des micro-services avec Spring BootConcevoir, développer et sécuriser des micro-services avec Spring Boot
Concevoir, développer et sécuriser des micro-services avec Spring BootDNG Consulting
 
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)ENSET, Université Hassan II Casablanca
 
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
 

Tendances (20)

Support de cours angular
Support de cours angularSupport de cours angular
Support de cours angular
 
Cours JavaScript
Cours JavaScriptCours JavaScript
Cours JavaScript
 
AngularJS - Présentation (french)
AngularJS - Présentation (french)AngularJS - Présentation (french)
AngularJS - Présentation (french)
 
Introduction à React JS
Introduction à React JSIntroduction à React JS
Introduction à React JS
 
Angular.pdf
Angular.pdfAngular.pdf
Angular.pdf
 
Support developpement applications mobiles avec ionic v3 et v4
Support developpement applications mobiles avec ionic v3 et v4Support developpement applications mobiles avec ionic v3 et v4
Support developpement applications mobiles avec ionic v3 et v4
 
Angular 2
Angular 2Angular 2
Angular 2
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
 
Sécurité des Applications Web avec Json Web Token (JWT)
Sécurité des Applications Web avec Json Web Token (JWT)Sécurité des Applications Web avec Json Web Token (JWT)
Sécurité des Applications Web avec Json Web Token (JWT)
 
Support Web Services SOAP et RESTful Mr YOUSSFI
Support Web Services SOAP et RESTful Mr YOUSSFISupport Web Services SOAP et RESTful Mr YOUSSFI
Support Web Services SOAP et RESTful Mr YOUSSFI
 
Vue.js
Vue.jsVue.js
Vue.js
 
Introduction à spring boot
Introduction à spring bootIntroduction à spring boot
Introduction à spring boot
 
Initiation à Express js
Initiation à Express jsInitiation à Express js
Initiation à Express js
 
Introduction à Node.js
Introduction à Node.js Introduction à Node.js
Introduction à Node.js
 
Support de cours technologie et application m.youssfi
Support de cours technologie et application m.youssfiSupport de cours technologie et application m.youssfi
Support de cours technologie et application m.youssfi
 
Concevoir, développer et sécuriser des micro-services avec Spring Boot
Concevoir, développer et sécuriser des micro-services avec Spring BootConcevoir, développer et sécuriser des micro-services avec Spring Boot
Concevoir, développer et sécuriser des micro-services avec Spring Boot
 
Support programmation orientée objet c# .net version f8
Support programmation orientée objet c#  .net version f8Support programmation orientée objet c#  .net version f8
Support programmation orientée objet c# .net version f8
 
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
 
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
 
NodeJS for Beginner
NodeJS for BeginnerNodeJS for Beginner
NodeJS for Beginner
 

Similaire à De 0 à Angular en 1h30! (french)

Gab2015 aurelien regat-barrel_des applicationsclientesportablesgraceaucppmoderne
Gab2015 aurelien regat-barrel_des applicationsclientesportablesgraceaucppmoderneGab2015 aurelien regat-barrel_des applicationsclientesportablesgraceaucppmoderne
Gab2015 aurelien regat-barrel_des applicationsclientesportablesgraceaucppmoderneVincent Thavonekham-Pro
 
XWiki SAS
XWiki SASXWiki SAS
XWiki SASXWiki
 
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
 
CES 2017 wrap up - Touching the future
 CES 2017 wrap up - Touching the future  CES 2017 wrap up - Touching the future
CES 2017 wrap up - Touching the future Vidal Chriqui
 
Webinar HTML5 Microsoft Intel
Webinar HTML5 Microsoft IntelWebinar HTML5 Microsoft Intel
Webinar HTML5 Microsoft Inteldavrous
 
ASP.NET MVC 5 et Web API 2
ASP.NET MVC 5 et Web API 2ASP.NET MVC 5 et Web API 2
ASP.NET MVC 5 et Web API 2Microsoft
 
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
 
IOT Seminar Paris 2015 - AXA France Presentation
IOT Seminar Paris 2015 - AXA France PresentationIOT Seminar Paris 2015 - AXA France Presentation
IOT Seminar Paris 2015 - AXA France PresentationMongoDB
 
meetup devops aix marseille du 16/05/23
meetup devops aix marseille du 16/05/23meetup devops aix marseille du 16/05/23
meetup devops aix marseille du 16/05/23Frederic Leger
 
[AzureCamp 24 Juin 2014] Interactions en "temps réel" pour les applications W...
[AzureCamp 24 Juin 2014] Interactions en "temps réel" pour les applications W...[AzureCamp 24 Juin 2014] Interactions en "temps réel" pour les applications W...
[AzureCamp 24 Juin 2014] Interactions en "temps réel" pour les applications W...Microsoft Technet France
 
Arte utilise Acquia Cloud pour héberger ses plateformes web
Arte utilise Acquia Cloud pour héberger ses plateformes webArte utilise Acquia Cloud pour héberger ses plateformes web
Arte utilise Acquia Cloud pour héberger ses plateformes webAcquia
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8davrous
 
Gérer sa dette technique avec SonarQube
Gérer sa dette technique avec SonarQubeGérer sa dette technique avec SonarQube
Gérer sa dette technique avec SonarQubePierre-Henri Gache
 
Introduction au développement windows 8 modern ui avec html5 et javascript
Introduction au développement windows 8 modern ui avec html5 et javascriptIntroduction au développement windows 8 modern ui avec html5 et javascript
Introduction au développement windows 8 modern ui avec html5 et javascriptdavrous
 
Introduction au développement Windows 8 ModernUI avec HTML5 et JavaScript
Introduction au développement Windows 8 ModernUI avec HTML5 et JavaScriptIntroduction au développement Windows 8 ModernUI avec HTML5 et JavaScript
Introduction au développement Windows 8 ModernUI avec HTML5 et JavaScriptMicrosoft
 
Retour d&rsquo;expérience GlobeCast : Réduisez votre TCO avec les abonnements...
Retour d&rsquo;expérience GlobeCast : Réduisez votre TCO avec les abonnements...Retour d&rsquo;expérience GlobeCast : Réduisez votre TCO avec les abonnements...
Retour d&rsquo;expérience GlobeCast : Réduisez votre TCO avec les abonnements...Microsoft
 

Similaire à De 0 à Angular en 1h30! (french) (20)

Gab2015 aurelien regat-barrel_des applicationsclientesportablesgraceaucppmoderne
Gab2015 aurelien regat-barrel_des applicationsclientesportablesgraceaucppmoderneGab2015 aurelien regat-barrel_des applicationsclientesportablesgraceaucppmoderne
Gab2015 aurelien regat-barrel_des applicationsclientesportablesgraceaucppmoderne
 
XWiki SAS
XWiki SASXWiki SAS
XWiki SAS
 
ngconf 2016 (french)
ngconf 2016 (french)ngconf 2016 (french)
ngconf 2016 (french)
 
Démystifions l'API-culture!
Démystifions l'API-culture!Démystifions l'API-culture!
Démystifions l'API-culture!
 
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
 
CES 2017 wrap up - Touching the future
 CES 2017 wrap up - Touching the future  CES 2017 wrap up - Touching the future
CES 2017 wrap up - Touching the future
 
Webinar HTML5 Microsoft Intel
Webinar HTML5 Microsoft IntelWebinar HTML5 Microsoft Intel
Webinar HTML5 Microsoft Intel
 
ASP.NET MVC 5 et Web API 2
ASP.NET MVC 5 et Web API 2ASP.NET MVC 5 et Web API 2
ASP.NET MVC 5 et Web API 2
 
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)
 
IOT Seminar Paris 2015 - AXA France Presentation
IOT Seminar Paris 2015 - AXA France PresentationIOT Seminar Paris 2015 - AXA France Presentation
IOT Seminar Paris 2015 - AXA France Presentation
 
API Management
API ManagementAPI Management
API Management
 
meetup devops aix marseille du 16/05/23
meetup devops aix marseille du 16/05/23meetup devops aix marseille du 16/05/23
meetup devops aix marseille du 16/05/23
 
[AzureCamp 24 Juin 2014] Interactions en "temps réel" pour les applications W...
[AzureCamp 24 Juin 2014] Interactions en "temps réel" pour les applications W...[AzureCamp 24 Juin 2014] Interactions en "temps réel" pour les applications W...
[AzureCamp 24 Juin 2014] Interactions en "temps réel" pour les applications W...
 
Arte utilise Acquia Cloud pour héberger ses plateformes web
Arte utilise Acquia Cloud pour héberger ses plateformes webArte utilise Acquia Cloud pour héberger ses plateformes web
Arte utilise Acquia Cloud pour héberger ses plateformes web
 
Meet up sqli lyon 09-2015 - Angular
Meet up sqli lyon 09-2015 - AngularMeet up sqli lyon 09-2015 - Angular
Meet up sqli lyon 09-2015 - Angular
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
 
Gérer sa dette technique avec SonarQube
Gérer sa dette technique avec SonarQubeGérer sa dette technique avec SonarQube
Gérer sa dette technique avec SonarQube
 
Introduction au développement windows 8 modern ui avec html5 et javascript
Introduction au développement windows 8 modern ui avec html5 et javascriptIntroduction au développement windows 8 modern ui avec html5 et javascript
Introduction au développement windows 8 modern ui avec html5 et javascript
 
Introduction au développement Windows 8 ModernUI avec HTML5 et JavaScript
Introduction au développement Windows 8 ModernUI avec HTML5 et JavaScriptIntroduction au développement Windows 8 ModernUI avec HTML5 et JavaScript
Introduction au développement Windows 8 ModernUI avec HTML5 et JavaScript
 
Retour d&rsquo;expérience GlobeCast : Réduisez votre TCO avec les abonnements...
Retour d&rsquo;expérience GlobeCast : Réduisez votre TCO avec les abonnements...Retour d&rsquo;expérience GlobeCast : Réduisez votre TCO avec les abonnements...
Retour d&rsquo;expérience GlobeCast : Réduisez votre TCO avec les abonnements...
 

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
 
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
 
Introduction à Angular 2
Introduction à Angular 2Introduction à Angular 2
Introduction à Angular 2Laurent 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
 
Windows 8: Live tiles, badges et notifications toasts [french]
Windows 8: Live tiles, badges et notifications toasts [french]Windows 8: Live tiles, badges et notifications toasts [french]
Windows 8: Live tiles, badges et notifications toasts [french]Laurent 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!
 
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
 
Introduction à Angular 2
Introduction à Angular 2Introduction à Angular 2
Introduction à Angular 2
 
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??
 
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
 
Windows App Studio
Windows App StudioWindows App Studio
Windows App Studio
 
Windows 8: Live tiles, badges et notifications toasts [french]
Windows 8: Live tiles, badges et notifications toasts [french]Windows 8: Live tiles, badges et notifications toasts [french]
Windows 8: Live tiles, badges et notifications toasts [french]
 

De 0 à Angular en 1h30! (french)

  • 1. De 0 à Angular en ~1h30! 27 Novembre 2018 HTML5Mtl Meetup, Montréal Laurent Duveau @LaurentDuveau
  • 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
  • 6.
  • 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() { } }
  • 14.
  • 15.
  • 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
  • 20.
  • 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 { }
  • 30.