Vous êtes sur la page 1sur 8

Institut Supérieur des Etudes Technologiques de Sousse

Département de Technologies de l’Informatique


Matière : Atelier FrameWork Côté Client Classe : DSI 2.1
A. U. : 2019/2020 – Semestre 1

Atelier 3 : Modules et Routage


Création des modules et composants des pages

Les applications Angular sont modulaires. Angular possède son propre système de
modularité appelé NgModule. Les NgModules sont des conteneurs pour un bloc
cohésif de code dédié à un domaine d'application, un flux de travail ou un ensemble
de fonctionnalités étroitement liées. Ils peuvent contenir des composants, des
fournisseurs de services et d'autres fichiers de code dont la portée est définie par le
NgModule contenant. Ils peuvent importer des fonctionnalités exportées depuis
d'autres NgModules et exporter des fonctionnalités sélectionnées pour les utiliser avec
d'autres NgModules.

Chaque application Angular a au moins une classe NgModule, le module racine, qui
est conventionnellement nommé AppModule et réside dans un fichier nommé
app.module.ts. Vous lancez votre application en démarrant le module racine
NgModule.

Bien qu'une petite application puisse avoir un seul NgModule, la plupart des
applications ont beaucoup plus de modules de fonctionnalités. Le module racine
NgModule d'une application est nommé ainsi car elle peut inclure des NgModules
enfants dans une hiérarchie de n'importe quelle profondeur.

Un NgModule est défini par une classe décorée avec @NgModule (). Le décorateur
@NgModule () est une métadonnée, dont les propriétés décrivent le module. Les
propriétés les plus importantes sont les suivantes :

• declarations : Les composants, directives et pipes appartenant à ce NgModule.


• exports : Le sous-ensemble de déclarations qui devrait être visible et utilisable
dans les modèles de composant des autres NgModules.
• imports : Les classes exportées depuis d'autres modules, dont on a besoin dans
ce module.
• providers : Fournisseurs de services invoqués dans ce NgModule. Ces services
deviennent accessibles dans toutes les parties de l'application. (Il est recommandé de
spécifier des fournisseurs au niveau du composant)
• bootstrap : Cette propriété ne concerne que le module racine. Il faut y
renseigner le
• composant racine, c'est-à-dire le composant qui sera affiché au lancement de
l’application.
Voici une définition simple de NgModule racine.

1
src/app/app.module.ts

import { NgModule } from '@angular/core';


import { BrowserModule } from '@angular/platform-browser';
@NgModule({
imports: [ BrowserModule ],
providers: [ Logger ],
declarations: [ AppComponent ],
exports: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }

1. Créer un répertoire site dans src/app


2. Avec la console, se placer à la racine du projet et taper :
ng g module site\home
ng g module site\about
ng g module site\films
Chacun des trois modules représente une page de notre application.
3. Ajouter ces trois modules dans le module principal qui se trouve dans le
répertoire app et se nomme app.module.ts. Par exemple, pour le module
HomeModule ajouter :
import { HomeModule } from './site/home/home.module';
et
HomeModule dans partie imports.
4. Ajouter les composants qui serviront à afficher chacune des pages :
ng g component site\home
ng g component site\about
ng g component site\films

Nous devons avoir la structure ci-dessous.

2
src

app

site

about films home

about.component.html films.component.html home.component.html

about.component.ts films.component.ts home.component.ts

about.module.ts film.module.ts home.module.ts

5. Vérifier que les composants dans les modules de chacune des pages ont été
importés dans le module associé. Chacune des pages a un module et un
composant.
Par exemple dans le module HomeModule, on a :
import { HomeComponent } from './home.component';
...
declarations: [
HomeComponent
],
...

Mise en place des Routes

Le module RouterModule d’Angulaire permet de naviguer d'une vue à l'autre.

6. Indiquer dans le module principal que nous allons utiliser des routes en ajoutant
les lignes :
import { RouterModule } from '@angular/router';
imports: [
...
RouterModule.forRoot([]), ...

7. Ajouter les routes aux modules enfants :


• Le module racine ne contiendra pas les routes ceci pour séparer au maximum les
composants/modules.
• Le module racine chargera les routes indiquées par ses enfants.

3
• Pour configurer des routes dans des modules autre que le module racine nous
devons utiliser la méthode forchild :
Exemple : RouterModule.forChild( [ { path: 'ROUTE_VERS_COMPOSANT',
component: COMPOSANT_A_CHARGER } ] )
Dans le module HomeModule, ajouter les lignes suivantes :
import { RouterModule } from '@angular/router';
@NgModule({
imports: [
...
RouterModule.forChild([
{ path: '', component: HomeComponent }
])
Dans le module AboutModule, ajouter les lignes suivantes :
import { RouterModule } from '@angular/router';
@NgModule({
imports: [
...
RouterModule.forChild([
{ path: 'about', component: AboutComponent }
])
Faire de même pour le module FilmsModule.
8. Indiquer le point où se chargeront les templates des composants des pages

app.component.html
<h1>{{title}}</h1>
<router-outlet></router-outlet>
9. Tester les routes :

4
10. Reprendre ce qui a été fait et ajouter un module errors qui gère les pages pour
les erreurs (404, ou tout autre nom de page)

Il est possible de rediriger toutes les adresses inexistantes vers les pages d’erreurs.
Dans ce dernier cas, le module erreur doit être le dernier à être chargé par le
module root.
RouterModule.forChild([
{ path: '404', component: ErrorsComponent },
{ path: '**', redirectTo: '/404'}
])

5
Ajout de Bootstrap

Depuis le site https://getbootstrap.com/, ajouter la librairie Bootstrap CDN (fichiers


CSS seulement) dans la balise <head></head> du fichier index.html :
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/b
ootstrap.min.css" integrity="sha384-
ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw
1T" crossorigin="anonymous">

Cela va permettre de présenter facilement les différents éléments et de ne pas se


préoccuper du CSS.

Ajout d’un menu

11. Créer un module appelé shared dans le répertoire site\shared. Créer ensuite un
composant navmenu aussi dans le répertoire site\shared.

Le répertoire \shared\ contiendra les éléments partagés

12. Ajouter shared.module.ts au module Root.

13. Ajouter le composant navmenu au module shared.module.ts.

• Nous ajoutons aussi : exports: [NavmenuComponent]


• exports: [composant, module, … ] Indique que le module exporte des
éléments vers le module parent. Le module parent pourra donc utiliser
directement les éléments exportés.
14. Ajouter le composant navmenu au template principal. Ainsi le menu s’affichera
sur toutes les pages.

6
15. Vérifier que le composant navmenu s’affiche :

16. Importer RouterModule à shared.module.ts. RouterModule dispose de


directives pour faire des menus (routerLink).

17. Modifier le template navmenu.component.html pour y ajouter un menu avec


les liens vers les différentes pages :

<a [routerLink]="['/']">Accueil</a>
<a [routerLink]="['/films']">Films</a>
<a [routerLink]="['/about']">A propos</a>

• Utiliser les classes de Bootstrap qui permettent de mettre facilement en


forme un menu.

18. Vérifier que le menu fonctionne.

7
8