SlideShare une entreprise Scribd logo
Typescript / Angular 2
Présentation
Philippe DIDIERGEORGES
@DePhiless
Développeur
Formateur
Sommaire
Typescript : Présentation
Angular 2 : Toutes les nouveautés
Du code
Typescript
Typescript – qu’est-ce que c’est?
Sur-ensemble de JavaScript
Typage fort
Transpilé
Typescript == JavaScript
Démo
TYPESCRIPT
Les forces de Typescript
Intégration forte aux IDE
◦ En natif dans Visual Studio, Code et Webstorm
◦ Plugins IntelliJ, Atom, Sublime et Eclipse
Compilation vers ES3/ES5/ES6
Les forces de Typescript
Fichiers de définition de type .d.ts
◦ +1500 libs & frameworks sur DefinitelyTyped
◦ Outil npm typings
tsconfig.json
Angular ❤ Typescript
Collaboration entre Microsoft et Google
Support avancé d’ES2015/2016
Classes et Modules
Decorateurs ES7
Facilités de développement
Angular 2
Angular 2
Pattern MVW -> Model, View, Whatever
Mise en œuvre des
Web Components
Web Components
3 API HTML5
Custom Elements
Shadow DOM
HTML Imports
La notion de composant d'Angular2
Entité indépendante permettant d’implanter de la logique et du dynamisme dans les pages Web
Les templates
HTML rattaché à un composant Angular
Utilisation de la directive @View
◦ templateUrl pour un fichier HTML
◦ template pour de l’HTML direct
Directives Angular pour la communication entre le template et le
composant
myTemplate.htmlmyTemplate.ts
Les différentes annotations
@Directive : attribut HTML
Les différentes annotations
@Component : élément HTML
Les différentes annotations
@Injectable : indique que le composant est un service utilisable via
Injection de dépendance dans d’autres composants
@RouteConfig : permet de configurer les routes du composant vers
d’autres composants
Démo
ANNOTATIONS ET COMPOSANTS
Angular-cli
> npm i –g angular-cli
Scaffolfing : ng new, ng g [component | directive | pipe | service | route]
Build : ng build / ng serve
Tests : ng test / ng e2e
Deploy: ng github-pages
Lint / Format code
Angular-cli
> npm i –g angular-cli
Système de plugins
Auto-complétion des commandes
Démo
ANGULAR-CLI
La configuration des routes
La navigation se fait de composant en composant
Chaque composant définit ses propres routes
Démo
CONFIGURATION DES ROUTES
Bindings
One-way:
◦ {{value}}
◦ [value] = "expression" ou bind-value = "expression"
Events:
◦ (click) = "onClickFunction()"
Two-way:
◦ [(value)] = "expression"
Attributs standards
Attributs avec binding:
◦ <button [attr.aria-label] = "'help'">help</button>
Attributs sans binding:
◦ <button aria-label = "help">help</button>
Directives
Classes:
◦ <input [class.warning] = "!isValid"></input>
◦ [ngClass] => multiple
Styles:
◦ <button [style.color] = "isValid ? green : red">
◦ [ngStyle] => multiple
Directives *
*ngIf
*ngFor
ngSwitch *when
Démo
DIRECTIVES
Les autres grosses nouveautés
I18n Intégré
Universal: Server Rendering
Offline
Web Workers
Animation Builder
Angular 2 Release Candidate
Conseillé sur tous vos nouveaux projets
Surveiller les projets « Satellites »:
=> angular-cli
=> angular-material
NG-Conf: 4-7 may 2016
Questions?
Merci 
TWITTER: @DEPHILESS

Contenu connexe

Tendances

01 - [ASP.NET Core] Plénière
01 - [ASP.NET Core] Plénière 01 - [ASP.NET Core] Plénière
01 - [ASP.NET Core] Plénière
Cellenza
 
Angular + JHipster @ Paris JUG
Angular + JHipster @ Paris JUGAngular + JHipster @ Paris JUG
Angular + JHipster @ Paris JUG
William Marques
 
Symfony et Sonata Project chez Canal+
Symfony et Sonata Project chez Canal+ Symfony et Sonata Project chez Canal+
Symfony et Sonata Project chez Canal+
ekino
 
5- [ASP.NET Core] Devops : VSTS, Git, Azure, Docker, Linux
5- [ASP.NET Core] Devops : VSTS, Git, Azure, Docker, Linux5- [ASP.NET Core] Devops : VSTS, Git, Azure, Docker, Linux
5- [ASP.NET Core] Devops : VSTS, Git, Azure, Docker, Linux
Yasmine Amrani
 
XebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic Ladeu
XebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic LadeuXebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic Ladeu
XebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic Ladeu
Publicis Sapient Engineering
 
Industrialisation PHP - Canal+
Industrialisation PHP - Canal+Industrialisation PHP - Canal+
Industrialisation PHP - Canal+
ekino
 
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
Microsoft
 
Soirée 3T Soat - Asp.net MVC
Soirée 3T Soat - Asp.net MVCSoirée 3T Soat - Asp.net MVC
Soirée 3T Soat - Asp.net MVCSOAT
 
Angular Framework présentation PPT LIGHT
Angular Framework présentation PPT LIGHTAngular Framework présentation PPT LIGHT
Angular Framework présentation PPT LIGHT
tayebbousfiha1
 
Prise en main de Jhipster
Prise en main de JhipsterPrise en main de Jhipster
Prise en main de Jhipster
Kokou Gaglo
 
MS365 Developer Bootcamp 2020 à Montréal - Trucs & Astuces SharePoint Framework
MS365 Developer Bootcamp 2020 à Montréal - Trucs & Astuces SharePoint FrameworkMS365 Developer Bootcamp 2020 à Montréal - Trucs & Astuces SharePoint Framework
MS365 Developer Bootcamp 2020 à Montréal - Trucs & Astuces SharePoint Framework
Laurent Sittler
 
Google : Prise en charge de l'Ajax et de l'Angular JS
Google : Prise en charge de l'Ajax et de l'Angular JSGoogle : Prise en charge de l'Ajax et de l'Angular JS
Google : Prise en charge de l'Ajax et de l'Angular JS
Peak Ace
 
ASP.NET from Zero to Hero
ASP.NET from Zero to HeroASP.NET from Zero to Hero
ASP.NET from Zero to Hero
Cellenza
 
Maven c'est bien, SBT c'est mieux
Maven c'est bien, SBT c'est mieuxMaven c'est bien, SBT c'est mieux
Maven c'est bien, SBT c'est mieux
Fabrice Sznajderman
 
Angular 2
Angular 2Angular 2
Angular 2
Zoubir REMILA
 
03 - [ASP.NET Core] Services RESTful et SPA
03 - [ASP.NET Core] Services RESTful et SPA 03 - [ASP.NET Core] Services RESTful et SPA
03 - [ASP.NET Core] Services RESTful et SPA
Cellenza
 
Intégration continue et déploiement continue avec Jenkins
Intégration continue et déploiement continue avec JenkinsIntégration continue et déploiement continue avec Jenkins
Intégration continue et déploiement continue avec Jenkins
Kokou Gaglo
 
Java - Lombok
Java - LombokJava - Lombok
Java - Lombok
Kokou Gaglo
 

Tendances (19)

01 - [ASP.NET Core] Plénière
01 - [ASP.NET Core] Plénière 01 - [ASP.NET Core] Plénière
01 - [ASP.NET Core] Plénière
 
Angular + JHipster @ Paris JUG
Angular + JHipster @ Paris JUGAngular + JHipster @ Paris JUG
Angular + JHipster @ Paris JUG
 
Symfony et Sonata Project chez Canal+
Symfony et Sonata Project chez Canal+ Symfony et Sonata Project chez Canal+
Symfony et Sonata Project chez Canal+
 
5- [ASP.NET Core] Devops : VSTS, Git, Azure, Docker, Linux
5- [ASP.NET Core] Devops : VSTS, Git, Azure, Docker, Linux5- [ASP.NET Core] Devops : VSTS, Git, Azure, Docker, Linux
5- [ASP.NET Core] Devops : VSTS, Git, Azure, Docker, Linux
 
XebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic Ladeu
XebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic LadeuXebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic Ladeu
XebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic Ladeu
 
Industrialisation PHP - Canal+
Industrialisation PHP - Canal+Industrialisation PHP - Canal+
Industrialisation PHP - Canal+
 
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
 
Soirée 3T Soat - Asp.net MVC
Soirée 3T Soat - Asp.net MVCSoirée 3T Soat - Asp.net MVC
Soirée 3T Soat - Asp.net MVC
 
Angular Framework présentation PPT LIGHT
Angular Framework présentation PPT LIGHTAngular Framework présentation PPT LIGHT
Angular Framework présentation PPT LIGHT
 
Prise en main de Jhipster
Prise en main de JhipsterPrise en main de Jhipster
Prise en main de Jhipster
 
Introduction à Vaadin
Introduction à VaadinIntroduction à Vaadin
Introduction à Vaadin
 
MS365 Developer Bootcamp 2020 à Montréal - Trucs & Astuces SharePoint Framework
MS365 Developer Bootcamp 2020 à Montréal - Trucs & Astuces SharePoint FrameworkMS365 Developer Bootcamp 2020 à Montréal - Trucs & Astuces SharePoint Framework
MS365 Developer Bootcamp 2020 à Montréal - Trucs & Astuces SharePoint Framework
 
Google : Prise en charge de l'Ajax et de l'Angular JS
Google : Prise en charge de l'Ajax et de l'Angular JSGoogle : Prise en charge de l'Ajax et de l'Angular JS
Google : Prise en charge de l'Ajax et de l'Angular JS
 
ASP.NET from Zero to Hero
ASP.NET from Zero to HeroASP.NET from Zero to Hero
ASP.NET from Zero to Hero
 
Maven c'est bien, SBT c'est mieux
Maven c'est bien, SBT c'est mieuxMaven c'est bien, SBT c'est mieux
Maven c'est bien, SBT c'est mieux
 
Angular 2
Angular 2Angular 2
Angular 2
 
03 - [ASP.NET Core] Services RESTful et SPA
03 - [ASP.NET Core] Services RESTful et SPA 03 - [ASP.NET Core] Services RESTful et SPA
03 - [ASP.NET Core] Services RESTful et SPA
 
Intégration continue et déploiement continue avec Jenkins
Intégration continue et déploiement continue avec JenkinsIntégration continue et déploiement continue avec Jenkins
Intégration continue et déploiement continue avec Jenkins
 
Java - Lombok
Java - LombokJava - Lombok
Java - Lombok
 

En vedette

Symposium flexbox
Symposium flexboxSymposium flexbox
Symposium flexbox
Versusmind
 
Les Promises en Javascript
Les Promises en JavascriptLes Promises en Javascript
Les Promises en Javascript
Benoit Zohar
 
Symposium uxdesign
Symposium uxdesignSymposium uxdesign
Symposium uxdesign
Versusmind
 
New World of Angular (v2+)
New World of Angular (v2+)New World of Angular (v2+)
New World of Angular (v2+)
Rahat Khanna a.k.a mAppMechanic
 
Using TypeScript with Angular
Using TypeScript with AngularUsing TypeScript with Angular
Using TypeScript with Angular
Jamal Sinclair O'Garro
 
How to Upgrade Angular 1 to Angular 2 - Piece by Piece
How to Upgrade Angular 1 to Angular 2 - Piece by Piece How to Upgrade Angular 1 to Angular 2 - Piece by Piece
How to Upgrade Angular 1 to Angular 2 - Piece by Piece
Christopher T. Walrath
 
Data models in Angular 1 & 2
Data models in Angular 1 & 2Data models in Angular 1 & 2
Data models in Angular 1 & 2
Adam Klein
 
Migrating an Application from Angular 1 to Angular 2
Migrating an Application from Angular 1 to Angular 2 Migrating an Application from Angular 1 to Angular 2
Migrating an Application from Angular 1 to Angular 2
Ross Dederer
 
Building Angular 2.0 applications with TypeScript
Building Angular 2.0 applications with TypeScriptBuilding Angular 2.0 applications with TypeScript
Building Angular 2.0 applications with TypeScript
MSDEVMTL
 
Angular 2 vs Angular 1
Angular 2 vs Angular 1Angular 2 vs Angular 1
Angular 2 vs Angular 1
GDG Odessa
 
NodeJS for Beginner
NodeJS for BeginnerNodeJS for Beginner
NodeJS for Beginner
Apaichon Punopas
 
Introduction to Angular 2
Introduction to Angular 2Introduction to Angular 2
Introduction to Angular 2
Knoldus Inc.
 
TypeScript: coding JavaScript without the pain
TypeScript: coding JavaScript without the painTypeScript: coding JavaScript without the pain
TypeScript: coding JavaScript without the pain
Sander Mak (@Sander_Mak)
 
Formation Classes prépas Lycée Sainte-Geneviève, Versailles
Formation Classes prépas Lycée Sainte-Geneviève, VersaillesFormation Classes prépas Lycée Sainte-Geneviève, Versailles
Formation Classes prépas Lycée Sainte-Geneviève, VersaillesMagalie Le Gall
 
Angular 2 KTS
Angular 2 KTSAngular 2 KTS
Angular 2 KTS
John Vall
 

En vedette (15)

Symposium flexbox
Symposium flexboxSymposium flexbox
Symposium flexbox
 
Les Promises en Javascript
Les Promises en JavascriptLes Promises en Javascript
Les Promises en Javascript
 
Symposium uxdesign
Symposium uxdesignSymposium uxdesign
Symposium uxdesign
 
New World of Angular (v2+)
New World of Angular (v2+)New World of Angular (v2+)
New World of Angular (v2+)
 
Using TypeScript with Angular
Using TypeScript with AngularUsing TypeScript with Angular
Using TypeScript with Angular
 
How to Upgrade Angular 1 to Angular 2 - Piece by Piece
How to Upgrade Angular 1 to Angular 2 - Piece by Piece How to Upgrade Angular 1 to Angular 2 - Piece by Piece
How to Upgrade Angular 1 to Angular 2 - Piece by Piece
 
Data models in Angular 1 & 2
Data models in Angular 1 & 2Data models in Angular 1 & 2
Data models in Angular 1 & 2
 
Migrating an Application from Angular 1 to Angular 2
Migrating an Application from Angular 1 to Angular 2 Migrating an Application from Angular 1 to Angular 2
Migrating an Application from Angular 1 to Angular 2
 
Building Angular 2.0 applications with TypeScript
Building Angular 2.0 applications with TypeScriptBuilding Angular 2.0 applications with TypeScript
Building Angular 2.0 applications with TypeScript
 
Angular 2 vs Angular 1
Angular 2 vs Angular 1Angular 2 vs Angular 1
Angular 2 vs Angular 1
 
NodeJS for Beginner
NodeJS for BeginnerNodeJS for Beginner
NodeJS for Beginner
 
Introduction to Angular 2
Introduction to Angular 2Introduction to Angular 2
Introduction to Angular 2
 
TypeScript: coding JavaScript without the pain
TypeScript: coding JavaScript without the painTypeScript: coding JavaScript without the pain
TypeScript: coding JavaScript without the pain
 
Formation Classes prépas Lycée Sainte-Geneviève, Versailles
Formation Classes prépas Lycée Sainte-Geneviève, VersaillesFormation Classes prépas Lycée Sainte-Geneviève, Versailles
Formation Classes prépas Lycée Sainte-Geneviève, Versailles
 
Angular 2 KTS
Angular 2 KTSAngular 2 KTS
Angular 2 KTS
 

Similaire à Angular2 / Typescript symposium Versusmind

Angular 11
Angular 11Angular 11
Angular 11
PapaDjadjigueye
 
Angular développer des applications .pdf
Angular développer des applications .pdfAngular développer des applications .pdf
Angular développer des applications .pdf
imenhamada17
 
Cours 1 introduction
Cours 1 introductionCours 1 introduction
Cours 1 introduction
Aymen Sellaouti
 
AngularJS
AngularJSAngularJS
AngularJS
Ouadie LAHDIOUI
 
Comment créer une application Angular performante ?
Comment créer une application Angular performante ?Comment créer une application Angular performante ?
Comment créer une application Angular performante ?
Sébastien Ollivier
 
Technologies sur angular.pptx
Technologies sur angular.pptxTechnologies sur angular.pptx
Technologies sur angular.pptx
IdrissaDembl
 
Support cours angular
Support cours angularSupport cours angular
Support cours angular
Nizar MAATOUG -ISET Sidi Bouzid
 
Alphorm.com Formation Angular - Les fondamentaux
Alphorm.com Formation Angular - Les fondamentauxAlphorm.com Formation Angular - Les fondamentaux
Alphorm.com Formation Angular - Les fondamentaux
Alphorm
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
Jean-Baptiste Vigneron
 
Comment réussir son projet en Angular 1.5 ?
Comment réussir son projet en Angular 1.5 ?Comment réussir son projet en Angular 1.5 ?
Comment réussir son projet en Angular 1.5 ?
Maxime Bernard
 
Chaine de production pipeline
Chaine de production   pipelineChaine de production   pipeline
Chaine de production pipeline
Nicolas wallerand
 
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
inesrdissi60
 
Angular.pdf
Angular.pdfAngular.pdf
Angular.pdf
Jaouad Assabbour
 
Expérience pratique de développement Azure
Expérience pratique de développement AzureExpérience pratique de développement Azure
Expérience pratique de développement Azure
Levio
 
Comparatif des frameworks js mv
Comparatif des frameworks js mvComparatif des frameworks js mv
Comparatif des frameworks js mv
Mael Monnier
 
Angular : Un aperçu du framework de développement d’applications Web
Angular : Un aperçu du framework de développement d’applications WebAngular : Un aperçu du framework de développement d’applications Web
Angular : Un aperçu du framework de développement d’applications Web
Dekeltv1
 
Cours 2 les composants
Cours 2 les composantsCours 2 les composants
Cours 2 les composants
Aymen Sellaouti
 
Partie 2: Angular
Partie 2: AngularPartie 2: Angular
Partie 2: Angular
Habib Ayad
 
Alphorm.com Formation Angular : Avancé
Alphorm.com Formation Angular : AvancéAlphorm.com Formation Angular : Avancé
Alphorm.com Formation Angular : Avancé
Alphorm
 
Angular JS - Paterne Gaye-Guingnido
Angular JS - Paterne Gaye-Guingnido Angular JS - Paterne Gaye-Guingnido
Angular JS - Paterne Gaye-Guingnido
SOAT
 

Similaire à Angular2 / Typescript symposium Versusmind (20)

Angular 11
Angular 11Angular 11
Angular 11
 
Angular développer des applications .pdf
Angular développer des applications .pdfAngular développer des applications .pdf
Angular développer des applications .pdf
 
Cours 1 introduction
Cours 1 introductionCours 1 introduction
Cours 1 introduction
 
AngularJS
AngularJSAngularJS
AngularJS
 
Comment créer une application Angular performante ?
Comment créer une application Angular performante ?Comment créer une application Angular performante ?
Comment créer une application Angular performante ?
 
Technologies sur angular.pptx
Technologies sur angular.pptxTechnologies sur angular.pptx
Technologies sur angular.pptx
 
Support cours angular
Support cours angularSupport cours angular
Support cours angular
 
Alphorm.com Formation Angular - Les fondamentaux
Alphorm.com Formation Angular - Les fondamentauxAlphorm.com Formation Angular - Les fondamentaux
Alphorm.com Formation Angular - Les fondamentaux
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
 
Comment réussir son projet en Angular 1.5 ?
Comment réussir son projet en Angular 1.5 ?Comment réussir son projet en Angular 1.5 ?
Comment réussir son projet en Angular 1.5 ?
 
Chaine de production pipeline
Chaine de production   pipelineChaine de production   pipeline
Chaine de production pipeline
 
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
 
Angular.pdf
Angular.pdfAngular.pdf
Angular.pdf
 
Expérience pratique de développement Azure
Expérience pratique de développement AzureExpérience pratique de développement Azure
Expérience pratique de développement Azure
 
Comparatif des frameworks js mv
Comparatif des frameworks js mvComparatif des frameworks js mv
Comparatif des frameworks js mv
 
Angular : Un aperçu du framework de développement d’applications Web
Angular : Un aperçu du framework de développement d’applications WebAngular : Un aperçu du framework de développement d’applications Web
Angular : Un aperçu du framework de développement d’applications Web
 
Cours 2 les composants
Cours 2 les composantsCours 2 les composants
Cours 2 les composants
 
Partie 2: Angular
Partie 2: AngularPartie 2: Angular
Partie 2: Angular
 
Alphorm.com Formation Angular : Avancé
Alphorm.com Formation Angular : AvancéAlphorm.com Formation Angular : Avancé
Alphorm.com Formation Angular : Avancé
 
Angular JS - Paterne Gaye-Guingnido
Angular JS - Paterne Gaye-Guingnido Angular JS - Paterne Gaye-Guingnido
Angular JS - Paterne Gaye-Guingnido
 

Angular2 / Typescript symposium Versusmind