Structurer l’application en modules

Création du projet
Commencez par créer un nouveau projet Angular appelé boutique :
ng new boutique --routing --style=css --skip-tests

Question 1
A quoi sert chacune des 3 options utilisées avec la commande ng new ?
NB. pour avoir de l’aide concernant la commande ng, exécutez la commande : ng help
Pour plus de détails, exécutez : ng [command_name] --help
par exemple : ng new --help

Le concept de module
Angular permet de mettre en place des applications web modulaires afin de mieux structurer le code
et de faciliter la maintenance, la réutilisation et le partage. Un module Angular ou NgModule est un
mécanisme permettant de regrouper des composants, des services, directives, pipes etc..., définir
leurs dépendances, et définir leur visibilité. Les NgModules peuvent importer des fonctionnalités
exportées depuis d'autres NgModules et exporter quelques fonctionnalités pour que d'autres
NgModules puissent les utiliser.

Chaque application Angular comprend au moins un module : le module racine ou root, appelé par
défaut AppModule. Bien qu'une petite application puisse avoir un seul NgModule, la plupart des
applications ont plusieurs modules de fonctionnalités. Le modules d’une application sont
généralement imbriqués de façon à former une arborescence dont le root module AppModule est la
racine.
AppModule est aussi appelé module bootstrap puisqu’il permet de lancer l’application.
L’application fait aussi appel à des modules externes provenant de bibliothèques.

Description de cette étape

Vous allez dans ce qui suit créez quelques modules de fonctionnalités (feature modules) pour
votre application. La commande ng permettant de générer un module est la suivante :
ng generate module <nom_module>
On peut passer certaines options supplémentaires à cette commande, afin de mieux paramétrer le
module qui est généré.

Remarques
Très important : A partir de cet instant, placer vous toujours dans le répertoire racine de votre
projet (ici le répertoire boutique) lorsque vous allez lancer la commande ng pour ne pas avoir des
erreurs d’exécution à cause de chemins erronés et pour ne pas avoir un comportement inattendu
(fichiers et dossiers placés à des endroits inattendus), surtout parce que ng ne traite pas les

1
chemins de façon classique : tout en étant sous votre répertoire boutique, les chemins que vous
indiquez sont calculés à partir du répertoire src/app.

De plus, une bonne pratique est de donner des noms en minuscule aux éléments (modules,
composants, …) créés par ng generate. Si le nom est composé par deux mots, séparez les par un
tiret (par exemple home-banner). La commande ng fera le nécessaire (transformation en majuscule
des initiales, ajout de suffixe,... ) pour donner des noms adéquats au éléments créés selon ses
conventions de nommage. Par exemple, si vous créez un module que vous appeler test, le nom du
module créé dans le code sera TestModule, vous pouvez ensuite très bien donner le même nom
test à un composant et ng le nommera TestComponent (mais vous allez continuez à les appeler
test si vous leur faites ultérieurement appel dans une commande ng).

Voici l’arborescence de modules à créez à cette étape :

Les deux modules client et admin correspondent respectivement à l’espace Client (vitrine de la
boutique) et à l’espace d’administration. Ces deux modules auront pour parent le module racine
(AppModule), et auront chacun des sous-modules.
Par défaut, la commande ng crée un dossier pour chaque nouveau module (ce n’est pas le cas si la
commande --flat est spécifiée). Dans un but d’organisation et de lisibilité du code, il est
recommandé de placer le dossier d’un sous-module dans le dossier de son module parent : il faut
donc spécifier le chemin du module pour ne pas avoir tous les modules dans le dossier app.

Modules de fonctionnalités de haut niveau : client, admin

Pour créez le module client, lancez la commande suivante :
ng generate module client --routing --module=app
L’option --routing permet de créer un module de gestion de routage associé au module client. Le
routage permet la navigation entre les différents composants de page de l’application.

2
L’option --module permet de spécifier un module parent du module à créer (ici le module racine
app).

Question 2
a) A quel emplacement a été placé le dossier client du module client ?

b) Comment s’appelle le fichier du module client ? Et le module de routage qui lui est
associé ?

c) Quel code a été ajouté au module parent app (src/app/app.module.ts) ? Donnez juste les
lignes ajoutées suite à l’ajout du sous-module client.

Lancez la même commande mais cette fois pour générer le module admin comme sous-module de
app et lui associer un module de routage.

Modules de fonctionnalités métiers

Dans un but de mieux organiser les modules de fonctionnalités de haut niveau, les modules de
fonctionnalité métiers spécifiques à l’application seront ajoutés comme sous-modules des premiers.
Par exemple, pour créer un module home comme sous-module de client tout en plaçant son dossier
sous le dossier src/app/client, il faut spécifier le chemin vers le dossier (client/home) comme suit :
ng generate module client/home --module=client --routing
NB. garder ce chemin tel qu’il est et ne pas ajouter le préfixe src/app : en effet, ng se charge de
l’ajouter. Mais bien sûr il faut se placer dans le dossier boutique comme mentionné précédemment
dans les remarques.
Générez les 4 modules suivants :
Sous le module client : home (voir commande ci-haut) et about
Sous le module admin : homeadm et gestprod

Question 3
a) Donnez les commandes que vous avez lancé pour générer ces modules.

b) Quels sont les dossiers et/ou les fichiers du module homeadm ? Donnez leurs chemins
exacts.

c) Quel code a été ajouté aux deux modules parents client et admin ? Donnez juste les lignes
ajoutées suite à l’exécution des commandes.

Au fur et à mesure de l’avancement de votre projet, vous aurez besoin de créer d’autres modules
que vous ajouterez à l’arborescence initiale que vous venez de mettre en place.