2.4.2. Ajouter les modules de fonctionnalités

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.

C’est pourquoi nous allons ajouter des modules de fonctionnalités, propres à notre application. Je vous propose donc de compléter le module PublicModule, correspondant à la partie vitrine de notre application, avec les modules suivants :

• Un module pour la page d’accueil.
• Un module pour le formulaire d’inscription.
• Un module pour le formulaire de connexion.

Et le module ProtectedModule,qui contiendra véritablement le code métier d’AwesomeList :

• Un module pour la gestion du tableau de bord.
• Un module pour le planning de l’utilisateur.
• Un module pour l’édition de sa photo de profil.
• Un module pour l’édition des paramètres.
• Un 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 :

ng generate module public/home --module public
ng generate module public/register --module public
ng generate module public/login --module public 

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 cette architecture 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 !