SlideShare une entreprise Scribd logo
Angular 2
Présentation du Framework Angular 2
Présenter par :
Zoubir REMILA
Plan
1. Historique Angular 2
2. C’est quoi Angular 2
3. TypeScript
4. Principaux modules d’Angular 2
5. Architecture et interaction
6. Composant
7. Binding de propriétés
8. Evènements
9. Template (directives de structure / templating)
10. Services
11. Pipes
12. Programmation réactive
13. router
14. Best practices
Historique
 2009. Création de la version originale du Framework par Misko Hevery.
 2010. Misko Hevery rejoint Google, qui soutient alors officiellement Angular js.
 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.
C’est quoi Angular 2 ?
Angular est une plate-forme qui facilite la
création d'applications avec le Web.
Angular combine des modèles déclaratifs,
injection de dépendance, des outils de bout en
bout et des meilleures pratiques intégrées pour
résoudre les défis de développement.
Angular permet aux développeurs de créer des
applications Web, mobile ou desktop et il est
basé sur TypeScript.
TypeScript
 La force de TypeScript est qu’il permet de typer
les variables et les fonctions.
 Structurer son code comme la plupart des
langages orientés objet.
 Il est 100% ECMAScript 6.
 On a la possibilité de créer des classes, des
interfaces ou des énumérations de la même
manière que si on les avait créées en C++/ jAVA.
 Le code TypeScript sera compilé pour donner du
code JavaScript qui pourra être interprété par
n’importe quel navigateur.
C’est quoi le rapport entre Angular et
TypeScript ?
Angular 2 est basé sur TypeScript (on peut en
faire avec du JS basique) mais il est vivement conseillé
de démarrer ses projets avec TypeScript. Il a été choisi
par l’équipe AngularJS pour plusieurs raisons, entre
autres parce que le typage permet d’éviter les erreurs
lors de l’exécution du script (runtime errors).
Principaux modules d’Angular 2
Interactions des différents modules Angular js 2
Composant
La hiérarchie d’un composant A quoi ressemble un composant
Binding de propriété
 Interpolation
 Modification des propriétés du DOM
Evènement
Directive de structure
 ngIf
 ngFor
 ngSwitch
Directive de templating
 ngStyle
 ngClass
Services
Injection de dépendances
pipes
 Json
 Slice
 Uppercase
 lowercase
pipes
 number
 Percent
 Currency
 date
Programmation réactive
 Dans la programmation réactive tout est un flux,
ce flux est une séquence ordonnée
d’évènements ces évènements représentes des
valeur (soit, erreurs, terminaison …). On doit alors
mettre en place un système qui fait le subscribe
a ces flux, un listener capable de gérer ces
évents.
 Un tel listener est appelé observer.
 Un tel Flux est appelé Observable.
 RxJS.
Router
 Le routeur d’Angular 2 a un objectif simple : permettre d’avoir des URLs
compréhensibles qui reflètent l’état de notre application, et déterminer pour
chaque URL quels composants initialiser et insérer dans la page. Tout cela sans
rafraîchir la page et sans lancer de requête auprès de notre serveur : c’est tout
l’intérêt d’avoir une Single Page Application.
 ngRoute, ui-router, RouterModule.
Best Practices
*ngIf / [hidden]
Best Practices
 Template
 Astreisk (*)
Best Practices
ngClass
Best Practices
ngStyle
Best Practices
Elvis Operator
Best Practices
Input /Output
Best Practices
Template/ TemplateUrl
Best Practices
Style / StyleUrl
Best practice
 Nommage des component :
Nom_composant.component.ts
Tweet.component.ts
 Nommage des template :
Nom_composant.template.html
Tweet.template.html
 Nommage des CSS :
Nom_composant.style.css
tweet.style.css
 Nommage des routes :
Nom_composant.route.ts
Best practice
Observables
Best practice
Observables
Best practice
Instruction au niveau du template
Merci

Contenu connexe

Tendances

Support de cours angular
Support de cours angularSupport de cours angular
Support de cours angular
ENSET, Université Hassan II Casablanca
 
AngularJS - Présentation (french)
AngularJS - Présentation (french)AngularJS - Présentation (french)
AngularJS - Présentation (french)
Yacine Rezgui
 
Angular.pdf
Angular.pdfAngular.pdf
Angular.pdf
Jaouad Assabbour
 
Support NodeJS avec TypeScript Express MongoDB
Support NodeJS avec TypeScript Express MongoDBSupport NodeJS avec TypeScript Express MongoDB
Support NodeJS avec TypeScript Express MongoDB
ENSET, Université Hassan II Casablanca
 
Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...
ENSET, Université Hassan II Casablanca
 
cours javascript.pptx
cours javascript.pptxcours javascript.pptx
cours javascript.pptx
YaminaGh1
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
Abdoulaye Dieng
 
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
ENSET, Université Hassan II Casablanca
 
Support de cours Spring M.youssfi
Support de cours Spring  M.youssfiSupport de cours Spring  M.youssfi
Support de cours Spring M.youssfi
ENSET, Université Hassan II Casablanca
 
Angular 11
Angular 11Angular 11
Angular 11
PapaDjadjigueye
 
Technologies sur angular.pptx
Technologies sur angular.pptxTechnologies sur angular.pptx
Technologies sur angular.pptx
IdrissaDembl
 
E-commerce Use case NFE102
E-commerce Use case NFE102E-commerce Use case NFE102
E-commerce Use case NFE102MRamo2s
 
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
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
 
Spring Boot RestApi.pptx
Spring Boot RestApi.pptxSpring Boot RestApi.pptx
Introduction à React
Introduction à ReactIntroduction à React
Introduction à React
Abdoulaye Dieng
 
Introduction au Framework AngularJs
Introduction au Framework AngularJsIntroduction au Framework AngularJs
Introduction au Framework AngularJs
RadhoueneRouached
 
Ionic, AngularJS,Cordova,NodeJS,Sass
Ionic, AngularJS,Cordova,NodeJS,SassIonic, AngularJS,Cordova,NodeJS,Sass
Ionic, AngularJS,Cordova,NodeJS,Sass
marwa baich
 
Cycles de vie d'un logiciel
Cycles de vie d'un logicielCycles de vie d'un logiciel
Cycles de vie d'un logicielRabia AZIZA
 
Angular Avancé
Angular AvancéAngular Avancé

Tendances (20)

Support de cours angular
Support de cours angularSupport de cours angular
Support de cours angular
 
AngularJS - Présentation (french)
AngularJS - Présentation (french)AngularJS - Présentation (french)
AngularJS - Présentation (french)
 
Angular.pdf
Angular.pdfAngular.pdf
Angular.pdf
 
Support NodeJS avec TypeScript Express MongoDB
Support NodeJS avec TypeScript Express MongoDBSupport NodeJS avec TypeScript Express MongoDB
Support NodeJS avec TypeScript Express MongoDB
 
Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...
 
cours javascript.pptx
cours javascript.pptxcours javascript.pptx
cours javascript.pptx
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
 
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
 
Support de cours Spring M.youssfi
Support de cours Spring  M.youssfiSupport de cours Spring  M.youssfi
Support de cours Spring M.youssfi
 
Angular 11
Angular 11Angular 11
Angular 11
 
Technologies sur angular.pptx
Technologies sur angular.pptxTechnologies sur angular.pptx
Technologies sur angular.pptx
 
E-commerce Use case NFE102
E-commerce Use case NFE102E-commerce Use case NFE102
E-commerce Use case NFE102
 
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
 
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
 
Spring Boot RestApi.pptx
Spring Boot RestApi.pptxSpring Boot RestApi.pptx
Spring Boot RestApi.pptx
 
Introduction à React
Introduction à ReactIntroduction à React
Introduction à React
 
Introduction au Framework AngularJs
Introduction au Framework AngularJsIntroduction au Framework AngularJs
Introduction au Framework AngularJs
 
Ionic, AngularJS,Cordova,NodeJS,Sass
Ionic, AngularJS,Cordova,NodeJS,SassIonic, AngularJS,Cordova,NodeJS,Sass
Ionic, AngularJS,Cordova,NodeJS,Sass
 
Cycles de vie d'un logiciel
Cycles de vie d'un logicielCycles de vie d'un logiciel
Cycles de vie d'un logiciel
 
Angular Avancé
Angular AvancéAngular Avancé
Angular Avancé
 

Similaire à Angular 2

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 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
 
jQuery vs AngularJS
jQuery vs AngularJS jQuery vs AngularJS
jQuery vs AngularJS
Safwen Chibeni
 
Workshop Spring - Session 1 - L'offre Spring et les bases
Workshop Spring  - Session 1 - L'offre Spring et les basesWorkshop Spring  - Session 1 - L'offre Spring et les bases
Workshop Spring - Session 1 - L'offre Spring et les bases
Antoine Rey
 
Cours 1 introduction
Cours 1 introductionCours 1 introduction
Cours 1 introduction
Aymen Sellaouti
 
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)
Etude rapide sur les frameworks Front-end (AngularJS vs *JS)
Bilel ZEGHAD
 
Angluars js
Angluars jsAngluars js
Angluars js
RYMAA
 
Angular2 / Typescript symposium Versusmind
Angular2 / Typescript symposium VersusmindAngular2 / Typescript symposium Versusmind
Angular2 / Typescript symposium Versusmind
Philippe Didiergeorges
 
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
 
Retour d'experience projet AngularJS
Retour d'experience projet AngularJSRetour d'experience projet AngularJS
Retour d'experience projet AngularJS
∞ François CHERPION ∞
 
Common features in webapi aspnetcore
Common features in webapi aspnetcoreCommon features in webapi aspnetcore
Common features in webapi aspnetcore
MSDEVMTL
 
Ingénieur étude et développement JAVA JEE.pdf
Ingénieur étude et développement JAVA JEE.pdfIngénieur étude et développement JAVA JEE.pdf
Ingénieur étude et développement JAVA JEE.pdf
JEANCLAUDECAMARA
 
Chapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfChapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdf
BoubakerMedanas
 
Chapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfChapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdf
BoubakerMedanas
 
Presentation du socle technique Java open source Scub Foundation
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 Traumat
 
Scub Foundation, usine logicielle Java libre
Scub Foundation, usine logicielle Java libreScub Foundation, usine logicielle Java libre
Scub Foundation, usine logicielle Java libre
Stéphane Traumat
 
Oracle Developer adf
Oracle Developer adfOracle Developer adf
Oracle Developer adf
Bacely YoroBi
 
Alphorm.com Formation Angular - Les fondamentaux
Alphorm.com Formation Angular - Les fondamentauxAlphorm.com Formation Angular - Les fondamentaux
Alphorm.com Formation Angular - Les fondamentaux
Alphorm
 

Similaire à Angular 2 (20)

Angular développer des applications .pdf
Angular développer des applications .pdfAngular développer des applications .pdf
Angular développer des applications .pdf
 
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
 
jQuery vs AngularJS
jQuery vs AngularJS jQuery vs AngularJS
jQuery vs AngularJS
 
Workshop Spring - Session 1 - L'offre Spring et les bases
Workshop Spring  - Session 1 - L'offre Spring et les basesWorkshop Spring  - Session 1 - L'offre Spring et les bases
Workshop Spring - Session 1 - L'offre Spring et les bases
 
Cours 1 introduction
Cours 1 introductionCours 1 introduction
Cours 1 introduction
 
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)
Etude rapide sur les frameworks Front-end (AngularJS vs *JS)
 
Angluars js
Angluars jsAngluars js
Angluars js
 
Angular2 / Typescript symposium Versusmind
Angular2 / Typescript symposium VersusmindAngular2 / Typescript symposium Versusmind
Angular2 / Typescript symposium Versusmind
 
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 ?
 
Retour d'experience projet AngularJS
Retour d'experience projet AngularJSRetour d'experience projet AngularJS
Retour d'experience projet AngularJS
 
Common features in webapi aspnetcore
Common features in webapi aspnetcoreCommon features in webapi aspnetcore
Common features in webapi aspnetcore
 
Ingénieur étude et développement JAVA JEE.pdf
Ingénieur étude et développement JAVA JEE.pdfIngénieur étude et développement JAVA JEE.pdf
Ingénieur étude et développement JAVA JEE.pdf
 
Spring
SpringSpring
Spring
 
CV REBAI Hamida
CV REBAI HamidaCV REBAI Hamida
CV REBAI Hamida
 
Chapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfChapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdf
 
Chapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfChapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdf
 
Presentation du socle technique Java open source Scub Foundation
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
 
Scub Foundation, usine logicielle Java libre
Scub Foundation, usine logicielle Java libreScub Foundation, usine logicielle Java libre
Scub Foundation, usine logicielle Java libre
 
Oracle Developer adf
Oracle Developer adfOracle Developer adf
Oracle Developer adf
 
Alphorm.com Formation Angular - Les fondamentaux
Alphorm.com Formation Angular - Les fondamentauxAlphorm.com Formation Angular - Les fondamentaux
Alphorm.com Formation Angular - Les fondamentaux
 

Dernier

Dimensionnement réseau de transmission pour un réseau GSM-R - AIT KADDOUR Ghi...
Dimensionnement réseau de transmission pour un réseau GSM-R - AIT KADDOUR Ghi...Dimensionnement réseau de transmission pour un réseau GSM-R - AIT KADDOUR Ghi...
Dimensionnement réseau de transmission pour un réseau GSM-R - AIT KADDOUR Ghi...
MustaphaZhiri
 
Presentation powerpoint sur la filiere electrotechnique
Presentation powerpoint sur la filiere electrotechniquePresentation powerpoint sur la filiere electrotechnique
Presentation powerpoint sur la filiere electrotechnique
mohammadaminejouini
 
Bibliothèque de L'Union - Bilan de l'année 2023
Bibliothèque de L'Union - Bilan de l'année 2023Bibliothèque de L'Union - Bilan de l'année 2023
Bibliothèque de L'Union - Bilan de l'année 2023
Bibliothèque de L'Union
 
BATIMENT 5.pptx. Fil français tourné en France
BATIMENT 5.pptx. Fil français tourné en FranceBATIMENT 5.pptx. Fil français tourné en France
BATIMENT 5.pptx. Fil français tourné en France
Txaruka
 
Veille Audocdi 90 - mois de juin 2024.pdf
Veille Audocdi 90 - mois de juin 2024.pdfVeille Audocdi 90 - mois de juin 2024.pdf
Veille Audocdi 90 - mois de juin 2024.pdf
frizzole
 
Proyecto Erasmus Jardineros y jardineras de paz
Proyecto Erasmus Jardineros y jardineras de pazProyecto Erasmus Jardineros y jardineras de paz
Proyecto Erasmus Jardineros y jardineras de paz
Morzadec Cécile
 
Textes de famille concernant les guerres V2.pdf
Textes de famille concernant les guerres V2.pdfTextes de famille concernant les guerres V2.pdf
Textes de famille concernant les guerres V2.pdf
Michel Bruley
 

Dernier (7)

Dimensionnement réseau de transmission pour un réseau GSM-R - AIT KADDOUR Ghi...
Dimensionnement réseau de transmission pour un réseau GSM-R - AIT KADDOUR Ghi...Dimensionnement réseau de transmission pour un réseau GSM-R - AIT KADDOUR Ghi...
Dimensionnement réseau de transmission pour un réseau GSM-R - AIT KADDOUR Ghi...
 
Presentation powerpoint sur la filiere electrotechnique
Presentation powerpoint sur la filiere electrotechniquePresentation powerpoint sur la filiere electrotechnique
Presentation powerpoint sur la filiere electrotechnique
 
Bibliothèque de L'Union - Bilan de l'année 2023
Bibliothèque de L'Union - Bilan de l'année 2023Bibliothèque de L'Union - Bilan de l'année 2023
Bibliothèque de L'Union - Bilan de l'année 2023
 
BATIMENT 5.pptx. Fil français tourné en France
BATIMENT 5.pptx. Fil français tourné en FranceBATIMENT 5.pptx. Fil français tourné en France
BATIMENT 5.pptx. Fil français tourné en France
 
Veille Audocdi 90 - mois de juin 2024.pdf
Veille Audocdi 90 - mois de juin 2024.pdfVeille Audocdi 90 - mois de juin 2024.pdf
Veille Audocdi 90 - mois de juin 2024.pdf
 
Proyecto Erasmus Jardineros y jardineras de paz
Proyecto Erasmus Jardineros y jardineras de pazProyecto Erasmus Jardineros y jardineras de paz
Proyecto Erasmus Jardineros y jardineras de paz
 
Textes de famille concernant les guerres V2.pdf
Textes de famille concernant les guerres V2.pdfTextes de famille concernant les guerres V2.pdf
Textes de famille concernant les guerres V2.pdf
 

Angular 2

  • 1. Angular 2 Présentation du Framework Angular 2 Présenter par : Zoubir REMILA
  • 2. Plan 1. Historique Angular 2 2. C’est quoi Angular 2 3. TypeScript 4. Principaux modules d’Angular 2 5. Architecture et interaction 6. Composant 7. Binding de propriétés 8. Evènements 9. Template (directives de structure / templating) 10. Services 11. Pipes 12. Programmation réactive 13. router 14. Best practices
  • 3. Historique  2009. Création de la version originale du Framework par Misko Hevery.  2010. Misko Hevery rejoint Google, qui soutient alors officiellement Angular js.  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.
  • 4. C’est quoi Angular 2 ? Angular est une plate-forme qui facilite la création d'applications avec le Web. Angular combine des modèles déclaratifs, injection de dépendance, des outils de bout en bout et des meilleures pratiques intégrées pour résoudre les défis de développement. Angular permet aux développeurs de créer des applications Web, mobile ou desktop et il est basé sur TypeScript.
  • 5. TypeScript  La force de TypeScript est qu’il permet de typer les variables et les fonctions.  Structurer son code comme la plupart des langages orientés objet.  Il est 100% ECMAScript 6.  On a la possibilité de créer des classes, des interfaces ou des énumérations de la même manière que si on les avait créées en C++/ jAVA.  Le code TypeScript sera compilé pour donner du code JavaScript qui pourra être interprété par n’importe quel navigateur.
  • 6. C’est quoi le rapport entre Angular et TypeScript ? Angular 2 est basé sur TypeScript (on peut en faire avec du JS basique) mais il est vivement conseillé de démarrer ses projets avec TypeScript. Il a été choisi par l’équipe AngularJS pour plusieurs raisons, entre autres parce que le typage permet d’éviter les erreurs lors de l’exécution du script (runtime errors).
  • 8. Interactions des différents modules Angular js 2
  • 9. Composant La hiérarchie d’un composant A quoi ressemble un composant
  • 10. Binding de propriété  Interpolation  Modification des propriétés du DOM
  • 12. Directive de structure  ngIf  ngFor  ngSwitch
  • 13. Directive de templating  ngStyle  ngClass
  • 15. pipes  Json  Slice  Uppercase  lowercase
  • 16. pipes  number  Percent  Currency  date
  • 17. Programmation réactive  Dans la programmation réactive tout est un flux, ce flux est une séquence ordonnée d’évènements ces évènements représentes des valeur (soit, erreurs, terminaison …). On doit alors mettre en place un système qui fait le subscribe a ces flux, un listener capable de gérer ces évents.  Un tel listener est appelé observer.  Un tel Flux est appelé Observable.  RxJS.
  • 18. Router  Le routeur d’Angular 2 a un objectif simple : permettre d’avoir des URLs compréhensibles qui reflètent l’état de notre application, et déterminer pour chaque URL quels composants initialiser et insérer dans la page. Tout cela sans rafraîchir la page et sans lancer de requête auprès de notre serveur : c’est tout l’intérêt d’avoir une Single Page Application.  ngRoute, ui-router, RouterModule.
  • 19.
  • 28. Best practice  Nommage des component : Nom_composant.component.ts Tweet.component.ts  Nommage des template : Nom_composant.template.html Tweet.template.html  Nommage des CSS : Nom_composant.style.css tweet.style.css  Nommage des routes : Nom_composant.route.ts
  • 31. Best practice Instruction au niveau du template
  • 32. Merci