Aller au contenu principal

Front-end

Projet conçu avec Angular 15 - docs
Node 18 LTS/hydrogen

Librairies​

Voir package.json

Dépendences

  • Bootstrap 5 - docs
  • ng-bootstrap - docs
  • ngx-translate - docs
  • font-awesome 6 (free icons) - docs / liste des icônes (gratuites)
  • wrapper angular-fontawesome (tree-shakeable) - docs
  • subsink - docs => permet de gérer les unsubscribe, utilisé dans la classe SubsinkAdapter à étendre pour pouvoir utiliser le subsink
  • auth0/angular2-jwt - docs

Tools

  • eslint + prettier + stylelint => linting et formattage
  • jasmine + karma => tests (à mettre en place éventuellement, couverture = 0% aujourd'hui)
  • webpack-bundle-analyzer - docs => permet d'analyser la taille du bundle final avec les scripts du projet build:stats puis analyze

Structure​

Arborescence (outdated)​

arborescence

  • app/ => sources de l'application
  • assets/ => static files (images, etc.)
  • environments/ => variables d'environnements (décrit plus bas dans Configurations)
  • locales/ => fichier de traductions
  • theme/ => theme scss + variables + extract minimal de bootstrap
  • styles.scss => point d'entrée scss, import des librairies externes
  • main.ts => point d'entrée angular

Sources​

sources

  • core/ => chargé initialement dans l'app Angular (contient les fonctionnalitées et configurations principales de l'appli)
  • modules/ => modules de feature qui seront "lazy-loaded" lors de l'appel à cette route (ex: les modules authentifiés ne sont pas envoyés dans le bundle initial)
  • shared/ => composants réutilisés dans l'application (à importer dans les modules utilisant ces fonctionnalitées), des composants "standalone" (docs) pourrait aussi être définis ici, il faut s'assurer que le composant est bien indépendant.
  • utils/ => fonctions et constantes de type utils (ex: date-utils)
  • app.component.ts => code d'initialisation de l'app (ex: initialisation du service de traduction)
  • app.module.ts => module racine
  • app-routing.module.ts => module de routing racine, l'import des autres modules en lazy load se fait ici
Core​

core

  • adapter => des classes intégrant une fonctionnalitée facilement utilisable dans l'appli (ex: utilisation du SubSink pour unsubscribe)
  • auth => gestion de la partie authentification (token, ..)
  • guards => guard pour protéger les accès aux routes front de l'appli
  • http => customisation du HttpClient pour les appels au back (définition d'intercepteur,...)
  • i18n => configuration de l'internationalisation
  • services => autres services (ex: storage service, logger)
  • ui => contient le squelette global de l'appli (header, footer, etc.) et certaines pages non authentifiées (homepage, login, 404)
Modules​

modules

  • ici le module admin englobe les composants des routes authentifiées sous l'url /admin.
    Le package events correspond à la page de la liste des évènements, etc.
    Les routes sont définies dans admin-routing.
Shared​

shared

  • components => les macro composants (ex: datatable)
  • ui => les composants d'interface assez simple (ex: une alerte, un message d'erreur de formulaire,..)
  • on pourra rajouter d'autres types d'éléments shared, ex: des directives,..

Configurations​

Path alias​

Afin d'avoir des imports plus concis, des alias de paths ont été définis.
Ils sont utilisés par Visual Studio Code lors de l'ajout d'un import (voir config typescript.preferences.importModuleSpecifier si cela ne fonctionne pas bien - la valeur devrait être : shortest).

La configuration se trouve dans tsconfig.json :

"paths": {
      "@env/*": ["environments/*"],
      "@shared/*": ["app/shared/*"],
      "@utils*": ["app/utils*"],
      // ...
 }

Environnements​

Angular docs

Les variables d'environnements se trouvent dans les fichiers sous le dossier src/environments .

  • environment.common.ts => variables communes
  • environment.ts => hérite de common, surcharge pour la PROD
  • environment.development.ts => hérite de common, surcharge pour la dev

En dev, le fichier environment est remplacé par celui de dev (voir config angular.json => architect.build.configurations.development.fileReplacements)

Back-end Interaction​

Construction d'une requête pour le back :

  1. Appel d'un service via le HttpClient sous la forme /ma-feature (ex: /events pour faire récupérer une liste d'événements)

  2. Action des HttpInterceptor dont ApiPrefixInterceptor qui rajoute un prefixe à l'appel notamment la version de l'api utilisée /api/v1 .

  3. (DEV) Angular Proxy built on webpack (docs) redirige l'appel vers le backend (voir fichier proxy.conf.json

    (PROD) non défini - nginx, apache, kubernetes load balancer (ingress), ...

    Exemple de config du proxy pour taper sur un autre endpoint (exemple : json-server)

   {
   // login est l'api existante côté spring
     "/api/v1/login": {
       "target": "http://localhost:8080",
       "secure": false,
       "pathRewrite": {
         "^/api/v1/login": "/api/login"
       }
     },
   // events est en cours de dev, pas de back encore, je redirige vers un json-server
     "/api/v1/events": {
       "target": "http://localhost:3000",
       "secure": false,
       "pathRewrite": {
         "^/api/v1/events": "/events"
       }
     }
   }