Skip to main content

Services Angular et communication avec l’API

Vue d’ensemble

Le frontend ne doit pas appeler le backend directement depuis chaque composant. La logique partagée est regroupée dans uniksimFrontEnd/src/app/service/, avec plusieurs familles spécialisées.

Flux standard

sequenceDiagram
    participant P as Page / Component
    participant S as Service Angular
    participant I as AuthInterceptor
    participant C as Controller NestJS
    participant B as Service backend

    P->>S: Action utilisateur
    S->>I: Requête HttpClient
    I->>I: Ajoute / gère auth
    I->>C: HTTP
    C->>B: Logique métier
    B-->>C: Résultat
    C-->>S: Réponse
    S-->>P: État / données UI

Auth

service/auth/ contient :

  • AuthGuard.service.ts : guards de navigation selon le type d’utilisateur.
  • authInterceptor.service.ts : intercepteur HTTP enregistré globalement dans app.module.ts.

Accès aux données et APIs

service/requestAndData/ contient les services historiques de communication et de données :

  • braincloudRequest.service.ts
  • dataBaseRequest.service.ts
  • dataSource.service.ts

Avant de créer un nouveau service HTTP générique, vérifier si l’appel appartient déjà à l’un de ces services ou à un service fonctionnel plus spécifique.

Support

service/support/ sépare le support en trois responsabilités :

  • support.service.ts : appels et logique du support.
  • support-socket.service.ts : connexion Socket.IO et événements temps réel.
  • support-state.service.ts : état frontend partagé du support.

Notifications

service/notifications/ contient notamment :

  • user-notification.service.ts : inbox locale, synchronisation HTTP et événements temps réel.
  • notification-sound.service.ts : gestion du son lors de nouvelles notifications.

Présence et WebPanel

  • service/presence/admin-presence.service.ts : données de présence utilisées par l’interface admin.
  • service/webPanel/web-panel.service.ts : logique du WebPanel.

Choisir où placer une nouvelle logique

flowchart TD
    NEW[Nouvelle logique frontend] --> SHARED{Utilisée par plusieurs pages ?}
    SHARED -- Non --> PAGE[La garder près de la Page / Component]
    SHARED -- Oui --> DOMAIN{Sous-système existant ?}
    DOMAIN -- Auth --> AUTH[service/auth]
    DOMAIN -- Support --> SUP[service/support]
    DOMAIN -- Notifications --> NOTIF[service/notifications]
    DOMAIN -- Présence --> PRES[service/presence]
    DOMAIN -- Données / API générique --> DATA[service/requestAndData]
    DOMAIN -- Autre --> NEWSVC[Nouveau service spécialisé]

Points d’attention

  • Éviter de dupliquer les appels HTTP dans plusieurs pages.
  • Garder les composants centrés sur l’UI et déléguer la logique partagée aux services.
  • Pour le temps réel, toujours prévoir le chargement initial HTTP et la mise à jour Socket.IO.
  • Lorsqu’un endpoint change, vérifier le service Angular correspondant et non seulement la page visible.
Back to top