SlideShare une entreprise Scribd logo
1  sur  32
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 (20)

Introduction à Angular 2
Introduction à Angular 2Introduction à Angular 2
Introduction à Angular 2
 
Angular
AngularAngular
Angular
 
Introduction à Angular 2
Introduction à Angular 2Introduction à Angular 2
Introduction à Angular 2
 
Support cours angular
Support cours angularSupport cours angular
Support cours angular
 
Introduction au Framework AngularJs
Introduction au Framework AngularJsIntroduction au Framework AngularJs
Introduction au Framework AngularJs
 
Angular
AngularAngular
Angular
 
Nouveautés de java 8
Nouveautés de java 8Nouveautés de java 8
Nouveautés de java 8
 
Spring ioc
Spring iocSpring ioc
Spring ioc
 
Angular
AngularAngular
Angular
 
Introduction à spring boot
Introduction à spring bootIntroduction à spring boot
Introduction à spring boot
 
Angular 11
Angular 11Angular 11
Angular 11
 
Angular Avancé
Angular AvancéAngular Avancé
Angular Avancé
 
Angular
AngularAngular
Angular
 
Partie 2: Angular
Partie 2: AngularPartie 2: Angular
Partie 2: Angular
 
Angular Directives | Angular 2 Custom Directives | Angular Tutorial | Angular...
Angular Directives | Angular 2 Custom Directives | Angular Tutorial | Angular...Angular Directives | Angular 2 Custom Directives | Angular Tutorial | Angular...
Angular Directives | Angular 2 Custom Directives | Angular Tutorial | Angular...
 
Introduction to React JS
Introduction to React JSIntroduction to React JS
Introduction to React JS
 
AngularJS - Présentation (french)
AngularJS - Présentation (french)AngularJS - Présentation (french)
AngularJS - Présentation (french)
 
Formation jpa-hibernate-spring-data
Formation jpa-hibernate-spring-dataFormation jpa-hibernate-spring-data
Formation jpa-hibernate-spring-data
 
Architecture jee principe de inversion de controle et injection des dependances
Architecture jee principe de inversion de controle et injection des dependancesArchitecture jee principe de inversion de controle et injection des dependances
Architecture jee principe de inversion de controle et injection des dependances
 
Spring Boot RestApi.pptx
Spring Boot RestApi.pptxSpring Boot RestApi.pptx
Spring Boot RestApi.pptx
 

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 .pdfimenhamada17
 
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 angularrrrrinesrdissi60
 
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 basesAntoine Rey
 
Ionic, AngularJS,Cordova,NodeJS,Sass
Ionic, AngularJS,Cordova,NodeJS,SassIonic, AngularJS,Cordova,NodeJS,Sass
Ionic, AngularJS,Cordova,NodeJS,Sassmarwa baich
 
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 jsRYMAA
 
Angular2 / Typescript symposium Versusmind
Angular2 / Typescript symposium VersusmindAngular2 / Typescript symposium Versusmind
Angular2 / Typescript symposium VersusmindPhilippe 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
 
Common features in webapi aspnetcore
Common features in webapi aspnetcoreCommon features in webapi aspnetcore
Common features in webapi aspnetcoreMSDEVMTL
 
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.pdfJEANCLAUDECAMARA
 
Chapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfChapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfBoubakerMedanas
 
Chapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfChapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfBoubakerMedanas
 
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 FoundationStéphane Traumat
 
Scub Foundation, usine logicielle Java libre
Scub Foundation, usine logicielle Java libreScub Foundation, usine logicielle Java libre
Scub Foundation, usine logicielle Java libreStéphane Traumat
 
Oracle Developer adf
Oracle Developer adfOracle Developer adf
Oracle Developer adfBacely YoroBi
 

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
 
Ionic, AngularJS,Cordova,NodeJS,Sass
Ionic, AngularJS,Cordova,NodeJS,SassIonic, AngularJS,Cordova,NodeJS,Sass
Ionic, AngularJS,Cordova,NodeJS,Sass
 
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
 

Dernier

Potentiel du Maroc en Produits du Terroir et Stratégie Adoptée pour le dévelo...
Potentiel du Maroc en Produits du Terroir et Stratégie Adoptée pour le dévelo...Potentiel du Maroc en Produits du Terroir et Stratégie Adoptée pour le dévelo...
Potentiel du Maroc en Produits du Terroir et Stratégie Adoptée pour le dévelo...NaimDoumissi
 
Faut-il avoir peur de la technique ? (G. Gay-Para)
Faut-il avoir peur de la technique ? (G. Gay-Para)Faut-il avoir peur de la technique ? (G. Gay-Para)
Faut-il avoir peur de la technique ? (G. Gay-Para)Gabriel Gay-Para
 
SciencesPo_Aix_InnovationPédagogique_Atelier_IA.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_IA.pdfSciencesPo_Aix_InnovationPédagogique_Atelier_IA.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_IA.pdfSKennel
 
Pharmacologie des cardiotoniques pour Pharmacie
Pharmacologie des cardiotoniques pour PharmaciePharmacologie des cardiotoniques pour Pharmacie
Pharmacologie des cardiotoniques pour PharmacieLoloshka
 
PIE-A2-P4-support stagiaires sept 22-validé.pdf
PIE-A2-P4-support stagiaires sept 22-validé.pdfPIE-A2-P4-support stagiaires sept 22-validé.pdf
PIE-A2-P4-support stagiaires sept 22-validé.pdfRiDaHAziz
 
Pas de vagues. pptx Film français
Pas de vagues.  pptx      Film   françaisPas de vagues.  pptx      Film   français
Pas de vagues. pptx Film françaisTxaruka
 
Bibdoc 2024 - Les maillons de la chaine du livre face aux enjeux écologiques.pdf
Bibdoc 2024 - Les maillons de la chaine du livre face aux enjeux écologiques.pdfBibdoc 2024 - Les maillons de la chaine du livre face aux enjeux écologiques.pdf
Bibdoc 2024 - Les maillons de la chaine du livre face aux enjeux écologiques.pdfBibdoc 37
 
Bibdoc 2024 - L’Éducation aux Médias et à l’Information face à l’intelligence...
Bibdoc 2024 - L’Éducation aux Médias et à l’Information face à l’intelligence...Bibdoc 2024 - L’Éducation aux Médias et à l’Information face à l’intelligence...
Bibdoc 2024 - L’Éducation aux Médias et à l’Information face à l’intelligence...Bibdoc 37
 
Vulnérabilité numérique d’usage : un enjeu pour l’aide à la réussitepdf
Vulnérabilité numérique d’usage : un enjeu pour l’aide à la réussitepdfVulnérabilité numérique d’usage : un enjeu pour l’aide à la réussitepdf
Vulnérabilité numérique d’usage : un enjeu pour l’aide à la réussitepdfSylvianeBachy
 
Apprendre avec des top et nano influenceurs
Apprendre avec des top et nano influenceursApprendre avec des top et nano influenceurs
Apprendre avec des top et nano influenceursStagiaireLearningmat
 
Bernard Réquichot.pptx Peintre français
Bernard Réquichot.pptx   Peintre françaisBernard Réquichot.pptx   Peintre français
Bernard Réquichot.pptx Peintre françaisTxaruka
 
Cours de Management des Systèmes d'information
Cours de Management des Systèmes d'informationCours de Management des Systèmes d'information
Cours de Management des Systèmes d'informationpapediallo3
 
Bibdoc 2024 - Ecologie du livre et creation de badge.pdf
Bibdoc 2024 - Ecologie du livre et creation de badge.pdfBibdoc 2024 - Ecologie du livre et creation de badge.pdf
Bibdoc 2024 - Ecologie du livre et creation de badge.pdfBibdoc 37
 
SciencesPo_Aix_InnovationPédagogique_Bilan.pdf
SciencesPo_Aix_InnovationPédagogique_Bilan.pdfSciencesPo_Aix_InnovationPédagogique_Bilan.pdf
SciencesPo_Aix_InnovationPédagogique_Bilan.pdfSKennel
 
Présentation - Initiatives - CECOSDA - OIF - Fact Checking.pptx
Présentation - Initiatives - CECOSDA - OIF - Fact Checking.pptxPrésentation - Initiatives - CECOSDA - OIF - Fact Checking.pptx
Présentation - Initiatives - CECOSDA - OIF - Fact Checking.pptxJCAC
 
Pas de vagues. pptx Film français
Pas de vagues.  pptx   Film     françaisPas de vagues.  pptx   Film     français
Pas de vagues. pptx Film françaisTxaruka
 
Zotero avancé - support de formation doctorants SHS 2024
Zotero avancé - support de formation doctorants SHS 2024Zotero avancé - support de formation doctorants SHS 2024
Zotero avancé - support de formation doctorants SHS 2024Alain Marois
 
PIE-A2-P 5- Supports stagiaires.pptx.pdf
PIE-A2-P 5- Supports stagiaires.pptx.pdfPIE-A2-P 5- Supports stagiaires.pptx.pdf
PIE-A2-P 5- Supports stagiaires.pptx.pdfRiDaHAziz
 
SciencesPo_Aix_InnovationPédagogique_Conférence_SK.pdf
SciencesPo_Aix_InnovationPédagogique_Conférence_SK.pdfSciencesPo_Aix_InnovationPédagogique_Conférence_SK.pdf
SciencesPo_Aix_InnovationPédagogique_Conférence_SK.pdfSKennel
 

Dernier (20)

Potentiel du Maroc en Produits du Terroir et Stratégie Adoptée pour le dévelo...
Potentiel du Maroc en Produits du Terroir et Stratégie Adoptée pour le dévelo...Potentiel du Maroc en Produits du Terroir et Stratégie Adoptée pour le dévelo...
Potentiel du Maroc en Produits du Terroir et Stratégie Adoptée pour le dévelo...
 
Faut-il avoir peur de la technique ? (G. Gay-Para)
Faut-il avoir peur de la technique ? (G. Gay-Para)Faut-il avoir peur de la technique ? (G. Gay-Para)
Faut-il avoir peur de la technique ? (G. Gay-Para)
 
SciencesPo_Aix_InnovationPédagogique_Atelier_IA.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_IA.pdfSciencesPo_Aix_InnovationPédagogique_Atelier_IA.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_IA.pdf
 
Pharmacologie des cardiotoniques pour Pharmacie
Pharmacologie des cardiotoniques pour PharmaciePharmacologie des cardiotoniques pour Pharmacie
Pharmacologie des cardiotoniques pour Pharmacie
 
PIE-A2-P4-support stagiaires sept 22-validé.pdf
PIE-A2-P4-support stagiaires sept 22-validé.pdfPIE-A2-P4-support stagiaires sept 22-validé.pdf
PIE-A2-P4-support stagiaires sept 22-validé.pdf
 
Pas de vagues. pptx Film français
Pas de vagues.  pptx      Film   françaisPas de vagues.  pptx      Film   français
Pas de vagues. pptx Film français
 
Bibdoc 2024 - Les maillons de la chaine du livre face aux enjeux écologiques.pdf
Bibdoc 2024 - Les maillons de la chaine du livre face aux enjeux écologiques.pdfBibdoc 2024 - Les maillons de la chaine du livre face aux enjeux écologiques.pdf
Bibdoc 2024 - Les maillons de la chaine du livre face aux enjeux écologiques.pdf
 
Bibdoc 2024 - L’Éducation aux Médias et à l’Information face à l’intelligence...
Bibdoc 2024 - L’Éducation aux Médias et à l’Information face à l’intelligence...Bibdoc 2024 - L’Éducation aux Médias et à l’Information face à l’intelligence...
Bibdoc 2024 - L’Éducation aux Médias et à l’Information face à l’intelligence...
 
Vulnérabilité numérique d’usage : un enjeu pour l’aide à la réussitepdf
Vulnérabilité numérique d’usage : un enjeu pour l’aide à la réussitepdfVulnérabilité numérique d’usage : un enjeu pour l’aide à la réussitepdf
Vulnérabilité numérique d’usage : un enjeu pour l’aide à la réussitepdf
 
Apprendre avec des top et nano influenceurs
Apprendre avec des top et nano influenceursApprendre avec des top et nano influenceurs
Apprendre avec des top et nano influenceurs
 
Bernard Réquichot.pptx Peintre français
Bernard Réquichot.pptx   Peintre françaisBernard Réquichot.pptx   Peintre français
Bernard Réquichot.pptx Peintre français
 
DO PALÁCIO À ASSEMBLEIA .
DO PALÁCIO À ASSEMBLEIA                 .DO PALÁCIO À ASSEMBLEIA                 .
DO PALÁCIO À ASSEMBLEIA .
 
Cours de Management des Systèmes d'information
Cours de Management des Systèmes d'informationCours de Management des Systèmes d'information
Cours de Management des Systèmes d'information
 
Bibdoc 2024 - Ecologie du livre et creation de badge.pdf
Bibdoc 2024 - Ecologie du livre et creation de badge.pdfBibdoc 2024 - Ecologie du livre et creation de badge.pdf
Bibdoc 2024 - Ecologie du livre et creation de badge.pdf
 
SciencesPo_Aix_InnovationPédagogique_Bilan.pdf
SciencesPo_Aix_InnovationPédagogique_Bilan.pdfSciencesPo_Aix_InnovationPédagogique_Bilan.pdf
SciencesPo_Aix_InnovationPédagogique_Bilan.pdf
 
Présentation - Initiatives - CECOSDA - OIF - Fact Checking.pptx
Présentation - Initiatives - CECOSDA - OIF - Fact Checking.pptxPrésentation - Initiatives - CECOSDA - OIF - Fact Checking.pptx
Présentation - Initiatives - CECOSDA - OIF - Fact Checking.pptx
 
Pas de vagues. pptx Film français
Pas de vagues.  pptx   Film     françaisPas de vagues.  pptx   Film     français
Pas de vagues. pptx Film français
 
Zotero avancé - support de formation doctorants SHS 2024
Zotero avancé - support de formation doctorants SHS 2024Zotero avancé - support de formation doctorants SHS 2024
Zotero avancé - support de formation doctorants SHS 2024
 
PIE-A2-P 5- Supports stagiaires.pptx.pdf
PIE-A2-P 5- Supports stagiaires.pptx.pdfPIE-A2-P 5- Supports stagiaires.pptx.pdf
PIE-A2-P 5- Supports stagiaires.pptx.pdf
 
SciencesPo_Aix_InnovationPédagogique_Conférence_SK.pdf
SciencesPo_Aix_InnovationPédagogique_Conférence_SK.pdfSciencesPo_Aix_InnovationPédagogique_Conférence_SK.pdf
SciencesPo_Aix_InnovationPédagogique_Conférence_SK.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