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