Créer l’arborescence des

composants
Notion de composant Angular
L'un des principaux concepts d'Angular est les composant (component). Les composants
représentent les briques élémentaires qui constituent l’application. Un composant contrôle une
portion de l’affichage graphique de l’application appelée vue. Une vue peut être par exemple
l'ensemble de la page web, une fenêtre de tchat, une barre de navigation, etc. A chaque composant
sont associés une classe qui définit sa logique (fichier typescript) et un template html.
Une application Angular possède toujours un composant racine appelé conventionnellement
AppComponent. Le fichier typescript app.component.ts contient la classe de AppComponent et le
fichier app.component.html est son template (voir TP1).
Le AppComponent appartient au module racine AppModule : c’est le composant AppModule qui
est chargé au démarrage de l’application.
L’application Angular est vue comme un arbre de composants dont le AppComponent est la racine.
NB. Chaque composant est isolé des autres composants. Il n'hérite pas implicitement des attributs
des composants parents.

Question 1
Afficher le fichier de déclaration du module AppModule. Quelle propriété permet d’indiquer au
module AppModule que le point de démarrage de l’application est AppComponent?
NB. une telle propriété ne doit pas être présente dans un module autre que le AppModule.

Création des composants de page

A chaque page de l’application correspond un composant de page qui permet de la représenter et
auquel seront imbriqués les autres éléments de la page pour former une arborescence.
NB. il est recommandé de donner à vos composants de page le même nom que le module auxquels
ils appartiennent. Par exemple, le composant de page du module home sera créé avec le nom home
(ng lui donnera alors le nom HomeComponent dans le code). Cela vous évitera de perdre du temps
à chercher le composant de page parmi tous les composants du module (c’est à dire les autres
composants de la page).
Lancez la commande suivante pour créer le composant ClientComponent :
ng generate component client/client --module client --export --flat

1
Cette commande permet de créer le composant ClientComponent dans le dossier src/app/client.
Grâce à l’option --module, ce composant a pour parent le module client (si cette option n’est pas
utilisée, le composant fera partie du AppModule). l’option --flat permet de ne pas créer un dossier
pour placer les fichiers du composant (les placer directement sous le chemin spécifié). Le
composant est exporté par son module parent pour qu’il puisse être importé et utilisé depuis
d’autres modules.
Et pour générer le module home :
ng generate component client/home/home --module home --export --flat

Question 2
Quelle sont les commandes permettant de générer le reste des composants de page (admin, about,
homeadm, gestprod) ? Les chemins choisis doivent respecter la recommandation ci-haut.
Lancer les commandes indiquées dans la réponse à la question 2.
L’arborescence sous le répertoire admin devrait être comme suit :

Création des composants de la page home

Sur la page d’accueil (home) de la boutique doit s’afficher une liste de produits.
Voici l’organisation proposée pour la page home :

2
 • home : c’est le composant de page (ou composant principal) de la page d’accueil, vous
l’avez déjà créé (voir paragraphe précédent). Le reste des composants ci-dessous sont
imbriqués dans ce module.
• home-banner : ayant pour rôle d’afficher la bannière,
• home-product-detail : ayant pour rôle d’afficher le détail d’un produit,
• home-products : qui a pour rôle de récupérer les données des produits à afficher.
Les composants home-banner et home-product-detail sont des composants dont le rôle se limite à
l’affichage des données : ils sont dits dump (idiots), alors que home-products est dit composant
smart (intelligent) car il est responsable de la récupération des données fournies par un service.
NB. Selon l’architecture populaire smart and dump, les composants de page sont censés être un
assemblage de composants smart (intelligents), qui s’occupent eux-mêmes de récupérer les données
dont ils ont besoin, et peuvent ensuite éventuellement transmettre ces données à des
composants dumb (idiot), qui s’occupent uniquement de l’affichage.
Voici une commande permettant de créer le composant HomeBannerComponent appartenant au
module home :
ng generate component client/home/home-banner --module home

Question 3
Quelles sont les différences entre les options de cette commande et les commandes utilisées pour
créer les composants de page ? Comment peut on justifier ces différences ?

Créez de la même façon les deux autres composants de la page d’accueil.

Question 4
a) Donnez le chemin vers le fichier de déclaration du composant home-product-detail.
b) Quel fichier a été mis à jour par chacune des 4 commandes ? Donnez les lignes du code
ajoutées à ce fichier.

Voici à l’instant le contenu du dossier src/app/client/home (répertoire du module home) :

3
Redirection de la page d’accueil de Angular
Pour que Angular affiche par défaut la vue (page) home associée au composant HomeComponent,
ajouter dans le fichier du module principal de configuration des route app-routing.module.ts une
route au tableau routes :
const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' }
];

Puis ajoutez une route dans le fichier home-routing.module.ts :

const routes: Routes = [
{ path: 'home', component: HomeComponent }
];

Dans le fichier template de AppComponent (app.component.html) effacer tout le code et le

remplacer par :

<router-outlet></router-outlet>
Démarrer votre serveur de développement (ng serve --open).
La console indique une erreur dans home-routing.module.ts indiquant que le nom
'HomeComponent' est introuvable. La solution est simple : il suffit d’importer le composant
HomeComponent dans le module HomeRoutingModule :

4
Ajouter alors l’import suivant à la section des import du fichier home-routing.module.ts :
import { HomeComponent } from './home.component';
Le chemin vers le composant indique que le fichier du composant est sous le même répertoire que
le fichier home-routing.module.ts.
NB. Le composant HomeComponent peut être importé dans un module externe (ici
HomeRoutingModule) car il est exporté par le module HomeModule : lors de la création de ce
composant, vous avez utilisé l’option --export et une ligne d’export a été ajoutée par la commande
ng dans le fichier du module (même si ce n’est pas le cas, vous pouvez à tout moment ajouter la
ligne d’export manuellement).
Les reste des composants du module home (HomeBannerComponent, …) ne sont pas exportés par
le module Home Module donc ce sont des composants non visibles à l’extérieur du module.

Question 5
Donnez la ligne du fichier de déclaration du module HomeModule qui permet d’exporter le
composant HomeComponent.

Voici comment s’affiche l’application sur le serveur de développement :

Question 6
Dans quel fichier de template (html) est écrit le texte affiché sur la page « home works » ?