SlideShare une entreprise Scribd logo
LES RÈGLES DE DÉVELOPPEMENT
ANGULAR
version 1.0
Ben Khalfallah Héla
NOMENCLATURE
les noms des fichiers html : kebab-case ou all-lower-case-
dash.
Exemples : user-comment-list, community-item, user-my-
wishlist.
https://github.com/rangle/angular2-guidelines
2
NOMENCLATURE
les noms des variables css : kebab-case ou all-lower-case-dash.
Examples : category-header-title, toolbar-title, myspace-item-icon, myspace-item-title.
➤ Le css adopte cette règle : tous les attributs et les valeurs css sont de la forme :
margin-left, margin-top, background-color, inline-block, …
https://github.com/rangle/angular2-guidelines
3
http://getbem.com/introduction/
https://www.w3.org/TR/css3-selectors/#sequence
NOMENCLATURE
les noms des classes Typescript : UpperCamelCase (la
première lettre du mot en majuscule).
pour avoir le nom des fichiers Typescript en UpperCamelCase,
il faut séparé les mots par “-“ lors de la génération :
ng g component user-wish-list => UserWishList
https://github.com/rangle/angular2-guidelines
4
UpperCamelCase : ApplicationAddReviewComponent
NOMENCLATURE
les noms des attributs dans une classe ou model :
lowerCamelCase :
le premier mot du nom est en minuscule.
les autres mots du nom commencent par une majuscule.
https://github.com/rangle/angular2-guidelines
5
lowerCamelCase : categoryIcon
NOMENCLATURE
les constantes: UpperCamelCase et statique :
https://github.com/rangle/angular2-guidelines
6
NOMENCLATURE
les noms des méthodes ou fonctions: lowerCamelCase.
https://github.com/rangle/angular2-guidelines
7
TEST DU RESPONSIVE
8
Outils de vérification du responsive
http://quirktools.com/screenfly/#u=http%3A//localhost%3A4200/&w=360&h=640&a=39
http://ami.responsivedesign.is/#
http://www.isresponsive.com/Tester?site=http://localhost:4200/
Breakpoints cibles :
Nous devons avoir deux versions pour ne pas alourdir le code avec des if et
des cas particuliers :
- une version pour les desktops, les iPads & les tablettes.
- une version mobile.
RÈGLES GÉNÉRALES
Typescript est une language orienté objet.
Les noms des classes, variables et attributs doivent être
significatifs: le nom suffit pour connaitre le rôle et
l’emplacement.
Il faut mettre des commentaires dans le code typescript avant chaque
méthode, dans le code html et dans le code css.
Les commentaires sont très importants pour expliquer ce que fait
une fonction sans avoir besoin de comprendre le code.
Les urls sont déclarés comme constantes (statiques) une et une seule
fois (mise à jour simple).
➤ Chaque string utilisée dans le html, doit obligatoirement passée par
“translate” même si elle a la même valeur dans toutes les languages
pour éviter le retard perdu dans les retours de vérifications.
9
RÈGLES GÉNÉRALES
➤ Chaque composant html doit avoir son propre mise en forme css pour :
éviter les cas comme changer la mise en forme d’un élément entraine le changement non voulue d’un
autre.
automatiser la mise en forme.
séparation entre développement et mise en forme : si nous donnons le ficher css à un intégrateur web
ou designer il peut modifier la mise en forme sans risquer l’application et les parties déjà stabilisées.
10
RÈGLES GÉNÉRALES
➤ Privilégier le module au component si le module est réutilisable par
d’autres applications : automatisation via npm.
➤ Le Typescript est un language orienté objet : veuillez respecter les
règles principales d’orienté objet :
Séparation du contexte : séparation des couches : UI séparé des
services et des providers.
Single responsability principle: une classe doit effectuée un seul rôle.
Par exemple une classe rest-services qui effectue le chargement des
famous, recipes et drinks doit être décomposée en 3 classes.
Open Closed Principle : “you should be able to extend the behavior
of your a system without having to modify it”. Nous devons écrire un
code qui ne doit pas être changé chaque fois que les conditions
changent (fichier constante, settings séparé du code).
11

Contenu connexe

Tendances

Formation PHP
Formation PHPFormation PHP
Formation PHP
kemenaran
 
Langage HTML
Langage HTMLLangage HTML
Langage HTML
El Habib NFAOUI
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
Jean-Baptiste Vigneron
 
Chp2 - SOA
Chp2 - SOAChp2 - SOA
Chp2 - SOA
Lilia Sfaxi
 
Diagramme de classe
Diagramme de classeDiagramme de classe
Diagramme de classe
Ilhem Daoudi
 
Le langage html
Le langage htmlLe langage html
Le langage html
Mohammed Amine Mostefai
 
Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3
Abel LIFAEFI MBULA
 
Sécurité des Applications WEB -LEVEL1
 Sécurité des Applications WEB-LEVEL1 Sécurité des Applications WEB-LEVEL1
Sécurité des Applications WEB -LEVEL1
Tarek MOHAMED
 
Securite des Web Services (SOAP vs REST) / OWASP Geneva dec. 2012
Securite des Web Services (SOAP vs REST) / OWASP Geneva dec. 2012Securite des Web Services (SOAP vs REST) / OWASP Geneva dec. 2012
Securite des Web Services (SOAP vs REST) / OWASP Geneva dec. 2012
Sylvain Maret
 
Fascicule de tp atelier développement web
Fascicule de tp atelier développement webFascicule de tp atelier développement web
Fascicule de tp atelier développement web
Houda TOUKABRI
 
Tp2 - WS avec JAXRS
Tp2 - WS avec JAXRSTp2 - WS avec JAXRS
Tp2 - WS avec JAXRS
Lilia Sfaxi
 
Securité des applications web
Securité des applications webSecurité des applications web
Securité des applications web
Marcel TCHOULEGHEU
 
Web server
Web serverWeb server
Web server
Touhid Arastu
 
Écriture de Sous-Interrogations Synchronisées | SQL Oracle
Écriture de Sous-Interrogations Synchronisées | SQL OracleÉcriture de Sous-Interrogations Synchronisées | SQL Oracle
Écriture de Sous-Interrogations Synchronisées | SQL Oracle
webreaker
 
Spring Meetup Paris - Back to the basics of Spring (Boot)
Spring Meetup Paris - Back to the basics of Spring (Boot)Spring Meetup Paris - Back to the basics of Spring (Boot)
Spring Meetup Paris - Back to the basics of Spring (Boot)
Eric SIBER
 
Les bases de l'HTML / CSS
Les bases de l'HTML / CSSLes bases de l'HTML / CSS
Les bases de l'HTML / CSS
Samuel Robert
 
Php 2 - Approfondissement MySQL, PDO et MVC
Php 2 - Approfondissement MySQL, PDO et MVCPhp 2 - Approfondissement MySQL, PDO et MVC
Php 2 - Approfondissement MySQL, PDO et MVC
Pierre Faure
 
Concevoir, développer et sécuriser des micro-services avec Spring Boot
Concevoir, développer et sécuriser des micro-services avec Spring BootConcevoir, développer et sécuriser des micro-services avec Spring Boot
Concevoir, développer et sécuriser des micro-services avec Spring Boot
DNG Consulting
 
Développement d'un site web de E-Commerce avec PHP (Première Partie)
Développement d'un site web de E-Commerce avec PHP (Première Partie)Développement d'un site web de E-Commerce avec PHP (Première Partie)
Développement d'un site web de E-Commerce avec PHP (Première Partie)
ENSET, Université Hassan II Casablanca
 

Tendances (20)

Formation PHP
Formation PHPFormation PHP
Formation PHP
 
Langage HTML
Langage HTMLLangage HTML
Langage HTML
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
 
Chp2 - SOA
Chp2 - SOAChp2 - SOA
Chp2 - SOA
 
Diagramme de classe
Diagramme de classeDiagramme de classe
Diagramme de classe
 
Le langage html
Le langage htmlLe langage html
Le langage html
 
Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3
 
Sécurité des Applications WEB -LEVEL1
 Sécurité des Applications WEB-LEVEL1 Sécurité des Applications WEB-LEVEL1
Sécurité des Applications WEB -LEVEL1
 
Securite des Web Services (SOAP vs REST) / OWASP Geneva dec. 2012
Securite des Web Services (SOAP vs REST) / OWASP Geneva dec. 2012Securite des Web Services (SOAP vs REST) / OWASP Geneva dec. 2012
Securite des Web Services (SOAP vs REST) / OWASP Geneva dec. 2012
 
Fascicule de tp atelier développement web
Fascicule de tp atelier développement webFascicule de tp atelier développement web
Fascicule de tp atelier développement web
 
Tp2 - WS avec JAXRS
Tp2 - WS avec JAXRSTp2 - WS avec JAXRS
Tp2 - WS avec JAXRS
 
Securité des applications web
Securité des applications webSecurité des applications web
Securité des applications web
 
Tp1 wp etud
Tp1 wp etudTp1 wp etud
Tp1 wp etud
 
Web server
Web serverWeb server
Web server
 
Écriture de Sous-Interrogations Synchronisées | SQL Oracle
Écriture de Sous-Interrogations Synchronisées | SQL OracleÉcriture de Sous-Interrogations Synchronisées | SQL Oracle
Écriture de Sous-Interrogations Synchronisées | SQL Oracle
 
Spring Meetup Paris - Back to the basics of Spring (Boot)
Spring Meetup Paris - Back to the basics of Spring (Boot)Spring Meetup Paris - Back to the basics of Spring (Boot)
Spring Meetup Paris - Back to the basics of Spring (Boot)
 
Les bases de l'HTML / CSS
Les bases de l'HTML / CSSLes bases de l'HTML / CSS
Les bases de l'HTML / CSS
 
Php 2 - Approfondissement MySQL, PDO et MVC
Php 2 - Approfondissement MySQL, PDO et MVCPhp 2 - Approfondissement MySQL, PDO et MVC
Php 2 - Approfondissement MySQL, PDO et MVC
 
Concevoir, développer et sécuriser des micro-services avec Spring Boot
Concevoir, développer et sécuriser des micro-services avec Spring BootConcevoir, développer et sécuriser des micro-services avec Spring Boot
Concevoir, développer et sécuriser des micro-services avec Spring Boot
 
Développement d'un site web de E-Commerce avec PHP (Première Partie)
Développement d'un site web de E-Commerce avec PHP (Première Partie)Développement d'un site web de E-Commerce avec PHP (Première Partie)
Développement d'un site web de E-Commerce avec PHP (Première Partie)
 

Similaire à Les règles de développement Angular

Rappels Modularisation application C/C++
Rappels Modularisation application C/C++Rappels Modularisation application C/C++
Rappels Modularisation application C/C++
Sylvain Leroy
 
0519-pdf-php-bases-initiation.pdf
0519-pdf-php-bases-initiation.pdf0519-pdf-php-bases-initiation.pdf
0519-pdf-php-bases-initiation.pdf
RihabBENLAMINE
 
Beautiful CSS : Structurer, documenter, maintenir
Beautiful CSS : Structurer, documenter, maintenirBeautiful CSS : Structurer, documenter, maintenir
Beautiful CSS : Structurer, documenter, maintenir
Yves Van Goethem
 
Cours Html.pdf
Cours Html.pdfCours Html.pdf
Cours Html.pdf
4gnzggpfdw
 
Atelier template
Atelier templateAtelier template
Atelier template
Pierre Sempé
 
seance3-1 CSS.ppt
seance3-1 CSS.pptseance3-1 CSS.ppt
seance3-1 CSS.ppt
AmineReal
 
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
Gregory Renard
 
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
Gregory Renard
 
iune initiation au développement web avec des exemples pratiques .pdf
iune initiation au développement web avec des exemples pratiques .pdfiune initiation au développement web avec des exemples pratiques .pdf
iune initiation au développement web avec des exemples pratiques .pdf
mdallamohamed
 
Formation CSS IT GUST TRAINING Explique les points necessaire a retenir dans ...
Formation CSS IT GUST TRAINING Explique les points necessaire a retenir dans ...Formation CSS IT GUST TRAINING Explique les points necessaire a retenir dans ...
Formation CSS IT GUST TRAINING Explique les points necessaire a retenir dans ...
sellamimariem574
 
js.pdf
js.pdfjs.pdf
L'outil MDA acceleo.pptx
L'outil MDA acceleo.pptxL'outil MDA acceleo.pptx
L'outil MDA acceleo.pptx
SamirAwad14
 
Langage HTML
Langage HTMLLangage HTML
INITITIATION_AU_DEVELOPPEMENT_WEB_ET_PRESENTATION_DES_DIFFERENTES_SOLUTIONS_P...
INITITIATION_AU_DEVELOPPEMENT_WEB_ET_PRESENTATION_DES_DIFFERENTES_SOLUTIONS_P...INITITIATION_AU_DEVELOPPEMENT_WEB_ET_PRESENTATION_DES_DIFFERENTES_SOLUTIONS_P...
INITITIATION_AU_DEVELOPPEMENT_WEB_ET_PRESENTATION_DES_DIFFERENTES_SOLUTIONS_P...
ssuser1a62e1
 
Langage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliersLangage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliers
Frédéric Simonet
 
Angular 11
Angular 11Angular 11
Angular 11
PapaDjadjigueye
 
Kits formation html-les_bases
Kits formation html-les_basesKits formation html-les_bases
Kits formation html-les_bases
kitsformation
 
Ilearn 2008 Competences en mouvement
Ilearn 2008 Competences en mouvementIlearn 2008 Competences en mouvement
Ilearn 2008 Competences en mouvement
Yves Otis
 
Cours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.pptCours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.ppt
RihabBENLAMINE
 

Similaire à Les règles de développement Angular (20)

Rappels Modularisation application C/C++
Rappels Modularisation application C/C++Rappels Modularisation application C/C++
Rappels Modularisation application C/C++
 
0519-pdf-php-bases-initiation.pdf
0519-pdf-php-bases-initiation.pdf0519-pdf-php-bases-initiation.pdf
0519-pdf-php-bases-initiation.pdf
 
Beautiful CSS : Structurer, documenter, maintenir
Beautiful CSS : Structurer, documenter, maintenirBeautiful CSS : Structurer, documenter, maintenir
Beautiful CSS : Structurer, documenter, maintenir
 
Cours Html.pdf
Cours Html.pdfCours Html.pdf
Cours Html.pdf
 
Atelier template
Atelier templateAtelier template
Atelier template
 
seance3-1 CSS.ppt
seance3-1 CSS.pptseance3-1 CSS.ppt
seance3-1 CSS.ppt
 
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
 
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
 
iune initiation au développement web avec des exemples pratiques .pdf
iune initiation au développement web avec des exemples pratiques .pdfiune initiation au développement web avec des exemples pratiques .pdf
iune initiation au développement web avec des exemples pratiques .pdf
 
Css
CssCss
Css
 
Formation CSS IT GUST TRAINING Explique les points necessaire a retenir dans ...
Formation CSS IT GUST TRAINING Explique les points necessaire a retenir dans ...Formation CSS IT GUST TRAINING Explique les points necessaire a retenir dans ...
Formation CSS IT GUST TRAINING Explique les points necessaire a retenir dans ...
 
js.pdf
js.pdfjs.pdf
js.pdf
 
L'outil MDA acceleo.pptx
L'outil MDA acceleo.pptxL'outil MDA acceleo.pptx
L'outil MDA acceleo.pptx
 
Langage HTML
Langage HTMLLangage HTML
Langage HTML
 
INITITIATION_AU_DEVELOPPEMENT_WEB_ET_PRESENTATION_DES_DIFFERENTES_SOLUTIONS_P...
INITITIATION_AU_DEVELOPPEMENT_WEB_ET_PRESENTATION_DES_DIFFERENTES_SOLUTIONS_P...INITITIATION_AU_DEVELOPPEMENT_WEB_ET_PRESENTATION_DES_DIFFERENTES_SOLUTIONS_P...
INITITIATION_AU_DEVELOPPEMENT_WEB_ET_PRESENTATION_DES_DIFFERENTES_SOLUTIONS_P...
 
Langage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliersLangage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliers
 
Angular 11
Angular 11Angular 11
Angular 11
 
Kits formation html-les_bases
Kits formation html-les_basesKits formation html-les_bases
Kits formation html-les_bases
 
Ilearn 2008 Competences en mouvement
Ilearn 2008 Competences en mouvementIlearn 2008 Competences en mouvement
Ilearn 2008 Competences en mouvement
 
Cours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.pptCours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.ppt
 

Plus de Héla Ben Khalfallah

DATABASE_DATA_STRUCTURE_DEVOXXFRANCE2024.pdf
DATABASE_DATA_STRUCTURE_DEVOXXFRANCE2024.pdfDATABASE_DATA_STRUCTURE_DEVOXXFRANCE2024.pdf
DATABASE_DATA_STRUCTURE_DEVOXXFRANCE2024.pdf
Héla Ben Khalfallah
 
CSS selectors
CSS selectorsCSS selectors
CSS selectors
Héla Ben Khalfallah
 
Yo messapp
Yo messappYo messapp
Elixir cheatsheet
Elixir cheatsheetElixir cheatsheet
Elixir cheatsheet
Héla Ben Khalfallah
 
Elixir in a nutshell - Fundamental Concepts
Elixir in a nutshell - Fundamental ConceptsElixir in a nutshell - Fundamental Concepts
Elixir in a nutshell - Fundamental Concepts
Héla Ben Khalfallah
 
Elixir in a nutshell - Ecosystem (session 1)
Elixir in a nutshell - Ecosystem (session 1)Elixir in a nutshell - Ecosystem (session 1)
Elixir in a nutshell - Ecosystem (session 1)
Héla Ben Khalfallah
 
FP Using ES6+ (Cheat Sheet)
FP Using ES6+ (Cheat Sheet)FP Using ES6+ (Cheat Sheet)
FP Using ES6+ (Cheat Sheet)
Héla Ben Khalfallah
 
WONC DOVA
WONC DOVAWONC DOVA
Process & Methodologies (1.2)
Process & Methodologies (1.2)Process & Methodologies (1.2)
Process & Methodologies (1.2)
Héla Ben Khalfallah
 
Process & Methodologies (1.1)
Process & Methodologies (1.1)Process & Methodologies (1.1)
Process & Methodologies (1.1)
Héla Ben Khalfallah
 
Process & Methodologies (1.0)
Process & Methodologies (1.0)Process & Methodologies (1.0)
Process & Methodologies (1.0)
Héla Ben Khalfallah
 
La gestion en boucle fermée
La gestion en boucle ferméeLa gestion en boucle fermée
La gestion en boucle fermée
Héla Ben Khalfallah
 
Architecture ASIS (iOS)
Architecture ASIS (iOS)Architecture ASIS (iOS)
Architecture ASIS (iOS)
Héla Ben Khalfallah
 

Plus de Héla Ben Khalfallah (13)

DATABASE_DATA_STRUCTURE_DEVOXXFRANCE2024.pdf
DATABASE_DATA_STRUCTURE_DEVOXXFRANCE2024.pdfDATABASE_DATA_STRUCTURE_DEVOXXFRANCE2024.pdf
DATABASE_DATA_STRUCTURE_DEVOXXFRANCE2024.pdf
 
CSS selectors
CSS selectorsCSS selectors
CSS selectors
 
Yo messapp
Yo messappYo messapp
Yo messapp
 
Elixir cheatsheet
Elixir cheatsheetElixir cheatsheet
Elixir cheatsheet
 
Elixir in a nutshell - Fundamental Concepts
Elixir in a nutshell - Fundamental ConceptsElixir in a nutshell - Fundamental Concepts
Elixir in a nutshell - Fundamental Concepts
 
Elixir in a nutshell - Ecosystem (session 1)
Elixir in a nutshell - Ecosystem (session 1)Elixir in a nutshell - Ecosystem (session 1)
Elixir in a nutshell - Ecosystem (session 1)
 
FP Using ES6+ (Cheat Sheet)
FP Using ES6+ (Cheat Sheet)FP Using ES6+ (Cheat Sheet)
FP Using ES6+ (Cheat Sheet)
 
WONC DOVA
WONC DOVAWONC DOVA
WONC DOVA
 
Process & Methodologies (1.2)
Process & Methodologies (1.2)Process & Methodologies (1.2)
Process & Methodologies (1.2)
 
Process & Methodologies (1.1)
Process & Methodologies (1.1)Process & Methodologies (1.1)
Process & Methodologies (1.1)
 
Process & Methodologies (1.0)
Process & Methodologies (1.0)Process & Methodologies (1.0)
Process & Methodologies (1.0)
 
La gestion en boucle fermée
La gestion en boucle ferméeLa gestion en boucle fermée
La gestion en boucle fermée
 
Architecture ASIS (iOS)
Architecture ASIS (iOS)Architecture ASIS (iOS)
Architecture ASIS (iOS)
 

Les règles de développement Angular

  • 1. LES RÈGLES DE DÉVELOPPEMENT ANGULAR version 1.0 Ben Khalfallah Héla
  • 2. NOMENCLATURE les noms des fichiers html : kebab-case ou all-lower-case- dash. Exemples : user-comment-list, community-item, user-my- wishlist. https://github.com/rangle/angular2-guidelines 2
  • 3. NOMENCLATURE les noms des variables css : kebab-case ou all-lower-case-dash. Examples : category-header-title, toolbar-title, myspace-item-icon, myspace-item-title. ➤ Le css adopte cette règle : tous les attributs et les valeurs css sont de la forme : margin-left, margin-top, background-color, inline-block, … https://github.com/rangle/angular2-guidelines 3 http://getbem.com/introduction/ https://www.w3.org/TR/css3-selectors/#sequence
  • 4. NOMENCLATURE les noms des classes Typescript : UpperCamelCase (la première lettre du mot en majuscule). pour avoir le nom des fichiers Typescript en UpperCamelCase, il faut séparé les mots par “-“ lors de la génération : ng g component user-wish-list => UserWishList https://github.com/rangle/angular2-guidelines 4 UpperCamelCase : ApplicationAddReviewComponent
  • 5. NOMENCLATURE les noms des attributs dans une classe ou model : lowerCamelCase : le premier mot du nom est en minuscule. les autres mots du nom commencent par une majuscule. https://github.com/rangle/angular2-guidelines 5 lowerCamelCase : categoryIcon
  • 6. NOMENCLATURE les constantes: UpperCamelCase et statique : https://github.com/rangle/angular2-guidelines 6
  • 7. NOMENCLATURE les noms des méthodes ou fonctions: lowerCamelCase. https://github.com/rangle/angular2-guidelines 7
  • 8. TEST DU RESPONSIVE 8 Outils de vérification du responsive http://quirktools.com/screenfly/#u=http%3A//localhost%3A4200/&w=360&h=640&a=39 http://ami.responsivedesign.is/# http://www.isresponsive.com/Tester?site=http://localhost:4200/ Breakpoints cibles : Nous devons avoir deux versions pour ne pas alourdir le code avec des if et des cas particuliers : - une version pour les desktops, les iPads & les tablettes. - une version mobile.
  • 9. RÈGLES GÉNÉRALES Typescript est une language orienté objet. Les noms des classes, variables et attributs doivent être significatifs: le nom suffit pour connaitre le rôle et l’emplacement. Il faut mettre des commentaires dans le code typescript avant chaque méthode, dans le code html et dans le code css. Les commentaires sont très importants pour expliquer ce que fait une fonction sans avoir besoin de comprendre le code. Les urls sont déclarés comme constantes (statiques) une et une seule fois (mise à jour simple). ➤ Chaque string utilisée dans le html, doit obligatoirement passée par “translate” même si elle a la même valeur dans toutes les languages pour éviter le retard perdu dans les retours de vérifications. 9
  • 10. RÈGLES GÉNÉRALES ➤ Chaque composant html doit avoir son propre mise en forme css pour : éviter les cas comme changer la mise en forme d’un élément entraine le changement non voulue d’un autre. automatiser la mise en forme. séparation entre développement et mise en forme : si nous donnons le ficher css à un intégrateur web ou designer il peut modifier la mise en forme sans risquer l’application et les parties déjà stabilisées. 10
  • 11. RÈGLES GÉNÉRALES ➤ Privilégier le module au component si le module est réutilisable par d’autres applications : automatisation via npm. ➤ Le Typescript est un language orienté objet : veuillez respecter les règles principales d’orienté objet : Séparation du contexte : séparation des couches : UI séparé des services et des providers. Single responsability principle: une classe doit effectuée un seul rôle. Par exemple une classe rest-services qui effectue le chargement des famous, recipes et drinks doit être décomposée en 3 classes. Open Closed Principle : “you should be able to extend the behavior of your a system without having to modify it”. Nous devons écrire un code qui ne doit pas être changé chaque fois que les conditions changent (fichier constante, settings séparé du code). 11