Episode 4 : L’architecture modulaire mise en place précédemment est suffisamment générique pour démarrer un nouveau projet, quel que soit ça taille. Mais ensuite, pour vos besoins métiers, comment intégrer vos modules de fonctionnalités au sein de cette architecture existante ?

Nous avons déjà ajouté quatre modules principaux à notre application. Si vous avez bien remarqué, ces modules pourraient concerner n’importe quelle application avec une zone publique et privée, et ne sont pas spécifiques à notre application. Nous devons maintenant ajouter les modules nécessaires au code métier de notre application.

Nous allons ajouter des modules de fonctionnalités, propres à notre application. Je vous propose donc de compléter le module PublicModule que nous avons mis en place pendant l’épisode 3, correspondant à la partie vitrine de notre application, avec les modules suivants :

  • Un premier module pour la page d’accueil.
  • Un second module pour le formulaire d’inscription.
  • Un troisième module pour le formulaire de connexion. 

Et le module ProtectedModule, qui contiendra véritablement le code métier d’Awesome List (C’est le nom de l’application que l’on va réaliser dans cette petite série sur Angular. Il s’agit d’une sorte de super « to-do list », basée sur la psychologie humaine, afin d’aider les utilisateurs à être plus efficaces dans leur travail) :

  • Un premier module pour la gestion du tableau de bord.
  • Un second module pour le planning de l’utilisateur.
  • Un troisième module pour l’édition de sa photo de profil.
  • Un autre module pour l’édition des paramètres.
  • Un dernier module pour gérer une journée de travail.

Nous devons donc ajouter un nouveau module, pour chaque page présente dans ces différents espaces. En termes de code informatique, voilà ce que cela donne pour nous :

// Modules de fonctionnalités publique
ng generate module public/home --module=public 
ng generate module public/register--module=public 
ng generate module public/login --module=public  

// Modules de fonctionnalités protégés
ng generate module protected/dashboard –-module=protected 
ng generate module protected/parameters –-module=protected 
ng generate module protected/planning –-module=protected 
ng generate module protected/profil –-module=protected 
ng generate module protected/workday –-module=protected 

Nous générons plusieurs modules supplémentaires, spécifiques à notre application. Nous avons préfixé le nom de nos modules par public ou protected, afin de générer nos modules dans les sous-dossiers correspondants au module auxquels ils appartiennent. 

Je me permet d’attirer à nouveau votre attention sur le paramètre module que nous passons aux commandes ci-dessus. Grâce à ce paramètre, Angular CLI s’occupe pour nous de générer un nouveau module, et de l’importer dans le module parent. Sans ça, notre module orphelin ne servira pas à grand-chose dans l’application. Pensez à ne pas l’oublier, et aller jetez un oeuil au fichier du ProtectedModule ou du PublicModule. Vous pourrez apercevoir les importations des modules enfants dans chacun de ses modules.

Pour le module ProtectedModule, vous devriez obtenir l’architecture suivante dans votre éditeur de code : 

Cette structure est similaire pour le module en charge de la partie vitrine de votre application. Il nous reste maintenant une ou deux choses à réorganiser. Mais pas d’inquiétudes, il s’agit surtout d’anticiper la suite ! 

Factoriser les importations de ses modules 

Dans l’épisode 3, nous avons généré un module nommé SharedModule. Nous pouvons déjà nous en servir, même si notre application est encore très limitée. Ce module va nous servir à factoriser les importations communes des autres modules. 

En fait, Angular CLI génère chaque nouveau module en important automatiquement le module CommonModule. Il s’agit en quelque sorte du module “minimum” qui doit être importer dans chacun de vos nouveaux modules (excepté le module racine). Nous allons factoriser cette importation dans le SharedModule, afin d’anticiper les futurs développements. 

Imaginons que plus tard, nous ajouterons des formulaires dans plusieurs modules différents. Nous serons obligés d’importer le module natif ReactiveFormsModule à chaque fois. Mais grâce à la factorisation que nous allons faire, il suffira de d’importer une seule fois le ReactiveFormsModule dans le SharedModule, et il sera directement disponible pour tous les autres modules (enfin, tous les autres modules qui importent le SharedModule). 

Bon, occupons-nous de cette factorisation. La première étape est de réexporter le module CommonModule que nous voulons factoriser, depuis le SharedModule. Ouvrez donc le fichier shared.module.ts, et ajoutez l’exportation suivante :

01 import { NgModule } from '@angular/core'; 
02 import { CommonModule } from '@angular/common'; 
03 
04 @NgModule({ 
05   declarations: [], 
06   imports: [ 
07     CommonModule 
08   ], 
09   // Ajouter l’exportation suivante : 
10   exports: [ 
11     CommonModule 
12   ] 
13 }) 
14 export class SharedModule{} 

Ensuite, dans tous les modules concernés, nous allons remplacer l’importation du CommonModule par notre SharedModule. Les modules concernés sont : 

  • Les modules PublicModule et ProtectedModule
  • Les autres modules : HomeModule, LoginModule, RegisterModule, DashboardModule, ParametersModule, PlanningModule, ProfilModule et WorkdayModule

Nous ajoutons donc l’importation du SharedModule dans le premier module PublicModule

01 import { NgModule } from '@angular/core'; 
02 // Remplacer l’importation du CommonModule par cette ligne : 
03 import { SharedModule } from 'src/app/shared/shared.module'; 
04 import { PublicRoutingModule } from './public-routing.module'; 
05 
06 @NgModule({ 
07  declarations: [], 
08  imports: [ 
09   // Impoter le SharedModule plutôt que le CommonModule : 
10   SharedModule, 
11   PublicRoutingModule 
12  ] 
13 }) 
14 export class PublicModule { } 

Ensuite, je vous laisse le soin d’appliquer les mêmes modifications aux autres modules ! Vérifier ensuite que votre application fonctionne correctement dans votre navigateur. Même pas peur !

Une fois que vous aurez terminé, nous aurons une base intéressante pour la suite des développements de notre application. Nous aurons juste à répartir nos futurs modules, composants, services, ou directives, dans les différents modules que nous avons mis en place !

Dans le prochain épisode, nous verrons comment ajouter une librairie de style dans notre application Awesome List. Nous ajouterons la célèbre librairie Bootstrap, et nous verrons comment l’intégrer dans notre projet généré avec Angular CLI !


Si vous n’avez pas la patience de chercher les articles sur le blog, je peux vous les envoyer dans l’ordre, directement dans votre boîte mail. En fait, cet article fait partie d’une série de 10 articles extraits de l’ouvrage Maîtriser Angular pour l’entreprise.