Introduction à Angular 2

Copyright 2016 - Toute reproduction interditeAngularFrance.com
Introduction à
Angular 2
Présenté par Vincent Caillierez
1
Copyright 2016 - Toute reproduction interditeAngularFrance.com
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
Copyright 2016 - Toute reproduction interditeAngularFrance.com
Vincent Caillierez
• Mon profil
• 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
Copyright 2016 - Toute reproduction interditeAngularFrance.com
Recherches “Angular”
(Google Trends)
5
Copyright 2016 - Toute reproduction interditeAngularFrance.com
Utilisation d’Angular sur le web

(Builtwith.com)
6
Copyright 2016 - Toute reproduction interditeAngularFrance.com
Jobs Angular

(Indeed.com)
7
Copyright 2016 - Toute reproduction interditeAngularFrance.com
Compétence “Angular”

(LinkedIn)
8
Nombre de profils LinkedIn ayant la compétence (mai 2016)
0
75000
150000
225000
300000
Angular Backbone React Ember
Copyright 2016 - Toute reproduction interditeAngularFrance.com
Communauté Angular
9
Copyright 2016 - Toute reproduction interditeAngularFrance.com
Dates clé
• 2009. Création de la version originale du framework
par Misko Hevery.
• 2010. Misko Hevery rejoint Google, qui soutient alors
officiellement 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
ModuleCopyright 2016 - Toute reproduction interditeAngularFrance.com
Angular 2
Présentation rapide
11
Copyright 2016 - Toute reproduction interditeAngularFrance.com
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
Copyright 2016 - Toute reproduction interditeAngularFrance.com
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 fichier).
• 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
Copyright 2016 - Toute reproduction interditeAngularFrance.com
Le pattern “Composants”
• Appli Angular = Arbre de composants.
14
Copyright 2016 - Toute reproduction interditeAngularFrance.com
Caractéristiques
des composants
• Autonomes (savent comment s’afficher et interagir avec leur hôte).
• API publique clairement définie (inputs et outputs - cf. schéma).
• Peuvent faire appel à des services externes via la DI.
• Conséquences : RÉUTILISABILITÉ ACCRUE(1)
.
15
ModuleCopyright 2016 - Toute reproduction interditeAngularFrance.com
Angular 1
vs Angular 2
Principales différences entre les 2 versions
16
Copyright 2016 - Toute reproduction interditeAngularFrance.com
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)
Copyright 2016 - Toute reproduction interditeAngularFrance.com
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 simplifiée(3)
Rendering normal Rendering 5 fois plus rapide
Plusieurs “bonnes pratiques”
concurrentes par la communauté
Bonnes pratiques officielles :
https://angular.io/styleguide
Copyright 2016 - Toute reproduction interditeAngularFrance.com
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
Copyright 2016 - Toute reproduction interditeAngularFrance.com
1. Bootstraper Angular
• NG1: directive ng-app (bootstrap automatique).
• NG2: bootstrap via code avec la fonction
bootstrap().
20
Copyright 2016 - Toute reproduction interditeAngularFrance.com
2. Des contrôleurs
aux composants
• NG1: angular.controller()
• NG2: Classe avec décorateur @Component.
21
Copyright 2016 - Toute reproduction interditeAngularFrance.com
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">
Copyright 2016 - Toute reproduction interditeAngularFrance.com
4. Liaison de données (1/3)
• Permet de synchroniser les données entre les
composants et le DOM (aka la vue).
23
Copyright 2016 - Toute reproduction interditeAngularFrance.com
4. Liaison de données (2/3)
• 1. Interpolation







• 2. Binding de propriété (unidirectionnel)













24
Copyright 2016 - Toute reproduction interditeAngularFrance.com
4. Liaison de données (3/3)
• 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
Copyright 2016 - Toute reproduction interditeAngularFrance.com
5. Moins de directives
• NG1: ng-style, ng-src, ng-href…
• NG2: Plus de 40 directives NG1 ont disparu dans
NG2 !
26
Copyright 2016 - Toute reproduction interditeAngularFrance.com
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
Copyright 2016 - Toute reproduction interditeAngularFrance.com
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
Copyright 2016 - Toute reproduction interditeAngularFrance.com
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
Copyright 2016 - Toute reproduction interditeAngularFrance.com
7. DI - Déclaration (1/2)
• NG1: La déclaration se fait avec angular.service() et
une chaîne de caractères qui identifie 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
Copyright 2016 - Toute reproduction interditeAngularFrance.com
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
Copyright 2016 - Toute reproduction interditeAngularFrance.com
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
ModuleCopyright 2016 - Toute reproduction interditeAngularFrance.com
Outillage Angular 2
TypeScript, Tests, Angular CLI, Augury, Composants UI
33
Copyright 2016 - Toute reproduction interditeAngularFrance.com
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 flé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 officiel.
34
Copyright 2016 - Toute reproduction interditeAngularFrance.com
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
Copyright 2016 - Toute reproduction interditeAngularFrance.com
Angular CLI
• Outil en ligne de commande (en cours de développement) pour
simplifier 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
Copyright 2016 - Toute reproduction interditeAngularFrance.com
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 modifier 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
Copyright 2016 - Toute reproduction interditeAngularFrance.com
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écifiquement 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
ModuleCopyright 2016 - Toute reproduction interditeAngularFrance.com
Angular 2 est une
plateforme
Modulaire + Outils + Multi-environnement
39
Copyright 2016 - Toute reproduction interditeAngularFrance.com
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
Copyright 2016 - Toute reproduction interditeAngularFrance.com
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/
Copyright 2016 - Toute reproduction interditeAngularFrance.com
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éficient de nouvelles fonctionnalités stratégiques : chargement
instantané, support du mode hors-ligne, installables, support des
notifications.
• 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/
Copyright 2016 - Toute reproduction interditeAngularFrance.com
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
ModuleCopyright 2016 - Toute reproduction interditeAngularFrance.com
Démarrer
avec Angular 2
Langage, Stack, Première app
44
Copyright 2016 - Toute reproduction interditeAngularFrance.com
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
Copyright 2016 - Toute reproduction interditeAngularFrance.com
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
Copyright 2016 - Toute reproduction interditeAngularFrance.com
Coder sa première app
• Quickstart officiel - 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 configuré + application minimale prêts à
l’emploi.
• Hello World — Démo du code d’une appli toute
simple.
47
ModuleCopyright 2016 - Toute reproduction interditeAngularFrance.com
Migrer
de Angular 1 à Angular 2
48
Copyright 2016 - Toute reproduction interditeAngularFrance.com
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
Copyright 2016 - Toute reproduction interditeAngularFrance.com
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
Copyright 2016 - Toute reproduction interditeAngularFrance.com
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
Copyright 2016 - Toute reproduction interditeAngularFrance.com
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
ModuleCopyright 2016 - Toute reproduction interditeAngularFrance.com
Faut-il passer à Angular 2
aujourd’hui ?
53
Copyright 2016 - Toute reproduction interditeAngularFrance.com
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
Copyright 2016 - Toute reproduction interditeAngularFrance.com
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 officielle existe (très bonne qualité). Le
guide des bonnes pratiques aussi. Ainsi que plusieurs livres.
55
Copyright 2016 - Toute reproduction interditeAngularFrance.com
Quand Angular 2 sortira-t-il ?
• Toujours pas de date définitive.
• 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 suffisamment mature pour être utilisé en production.
56
Copyright 2016 - Toute reproduction interditeAngularFrance.com
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
Copyright 2016 - Toute reproduction interditeAngularFrance.com
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 financer votre formation).
• Plus d’infos : http://angularfrance.com/formations/
angular2-fondamentaux
58
Copyright 2016 - Toute reproduction interditeAngularFrance.com 59
Merci !
1 sur 59

Recommandé

Introduction à Angular par
Introduction à AngularIntroduction à Angular
Introduction à AngularJean-Baptiste Vigneron
3.2K vues15 diapositives
Angular Framework présentation PPT LIGHT par
Angular Framework présentation PPT LIGHTAngular Framework présentation PPT LIGHT
Angular Framework présentation PPT LIGHTtayebbousfiha1
1.3K vues28 diapositives
Introduction à spring boot par
Introduction à spring bootIntroduction à spring boot
Introduction à spring bootAntoine Rey
17.8K vues19 diapositives
De 0 à Angular en 1h30! (french) par
De 0 à Angular en 1h30! (french)De 0 à Angular en 1h30! (french)
De 0 à Angular en 1h30! (french)Laurent Duveau
1.6K vues32 diapositives
Angular 2 par
Angular 2Angular 2
Angular 2Zoubir REMILA
327 vues32 diapositives
Jenkins par
JenkinsJenkins
JenkinsLhouceine OUHAMZA
360 vues50 diapositives

Contenu connexe

Tendances

Présentation Angular 2 par
Présentation Angular 2 Présentation Angular 2
Présentation Angular 2 Cynapsys It Hotspot
2.1K vues11 diapositives
Angular Avancé par
Angular AvancéAngular Avancé
Angular AvancéNizar MAATOUG -ISET Sidi Bouzid
801 vues90 diapositives
Workshop spring session 2 - La persistance au sein des applications Java par
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
10.4K vues22 diapositives
Presentation of framework Angular par
Presentation of framework AngularPresentation of framework Angular
Presentation of framework AngularLhouceine OUHAMZA
249 vues52 diapositives
Support cours angular par
Support cours angularSupport cours angular
Support cours angularNizar MAATOUG -ISET Sidi Bouzid
2K vues162 diapositives
Spring mvc par
Spring mvcSpring mvc
Spring mvcLhouceine OUHAMZA
254 vues15 diapositives

Tendances(20)

Workshop spring session 2 - La persistance au sein des applications Java par Antoine Rey
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
Antoine Rey10.4K vues
Ionic, AngularJS,Cordova,NodeJS,Sass par marwa baich
Ionic, AngularJS,Cordova,NodeJS,SassIonic, AngularJS,Cordova,NodeJS,Sass
Ionic, AngularJS,Cordova,NodeJS,Sass
marwa baich3.6K vues
Cours développement côté serveur par Houda TOUKABRI
Cours développement côté serveurCours développement côté serveur
Cours développement côté serveur
Houda TOUKABRI1.2K vues
Technologies sur angular.pptx par IdrissaDembl
Technologies sur angular.pptxTechnologies sur angular.pptx
Technologies sur angular.pptx
IdrissaDembl119 vues

En vedette

Angular 2 - Core Concepts par
Angular 2 - Core ConceptsAngular 2 - Core Concepts
Angular 2 - Core ConceptsFabio Biondi
10.3K vues46 diapositives
Introduction à Angular 2 par
Introduction à Angular 2Introduction à Angular 2
Introduction à Angular 2Laurent Duveau
3.5K vues40 diapositives
ReactiveX par
ReactiveXReactiveX
ReactiveXFlorent Le Gall
1.7K vues73 diapositives
RxJs - Reactive Extensions for JavaScript par
RxJs - Reactive Extensions for JavaScriptRxJs - Reactive Extensions for JavaScript
RxJs - Reactive Extensions for JavaScriptLeTesteur
1.1K vues8 diapositives
Angular 2 overview par
Angular 2 overviewAngular 2 overview
Angular 2 overviewJesse Warden
3.8K vues77 diapositives
Building Universal Applications with Angular 2 par
Building Universal Applications with Angular 2Building Universal Applications with Angular 2
Building Universal Applications with Angular 2Minko Gechev
8.3K vues119 diapositives

En vedette(8)

Angular 2 - Core Concepts par Fabio Biondi
Angular 2 - Core ConceptsAngular 2 - Core Concepts
Angular 2 - Core Concepts
Fabio Biondi10.3K vues
RxJs - Reactive Extensions for JavaScript par LeTesteur
RxJs - Reactive Extensions for JavaScriptRxJs - Reactive Extensions for JavaScript
RxJs - Reactive Extensions for JavaScript
LeTesteur1.1K vues
Building Universal Applications with Angular 2 par Minko Gechev
Building Universal Applications with Angular 2Building Universal Applications with Angular 2
Building Universal Applications with Angular 2
Minko Gechev8.3K vues
Getting Started with Angular 2 par FITC
Getting Started with Angular 2Getting Started with Angular 2
Getting Started with Angular 2
FITC12.7K vues
Introduction to Angular 2 par Knoldus Inc.
Introduction to Angular 2Introduction to Angular 2
Introduction to Angular 2
Knoldus Inc.22.4K vues

Similaire à Introduction à Angular 2

Angular.pdf par
Angular.pdfAngular.pdf
Angular.pdfJaouad Assabbour
219 vues306 diapositives
Etude rapide sur les frameworks Front-end (AngularJS vs *JS) par
Etude rapide sur les frameworks Front-end (AngularJS vs *JS)Etude rapide sur les frameworks Front-end (AngularJS vs *JS)
Etude rapide sur les frameworks Front-end (AngularJS vs *JS)Bilel ZEGHAD
449 vues10 diapositives
ngconf 2016 (french) par
ngconf 2016 (french)ngconf 2016 (french)
ngconf 2016 (french)Laurent Duveau
570 vues23 diapositives
Présentation Rex GWT 2.0 par
Présentation Rex GWT 2.0Présentation Rex GWT 2.0
Présentation Rex GWT 2.0Ippon
987 vues25 diapositives
Retour d'experience projet AngularJS par
Retour d'experience projet AngularJSRetour d'experience projet AngularJS
Retour d'experience projet AngularJS∞ François CHERPION ∞
1.8K vues30 diapositives
Intro aurelia js-typescript par
Intro aurelia js-typescriptIntro aurelia js-typescript
Intro aurelia js-typescriptPhilippe Beroucrry
108 vues20 diapositives

Similaire à Introduction à Angular 2(20)

Etude rapide sur les frameworks Front-end (AngularJS vs *JS) par Bilel ZEGHAD
Etude rapide sur les frameworks Front-end (AngularJS vs *JS)Etude rapide sur les frameworks Front-end (AngularJS vs *JS)
Etude rapide sur les frameworks Front-end (AngularJS vs *JS)
Bilel ZEGHAD449 vues
Présentation Rex GWT 2.0 par Ippon
Présentation Rex GWT 2.0Présentation Rex GWT 2.0
Présentation Rex GWT 2.0
Ippon987 vues
Angular 6, CLI 6, Material 6 (french) par Laurent Duveau
Angular 6, CLI 6, Material 6 (french)Angular 6, CLI 6, Material 6 (french)
Angular 6, CLI 6, Material 6 (french)
Laurent Duveau2K vues
Les Nouveaux Standards et leur implémentation dans les navigateurs modernes par Tristan Nitot
Les Nouveaux Standards et leur implémentation dans les navigateurs modernesLes Nouveaux Standards et leur implémentation dans les navigateurs modernes
Les Nouveaux Standards et leur implémentation dans les navigateurs modernes
Tristan Nitot1.3K vues
Presentation du socle technique Java open source Scub Foundation par Stéphane Traumat
Presentation du socle technique Java open source Scub FoundationPresentation du socle technique Java open source Scub Foundation
Presentation du socle technique Java open source Scub Foundation
Stéphane Traumat3.5K vues
[Agile Laval 2016] La relecture de code : avant tout des pratiques par Eric SIBER
[Agile Laval 2016] La relecture de code : avant tout des pratiques[Agile Laval 2016] La relecture de code : avant tout des pratiques
[Agile Laval 2016] La relecture de code : avant tout des pratiques
Eric SIBER586 vues
ADT SOFAVR jesnault 01-10-12 final presentation 2 par Jérôme Esnault
ADT SOFAVR jesnault 01-10-12 final presentation 2ADT SOFAVR jesnault 01-10-12 final presentation 2
ADT SOFAVR jesnault 01-10-12 final presentation 2
Jérôme Esnault529 vues

Introduction à Angular 2

  • 1. Copyright 2016 - Toute reproduction interditeAngularFrance.com Introduction à Angular 2 Présenté par Vincent Caillierez 1
  • 2. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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
  • 3. Copyright 2016 - Toute reproduction interditeAngularFrance.com Vincent Caillierez • Mon profil • 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
  • 4. ModuleCopyright 2016 - Toute reproduction interditeAngularFrance.com Quelques chiffres sur Angular 4
  • 5. Copyright 2016 - Toute reproduction interditeAngularFrance.com Recherches “Angular” (Google Trends) 5
  • 6. Copyright 2016 - Toute reproduction interditeAngularFrance.com Utilisation d’Angular sur le web
 (Builtwith.com) 6
  • 7. Copyright 2016 - Toute reproduction interditeAngularFrance.com Jobs Angular
 (Indeed.com) 7
  • 8. Copyright 2016 - Toute reproduction interditeAngularFrance.com Compétence “Angular”
 (LinkedIn) 8 Nombre de profils LinkedIn ayant la compétence (mai 2016) 0 75000 150000 225000 300000 Angular Backbone React Ember
  • 9. Copyright 2016 - Toute reproduction interditeAngularFrance.com Communauté Angular 9
  • 10. Copyright 2016 - Toute reproduction interditeAngularFrance.com Dates clé • 2009. Création de la version originale du framework par Misko Hevery. • 2010. Misko Hevery rejoint Google, qui soutient alors officiellement 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
  • 11. ModuleCopyright 2016 - Toute reproduction interditeAngularFrance.com Angular 2 Présentation rapide 11
  • 12. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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
  • 13. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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 fichier). • 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
  • 14. Copyright 2016 - Toute reproduction interditeAngularFrance.com Le pattern “Composants” • Appli Angular = Arbre de composants. 14
  • 15. Copyright 2016 - Toute reproduction interditeAngularFrance.com Caractéristiques des composants • Autonomes (savent comment s’afficher et interagir avec leur hôte). • API publique clairement définie (inputs et outputs - cf. schéma). • Peuvent faire appel à des services externes via la DI. • Conséquences : RÉUTILISABILITÉ ACCRUE(1) . 15
  • 16. ModuleCopyright 2016 - Toute reproduction interditeAngularFrance.com Angular 1 vs Angular 2 Principales différences entre les 2 versions 16
  • 17. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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)
  • 18. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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 simplifiée(3) Rendering normal Rendering 5 fois plus rapide Plusieurs “bonnes pratiques” concurrentes par la communauté Bonnes pratiques officielles : https://angular.io/styleguide
  • 19. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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
  • 20. Copyright 2016 - Toute reproduction interditeAngularFrance.com 1. Bootstraper Angular • NG1: directive ng-app (bootstrap automatique). • NG2: bootstrap via code avec la fonction bootstrap(). 20
  • 21. Copyright 2016 - Toute reproduction interditeAngularFrance.com 2. Des contrôleurs aux composants • NG1: angular.controller() • NG2: Classe avec décorateur @Component. 21
  • 22. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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">
  • 23. Copyright 2016 - Toute reproduction interditeAngularFrance.com 4. Liaison de données (1/3) • Permet de synchroniser les données entre les composants et le DOM (aka la vue). 23
  • 24. Copyright 2016 - Toute reproduction interditeAngularFrance.com 4. Liaison de données (2/3) • 1. Interpolation
 
 
 
 • 2. Binding de propriété (unidirectionnel)
 
 
 
 
 
 
 24
  • 25. Copyright 2016 - Toute reproduction interditeAngularFrance.com 4. Liaison de données (3/3) • 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
  • 26. Copyright 2016 - Toute reproduction interditeAngularFrance.com 5. Moins de directives • NG1: ng-style, ng-src, ng-href… • NG2: Plus de 40 directives NG1 ont disparu dans NG2 ! 26
  • 27. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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
  • 28. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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
  • 29. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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
  • 30. Copyright 2016 - Toute reproduction interditeAngularFrance.com 7. DI - Déclaration (1/2) • NG1: La déclaration se fait avec angular.service() et une chaîne de caractères qui identifie 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
  • 31. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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
  • 32. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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
  • 33. ModuleCopyright 2016 - Toute reproduction interditeAngularFrance.com Outillage Angular 2 TypeScript, Tests, Angular CLI, Augury, Composants UI 33
  • 34. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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 flé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 officiel. 34
  • 35. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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
  • 36. Copyright 2016 - Toute reproduction interditeAngularFrance.com Angular CLI • Outil en ligne de commande (en cours de développement) pour simplifier 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
  • 37. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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 modifier 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
  • 38. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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écifiquement 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
  • 39. ModuleCopyright 2016 - Toute reproduction interditeAngularFrance.com Angular 2 est une plateforme Modulaire + Outils + Multi-environnement 39
  • 40. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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
  • 41. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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/
  • 42. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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éficient de nouvelles fonctionnalités stratégiques : chargement instantané, support du mode hors-ligne, installables, support des notifications. • 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/
  • 43. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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
  • 44. ModuleCopyright 2016 - Toute reproduction interditeAngularFrance.com Démarrer avec Angular 2 Langage, Stack, Première app 44
  • 45. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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
  • 46. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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
  • 47. Copyright 2016 - Toute reproduction interditeAngularFrance.com Coder sa première app • Quickstart officiel - 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 configuré + application minimale prêts à l’emploi. • Hello World — Démo du code d’une appli toute simple. 47
  • 48. ModuleCopyright 2016 - Toute reproduction interditeAngularFrance.com Migrer de Angular 1 à Angular 2 48
  • 49. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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
  • 50. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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
  • 51. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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
  • 52. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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
  • 53. ModuleCopyright 2016 - Toute reproduction interditeAngularFrance.com Faut-il passer à Angular 2 aujourd’hui ? 53
  • 54. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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
  • 55. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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 officielle existe (très bonne qualité). Le guide des bonnes pratiques aussi. Ainsi que plusieurs livres. 55
  • 56. Copyright 2016 - Toute reproduction interditeAngularFrance.com Quand Angular 2 sortira-t-il ? • Toujours pas de date définitive. • 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 suffisamment mature pour être utilisé en production. 56
  • 57. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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
  • 58. Copyright 2016 - Toute reproduction interditeAngularFrance.com 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 financer votre formation). • Plus d’infos : http://angularfrance.com/formations/ angular2-fondamentaux 58
  • 59. Copyright 2016 - Toute reproduction interditeAngularFrance.com 59 Merci !