Home

Introduction

L'objectif de Yang est de fournir une base pour des projets Angular avec des bonnes pratiques utilisables dans pratiquement tous nos projets.

Il surcharge le générateur officiel d'Angular (@angular/cli) puisque la génération d'une nouvelle application lance d'abord celle d'angular-cli et met ensuite à jour cette structure.

Parmi les apports de Yang, on peut citer :

• Structure respectant le principe LIFT :

  • Locating our code is easy
  • Identify code at a glance
  • Flat structure as long as we can
  • Try to stay DRY (Don't Repeat Yourself) or T-DRY

• Lazy loading pour les routes

• Point d'entrée pour exécuter du code lors du bootstrap de l'application

• i18n mis en place via @ngx-translate

• Ligne de commande pour générer différents éléments (composant, directive, service, feature)

Structure d'un projet Yang

La structure d'un projet généré par Yang repose sur une découpe en 3 modules principaux :

Core

Ce module n'est chargé qu'une seule fois et permet d'enregistrer les services et les modules utilisant la méthode forRoot().

Shared

Ce module contient tous les composants réutilisables à travers l'application ainsi que tous les modules utilisés un peu partout (par exemple les modules PrimeNG). Il est inclus dans toutes les features.

Features

C'est un "super-module" qui contient toutes les "features" de l'application. Une feature correspondent à des blocs plus ou moins autonomes de l'application. Par exemple : le panneau d'administration, la gestion d'entités, le layout et le menu, etc.

Les features sont "lazy-loaded", ce qui permet d'améliorer le temps de démarrage de l'application et de répartir le code généré dans plusieurs fichiers.

Globalement, la structure ressemble à ceci :

PROJECT_ROOT
│   ...
│   prebuild.js                  <----------------- Script pour générer un fichier "app-manifest.json" avant les builds (numéro de version et date de build)
│   ...
│
├───e2e
└───src
    │   ...
    │   tsconfig.json
    │
    ├───app
    │   │   app-routing.module.ts      <----------- Routing principal de l'application
    │   │   app.component.spec.ts
    │   │   app.component.ts
    │   │   app.module.ts
    │   │   app.session.ts             <----------- Stocker des variables utilisables globalement dans l'application
    │   │
    │   ├───core
    │   │   │   core.initializer.ts    <----------- Exécuter du code lors du bootstrap de l'application
    │   │   │   core.interceptors.ts   <----------- Exécuter du code avant l'envoi d'une requête HTTP et après réception de la réponse (ex : remplir des Header HTTP automatiquement)
    │   │   │   core.module.ts
    │   │   │   core.services.ts       <----------- Module pour regrouper tous les services
    │   │   │
    │   │   └───services
    │   │           config.service.ts  <----------- De base, charge le assets/config/app-config.json et expose les valeurs via AppConfig
    │   │           logger.service.ts  <----------- Service de logging qui permet également d'envoyer les logs sur le serveur
    │   │
    │   ├───features
    │   │   │   features.module.ts
    │   │   │
    │   │   ├───home
    │   │   │       home-routing.module.ts
    │   │   │       home.component.spec.ts
    │   │   │       home.component.ts
    │   │   │       home.module.ts
    │   │   │
    │   │   └───layout
    │   │
    │   ├───models
    │   │       app-config.model.ts  <------------- Lié au fichier assets/config/app-config.json
    │   │
    │   └───shared
    │       │   shared.module.ts     <------------- Les modules partagés
    │       │
    │       ├───components
    │       └───pipes
    │
    ├───assets                       <------------- Répertoire de stockage des images, styles, etc
    │   ├───config
    │   │       app-config.json
    │   │
    │   ├───i18n
    │   ├───images
    │   └───styles
    │           app-styles.scss
    │           _variables.scss
    │
    └───environments                 <------------- Config des environnements
            environment.prod.ts
            environment.ts