|{{:undo-2.svg?30|}} [[certif:do#procedures|Retour au Dossier Organisationnel]]||
|{{:connexe.jpg?40|}} **Sujets connexes**|[[https://cartographie-fonctionnelle.logeas-web.fr/|Cartographie fonctionnelle de LoGeAs]]\\ [[certif:procedure:usageclasseinterface|Règles sur les classes]]\\ [[certif:procedure:develop:angular:nommage|Conventions de nommage Angular]]\\ [[certif:procedure:develop:angular:validator|Mise en place des dx-validator]]|
====== Proc#179 - Développement Angular : règles et bonnes pratiques ======

===== Informations qualité =====

^Suivi des modifications majeures^^^
^Date^Auteur^Modifications^
|1 octobre 2026|Nicolas MARCHAND|Création : la page sommaire devient une procédure ; les pages d'installation, de référentiel et d'astuces deviennent des documents techniques rattachés|

|**Suivi des approbations** |[[https://cartographie-fonctionnelle.logeas-web.fr/UniversProcedure?id=179|Cartographie fonctionnelle – fiche de la procédure]]|
|**Objet** |Fixer les règles communes à tous les développements Angular de LoGeAs (applications et bibliothèques), afin que le code reste homogène, lisible et maintenable par toute l'équipe.|
|**Destinataires** |**- Validation des modifications :** Chef de projet \\ **- Approbation du document :** Équipe Développement|

\\

===== Principe =====

Tout développement Angular (applications, bibliothèque ''ngx-logeasweb-ui'') respecte les règles ci-dessous. Le détail et les exemples sont dans les documents techniques ; en cas de doute, ils font foi sur la manière de faire.\\
Une règle nouvelle ou modifiée est d'abord inscrite dans le document technique concerné, puis, si elle est générale, résumée ici (modification majeure : nouvelle approbation).

===== Règles =====

^ Domaine ^ Règle ^ Détail ^
| Nommage | fichiers en kebab-case selon le modèle ''nom.type.ts'' ; classes en PascalCase avec le suffixe de leur rôle (''…Component'', ''…Service'') ; sélecteurs préfixés ; un fichier ''.spec.ts'' par fichier testé | [[certif:procedure:develop:angular:nommage|Conventions de nommage]] |
| Classes de données | une table de la base = une classe ''TSQL<Table>'' ; une classe interne au front est préfixée ''T'' et hérite de la classe ''TSQL'' plutôt que de la copier ; une structure d'affichage est une interface ''I<Table>Grid'' | [[certif:procedure:usageclasseinterface|Règles sur les classes]] |
| Accès au back | on ne charge, n'enregistre et n'efface les données qu'au travers des services (''chargeFromBDD$'', ''sauveToBDD$'', ''effaceFromBDD$'') ; une classe de données n'appelle jamais un service | [[certif:procedure:usageclasseinterface|Règles sur les classes]] |
| Validation des saisies | les contrôles de saisie utilisent les ''dx-validator'' regroupés par ''validationGroup'' ; un validateur maison est déclaré dans la bibliothèque (''custom-validation-rule.ts'') et appelé par ''customValidatorService'' | [[certif:procedure:develop:angular:validator|Mise en place des dx-validator]] |

===== Documents techniques =====

^ Document ^ Contenu ^
| [[certif:procedure:develop:angular:install|Installation]] | installation du poste de développement Angular |
| [[certif:procedure:develop:angular:nommage|Conventions de nommage Angular]] | fichiers, classes, sélecteurs, tests |
| [[certif:procedure:usageclasseinterface|Règles sur les classes]] | classes de données et fonctions d'accès au back |
| [[certif:procedure:develop:angular:validator|Mise en place des dx-validator]] | validateurs de saisie, organisation des contrôles |
| [[certif:procedure:develop:angular:graphe-composant|Graphe de dépendances]] | astuce : tracer les dépendances et repérer les boucles (dependency-cruiser, Graphviz) |

===== Responsabilités =====

^ Qui ^ Quoi ^
| Chef de projet | valide les règles et leurs modifications |
| Équipe Développement | applique les règles, tient les documents techniques à jour |