Introduction à Angular 2

Copyright 2016 - Toute reproduction interditeAngularFrance.com
Introduction à
Angular 2
Présenté par Vincent Caillierez
1

Programme
• Présentation d’Angular - Quelques chiffres &
principales fonctionnalités d’Angular 2
• Comparaison entre Angular 1 et Angular 2
• Outillage Angular 2
• Angular 2 est une plateforme
• Démarrer avec Angular 2
• Migrer de Angular 1 à Angular 2
• Faut-il passer à Angular 2 aujourd’hui ?
2

Vincent Caillierez
• Mon proﬁl
• Développeur web fullstack depuis une quinzaine d’années.
• Entre 2005 et 2012 : spécialisé dans le CMS Drupal.
• Depuis 2014 : Spécialisé dans les technos frontend, notamment
Angular.
• Mon job aujourd’hui : Formations Angular et missions de
développement freelance.
• Plus d’infos
• WWW: http://angularfrance.com/
• Twitter: https://twitter.com/angularfrance
• Facebook: https://www.facebook.com/angularfrance
3

ModuleCopyright 2016 - Toute reproduction interditeAngularFrance.com
Quelques chiffres
sur Angular
4

Recherches “Angular”
(Google Trends)
5

Utilisation d’Angular sur le web 
(Builtwith.com)
6

Jobs Angular 
(Indeed.com)
7

Compétence “Angular” 
(LinkedIn)
8
Nombre de proﬁls LinkedIn ayant la compétence (mai 2016)
0
75000
150000
225000
300000
Angular Backbone React Ember

Communauté Angular
9

Dates clé
• 2009. Création de la version originale du framework
par Misko Hevery.
• 2010. Misko Hevery rejoint Google, qui soutient alors
ofﬁciellement AngularJS.
• 2013. Explosion de notoriété et d’adoption.
• Sept 2014. Annonce de la sortie d’Angular 2 (un peu
prématurée).
• Mai 2016. Sortie de la première Release Candidate
d’Angular 2.
10

Angular 2
Présentation rapide
11

Qu’est-ce qu’Angular ?
• Angular est un framework JavaScript pour créer des applications monopages
(SPA), web et mobiles.
• Quels types d’applications peut-on développer ?
• De petits widgets interactifs pour un site web existant (moteur de
recherche, module de réservation). Exemple : https://www.virginamerica.com/
• Site web complet. Exemple : https://weather.com/
• Application mobile. Exemple : https://posse.com/ 
 
 
 
 
• Et Angular 2 ? Pour l’instant, surtout utilisé en interne à Google (Google
Adwords, Google Fiber…). Plus de références : http://builtwithangular2.com/
12

Principales caractéristiques
d’Angular 2
• Plusieurs langages supportés(1)
. ES5, ES6, TypeScript et Dart.
• Complet. Inclut toutes les briques nécessaires à la création
d'une appli professionnelle. Routeur, requêtage HTTP, gestion
des formulaires, internationalisation…
• Modulaire. Le framework lui-même est découpé en sous-
paquets correspondant aux grandes aires fonctionnelles (core,
router, http…). Vos applis doivent être organisées en
composants et en modules (1 module = 1 ﬁchier).
• Rapide. D’après les benchmarks, Angular 2 est aujourd’hui 5
fois plus rapide que la version 1(2)
.
• Tout est composant. Composant = brique de base de toute
appli Angular 2.
13

Le pattern “Composants”
• Appli Angular = Arbre de composants.
14

Caractéristiques
des composants
• Autonomes (savent comment s’afﬁcher et interagir avec leur hôte).
• API publique clairement déﬁnie (inputs et outputs - cf. schéma).
• Peuvent faire appel à des services externes via la DI.
• Conséquences : RÉUTILISABILITÉ ACCRUE(1)
.
15

Angular 1
vs Angular 2
Principales différences entre les 2 versions
16

Vue d’ensemble (1/2)
17
Angular 1 Angular 2
Framework Plateforme
JavaScript TypeScript
Pattern Modèle-Vue-* Pattern Composant
Liaison de données principalement
BIdirectionnelle
Liaison de données principalement
UNIdirectionnelle
Scope Bye bye le scope(1)

Vue d’ensemble (2/2)
18
Angular 1 Angular 2
Injection de dépendance :
plusieurs syntaxes possibles(1)
Injection de dépendance :
syntaxe unique.
API complexe(2) API simpliﬁée(3)
Rendering normal Rendering 5 fois plus rapide
Plusieurs “bonnes pratiques”
concurrentes par la communauté
Bonnes pratiques ofﬁcielles :
https://angular.io/styleguide

7 différences NG1 vs NG2
• 1. Bootstraper Angular
• 2. Des contrôleurs aux composants
• 3. Directives structurelles
• 4. Liaison de données
• 5. Moins de directives nécessaires
• 6. Services et DI
• 7. Injection de dépendance
19

1. Bootstraper Angular
• NG1: directive ng-app (bootstrap automatique).
• NG2: bootstrap via code avec la fonction
bootstrap().
20

2. Des contrôleurs
aux composants
• NG1: angular.controller()
• NG2: Classe avec décorateur @Component.
21

3. Directives structurelles
• NG1: Beaucoup de directives structurelles. Ici, ng-repeat et ng-if.
• NG2: Seules quelques directives conservées (comme *ngFor et
*ngIf). Points importants : notation camelcase, étoile * devant nom
de la directive (signale une directive structurelle), syntaxe let
vehicle of vehicules (of et non pas in).
22
"let vehicle of vehicules">

4. Liaison de données (1/3)
• Permet de synchroniser les données entre les
composants et le DOM (aka la vue).
23

• 1. Interpolation 
 
 
 
• 2. Binding de propriété (unidirectionnel) 
 
 
 
 
 
 
24

• 3. Binding d’événement
• NG1: ng-click, ng-blur… — Directives custom Angular.
• NG2: (click), (blur) — Fini les directives custom, on utilise les
événements natifs d'un HTMLElement entre parenthèses. 
 
 
 
 
• 4. Liaison de données bidirectionnelle (champ de formulaire) 
 
 
 
 
25

5. Moins de directives
• NG1: ng-style, ng-src, ng-href…
• NG2: Plus de 40 directives NG1 ont disparu dans
NG2 !
26

6. Services et DI (1/2)
• NG1: Les données ou fonctionnalités partagées utilisent des
factories, des services, des providers...
• NG2: Un seul concept subsiste : une classe TypeScript.
27

6. Services et DI (2/2)
• NG1: Ici, angular.service(), mais pourrait être
angular.factory(), angular.provider()…
• NG2: Simple classe avec le décorateur @Injectable.
28

7. Injection de dépendance
• Dans Angular, les services contiennent toute la
logique applicative. Exemple : service qui récupère
les données du serveur via un appel HTTP.
• Lorsqu’un composant a besoin d’utiliser un service, il
utilise l’injection de dépendance (DI).
• La DI se fait en deux temps :
• 1. Déclaration
• 2. Injection 
29

7. DI - Déclaration (1/2)
• NG1: La déclaration se fait avec angular.service() et
une chaîne de caractères qui identiﬁe le service.
• NG2: Pas de chaîne de caractères, on déclare le service
dans la propriété providers du composant qui l’utilise(1)
.
30

7. DI - Injection (2/2)
• NG1: Propriété .$inject qui matche les arguments
passés à la fonction factory du contrôleur.
• NG2: On passe le service au constructor du
composant (ou plutôt, on type un param du constructor).
31

Réutilisez
vos compétences Angular 1
• Les 7 concepts qu’on vient de voir sont nouveaux.
• Mais plusieurs concepts restent les mêmes(1) :
32

Outillage Angular 2
TypeScript, Tests, Angular CLI, Augury, Composants UI
33

TypeScript
• Langage créé par Microsoft en 2012, open-source, qui transpile
vers JavaScript.
• Surensemble d’ES6 (aka ES2015). 
Tout JavaScript est donc du TypeScript valide.
• Principales caractéristiques(1)
: types, interfaces, classes,
décorateurs, modules, fonctions ﬂéchées, templates chaîne.
• Supporté par de nombreuses librairies JavaScript tierce-partie(2)
.
• Supporté par plusieurs IDE : WebStorm/IntelliJ Idea, Visual Studio
Code, Sublime Text, etc.
• Langage le plus populaire pour Angular 2. En train de s’imposer
comme le langage ofﬁciel.
34

Tests
• Angular 2 embarque un module de test avec toutes les
fonctionnalités support et les objets bouchonnés
(mocks) permettant la mise en place des tests.
• Les tests unitaires sont écrits avec Jasmine (http://
jasmine.github.io/).
• Les suites de tests sont exécutées avec Karma (http://
karma-runner.github.io/) qui permet notamment
d’exécuter les tests dans plusieurs navigateurs.
• Les tests d’intégration (end-to-end) sont exécutés avec
le framework Protractor (http://www.protractortest.org/).
35

Angular CLI
• Outil en ligne de commande (en cours de développement) pour
simpliﬁer les tâches de développement avec Angular 2.
• Fonctionnalités : génération initiale d’un projet, génération de
composants, exécution des tests, déploiement en production…
• https://github.com/angular/angular-cli
36

Angular Augury
• Extension Chrome Dev Tools pour débugger les applications Angular 2, et
aider les développeurs à comprendre le fonctionnement de leurs applications —
https://augury.angular.io/.
• Fonctionnalités : Comprendre les relations entre composants et leur hiérarchie,
obtenir des infos sur chaque composant et modiﬁer leurs attributs à la volée, etc.
• NOTE. On peut aussi débugger avec Chrome Dev Tools. Les source maps
permettent de débugger le code TypeScript alors que le navigateur exécute du
JavaScript.
37

Librairies de composants UI
• ng-bootstrap (https://github.com/ng-bootstrap/core) - Ré-écriture en Angular 2 des
composants UI de Bootstrap CSS (v4).
• Angular Material (https://material.angular.io/) - Librairie de composants UI
développés par Google spéciﬁquement pour Angular 2. Actuellement en early
alpha, mais développement assez actif.
• PrimeNG (http://www.primefaces.org/primeng/) - Collection de composants UI pour
Angular 2 par les créateurs de PrimeFaces (une librairie populaire utilisée avec le
framework JavaServer Faces).
• Wijmo 5 (http://wijmo.com/products/wijmo-5/) - Librairie payante de composants UI
pour Angular 2. Achat de licence nécessaire.
• Polymer (https://www.polymer-project.org/) - Librairie de “Web Components”
extensibles par Google. L’intégration avec Angular 2 est réputée par évidente.
• NG-Lightning (http://ng-lightning.github.io/ng-lightning/) - Librairie de composants
et directives Angular 2 écrits directement en TypeScript sur la base du framework
CSS Lightning Design System.
38

Angular 2 est une
plateforme
Modulaire + Outils + Multi-environnement
39

Une plateforme ?
• La vocation d’Angular 2 est de devenir une plateforme pour le
développement d’applications web et mobiles :
• Le noyau de la librairie a été scindé en plusieurs
composants logiques, et devient donc plus modulaire. (On
n’installe que ce dont on a besoin.)
• L’outillage a été amélioré, avec des outils comme
TypeScript, Angular CLI, Augura…
• Il devient possible d’exécuter Angular facilement dans
plusieurs environnements (sur le serveur avec Angular
Universal, sur mobile avec Angular Mobile Toolkit ou
NativeScript, etc.).
40
Framework modulaire + Outils + Multi-environnement

Angular Universal
• Objectif : Exécuter les applis 
Angular 2 directement sur le serveur.
• Pourquoi ?
• Pour améliorer les performances.
• Pour améliorer la SEO.
• Pour améliorer le partage sur les réseaux sociaux.
• Comment ?
• Pages rendues sur le serveur (Node.js ou ASP.net).
• Quelques adaptations par rapport à du code 100% client.
41
https://universal.angular.io/

Angular Mobile Toolkit
• Objectif : Créer des applis mobiles 
progressives avec Angular 2.
• Qu’est-ce que c’est ?
• Nouvelle génération d’applis mobiles créées en HTML, CSS et
JavaScript.
• Bénéﬁcient de nouvelles fonctionnalités stratégiques : chargement
instantané, support du mode hors-ligne, installables, support des
notiﬁcations.
• Apps progressives vs natives ?
• Natives : Meilleures performances, accès au APIs matérielles du
téléphone.
• Progressives : Indexables/cherchables, partageables, moins de
friction à l’installation.
42
https://mobile.angular.io/

NativeScript
• NativeScript 2.0 a été annoncé courant mai avec le support
pour Angular 2.
• NativeScript 2.0 permet de créer des applications mobiles
natives avec Angular 2. NativeScript convertit le code
Angular 2 en appels d’API iOS et Android qui sont alors
exécutés comme si vous écriviez une appli mobile native en
Objective-C ou en Java.
• L’une des grandes fonctionnalités supportée par
NativeScript est la possibilité d’utiliser des Cocoa Pods iOs
natifs et des plugins Android Gradle directement dans votre
code TypeScript.
• Plus d’infos : Fonctionnement NativeScript - Tuto {N} et NG2
43

Démarrer
avec Angular 2
Langage, Stack, Première app
44

Choix techniques à faire
• Choisir un langage :
• JavaScript (ES5 ou ES6)
• TypeScript
• Dart
• Mettre en place un environnement de développement :
• Installer Node.js.
• Choisir un Package Manager (npm, jspm…).
• Choisir un Module Loader (SystemJS, Webpack, Browserify…).
• Choisir un Transpiler (Babel, Tracer, compilateur TypeScript).
• Choisir un outil de build (Grunt, Gulp, Webpack…).
45

Stacks émergents
• TypeScript
• Package Manager : npm
• Module Loader : SystemJS
• Transpiler : Traceur / TypeScript
• Build Tool : Broccoli
• ES6
• Package Manager : jspm
• Module Loader : SystemJS
• Transpiler : Babel
• Build Tool : Gulp
46

Coder sa première app
• Quickstart ofﬁciel - https://github.com/angular/
quickstart — Explication pas-à-pas de la mise en
place de l’environnement de développement et du
codage d’une première app.
• angular2-seed - https://github.com/mgechev/
angular2-seed — Environnement de développement
totalement conﬁguré + application minimale prêts à
l’emploi.
• Hello World — Démo du code d’une appli toute
simple.
47

Migrer
de Angular 1 à Angular 2
48

Marche à suivre
• La migration se fait en deux temps :
• 1. Préparer l’appli Angular 1 en l'alignant avec Angular 2
avant de démarrer la migration.
• Suivre le style guide AngularJS 1.x (LIEN).
• Utiliser un module loader.
• Migrer vers TypeScript.
• Utiliser des “directives composants”.
• 2. Upgrade incrémental, en exécutant les deux frameworks
côte à côte dans la même application (UpgradeAdapter).
49

Exemple UpgradeAdapter (1/2)
• Downgrade - Utiliser un composant Angular 2 comme une directive
Angular 1 : 
 
 
 
 
 
 
 
 
 
• Puis la directive s’utilise normalement dans un template Angular 1 : 
 
50

Exemple UpgradeAdapter (2/2)
• Upgrade - Utiliser une directive Angular 1 comme un composant Angular 2.
• NB. Seules les “directives composant” peuvent être upgradées.
51

ng-forward
• Permet d’écrire du code Angular 1.3+ qui respecte les
conventions et les patterns d’Angular 2.
• Peut être une première étape avant d’écrire du vrai code
Angular 2. Complémentaire au chemin d’upgrade décrit
précédemment.
• Uniquement compatible avec ES6/TypeScript, pas ES5.
• Ressources :
• https://github.com/ngUpgraders/ng-forward
• http://www.codelord.net/2016/02/03/angular-2-
migration-whats-ng-forward/
52

Faut-il passer à Angular 2
aujourd’hui ?
53

Arguments CONTRE
• AVERTISSEMENT : Version la plus récente = release candidate 1.
• Fonctionnalités partielles ou manquantes :
• Routeur (version actuelle = deprecated)
• Internationalisation (ng2-translate en cours de dévt)
• Intégration avec une bibliothèque de composants d'interface (ng2-bootstrap et
Angular Material 2 sont en cours de dévt)
• Animations (manquant)
• Autres points à prendre en considération :
• Angular 1 est très mature, a un écosystème très complet (modules contrib,
librairies tierce-partie…), sera supporté officiellement tant qu’il existera un
nombre conséquent d’utilisateurs. Pourquoi pas l’utiliser ?
• Existence de ressources pour apprendre Angular 2 ? (documentation
officielle, livres, formations…)
• Existence de développeurs qualifiés sur Angular 2 ?
54

Arguments POUR
• Techniquement supérieur à Angular 1 : plus aligné avec
les standards web modernes, plus rapide.
• Certaines sociétés utilisent déjà Angular 2 en
production(1)
. Google, CapitalOne, LucidCharts, Kiva,
Weather Channel.
• Si vous êtes une société, investissement dans l’avenir : à
terme, l’innovation, les développements (et l’intérêt du
marché) vont se concentrer sur Angular 2.
• Si vous êtes développeur, bon moment pour commencer à
apprendre. La doc ofﬁcielle existe (très bonne qualité). Le
guide des bonnes pratiques aussi. Ainsi que plusieurs livres.
55

Quand Angular 2 sortira-t-il ?
• Toujours pas de date déﬁnitive.
• Se reporter à Github pour suivre l’avancement. La RC 1 est
terminée à 65% en date du 26 mai 2016 : 
 
 
 
 
 
 
• D’après Brad Green (Google) à ng-conf 2016, Angular 2
est sufﬁsamment mature pour être utilisé en production.
56

Quelques ressources 
Angular 2
• Livre recommandé : 
“Deviens un ninja avec Angular 2”. 
 
 
 
• Cours vidéos recommandés : tous les cours “angular 2” de
Pluralsight (en anglais, mais sous-titrés en anglais et souvent
en français). 
• Site AngularFrance.com (tutos et articles sur Angular 2).
57

Formation Angular 2
• Nous proposons une formation “Angular 2
Fondamentaux” : Apprenez tous les concepts essentiels
d’Angular 2 en codant 4 applications complètes en 4
jours : Un clone de Airbnb. Un clone de Gmail. Un clone
de WhatsApp. Un clone du "Like" Facebook.
• Prochaine session : environ tous les deux mois, à Paris.
• Nous sommes organisme de formation (possibilité de
faire ﬁnancer votre formation).
• Plus d’infos : http://angularfrance.com/formations/
angular2-fondamentaux
58

Introduction à Angular 2

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (8)

Similar to Introduction à Angular 2

Similar to Introduction à Angular 2 (20)

Introduction à Angular 2