meta données pour cette page
  •  

Ceci est une ancienne révision du document !

Bonne pratique pour angular

RÉFÉRENTIEL : Conventions de Nommage Angular

Ce document définit les standards de nommage à respecter sur l'ensemble de nos projets Angular pour garantir la cohérence du code et faciliter la maintenance.

1. Structure des Fichiers (Kebab-case)

La règle d'or est le “Pattern à deux points” : nom.type.extension. Tous les noms de fichiers doivent être en kebab-case (minuscules et tirets).

Type de fichier Convention Exemple
Composant nom.component.ts user-profile.component.ts
Service nom.service.ts auth.service.ts
Module nom.module.ts app-routing.module.ts
Interface/Modèle nom.model.ts hero.model.ts
Guard nom.guard.ts auth.guard.ts

2. Classes et Types (PascalCase)

Les noms de classes utilisent le PascalCase et doivent impérativement inclure le suffixe du type de fichier.

  • Composants : export class UserProfileComponent { }
  • Services : export class AnalyticsService { }
  • Pipes : export class FileSizePipe { }
  • Directives : export class HighlightDirective { }

3. Sélecteurs et templates (kebab-case)

Les sélecteurs de composants et de directives doivent utiliser un préfixe (par défaut app-) pour éviter les collisions avec les balises HTML natives.

  • Correct : <app-user-list></app-user-list>
  • Incorrect : <user-list></user-list>

4. Tests Unitaires (.spec.ts)

Les fichiers de tests doivent porter le même nom que le fichier testé, avec l'extension .spec.ts.

  • Fichier : auth.service.spec.ts
  • Description (describe) : Doit correspondre au nom de la classe.
describe('AuthService', () => { ... });
  • Cas de test (it) : Doit décrire un comportement attendu (souvent en anglais avec “should”).
it('should return true when user is authenticated', () => { ... });

5. Assets et Ressources Statiques

Pour les images, icônes et fichiers de configuration :

  • Images/Icons : Toujours en kebab-case.
    • logo-entreprise-couleur.svg
    • user-avatar-placeholder.png
  • Dossiers d'assets : Organiser par type pour plus de clarté :
    • assets/images/
    • assets/icons/
    • assets/i18n/ (pour les fichiers de traduction JSON)

6. Logique Interne (camelCase)

Pour les propriétés et les fonctions à l'intérieur des classes, le camelCase est la norme.

  • Variables : isValid: boolean = false;
  • Méthodes : updateUserData() { … }
  • Inputs/Outputs : @Input() userRole: string;

7. Constantes et Énumérations

Les valeurs globales immuables doivent être facilement identifiables.

  • Constantes : Utiliser le UPPER_SNAKE_CASE.
export const MAX_FILE_SIZE = 5000;
  • Enums : Nom de l'Enum en PascalCase, valeurs en PascalCase ou UPPER_SNAKE_CASE.

8. Règles d'Organisation des Dossiers

  • Cohérence : Le nom du dossier doit correspondre exactement au préfixe des fichiers qu'il contient.
  • Arborescence :
    • /core : Services singletons, guards globaux.
    • /shared : Composants et pipes réutilisables.
    • /features : Modules métiers spécifiques.

9. Recommandations additionnelles

Interfaces : Ne pas utiliser le préfixe “I” (ex: utiliser User et non IUser).
Sémantique : Nommer les services par leur fonction métier (StorageService) plutôt que par leur type de données (DataService).