TP 2

Télécharger au format pdf ou txt
Télécharger au format pdf ou txt
Vous êtes sur la page 1sur 10

TP 

2 : Les composants 

Objectifs : 
A la fin de ce TP l’étudiant sera capable de 
­ Créer un composant Angular 
­ Modifier un template 
­ Créer un prototype 

Application à réaliser 
Tout au long de déroulement de ces TPs on va développer une application Angular qui permet de 
gérer la liste des contacts. Cette application est organisée comme suite : 
Si tu veux afficher un contact, tu auras probablement une application (ContactManager), affichant 
un menu (Menu) avec l’utilisateur connecté (User), bouton ou lien HyperText (Ajouter) et un autre 
pour afficher la liste des contacts. Une liste des contacts : 

Contact Manager 

Menu  Liste des contacts 

User  Ajouter  Contacts  Contact 1  Contact 1  Contact 1 

5  Atelier Framework côté client 
Figure 2 : Les composants de l’application Contact Manager 
Un contact est caractérisé par : 

✓ Nom & prénom de la personne
✓ Email
✓ Numéro de téléphone
✓ Description
✓ Type (ami, travail, famille)

1. Création de l’application ContactManager


Créer une application Angular à l’aide de l’outil Angular CLI 

ng new ContactManager 
cd ContactManager 
npm install 

2. Exécution de l’application
Pour vérifier si l’application a été bien crée, exécuter cette commande 

ng serve –o 

6  Atelier Framework côté client 
3. Création d’un composant root

 Par défaut vous avez un composant principal AppComponent. Pour rendre notre projet plus 
structuré, créé un nouveau composant appelé root qui servira composant de base :  

ng generate component root 

Supprimez tous les fichiers AppComponent du dossier app/. Changez le fichier app.module.ts pour 
rendre RootComponent le composant de base. Voici à quoi ressemble le fichier app.module.ts : 

import { BrowserModule } from '@angular/platform­browser'; 
import { NgModule } from '@angular/core'; 

import { RootComponent } from './root/root.component'; 

@NgModule({ 
 declarations: [ 
   RootComponent 
 ], 
 imports: [ 
 BrowserModule 
 ], 
 providers: [], 
 bootstrap: [RootComponent] 
}) 
export class AppModule { } 

Enregistrez les modifications ci­dessus et démarrez l’application web à l’aide de la commande 


suivante : 

ng serve ­o 

L’application Web s’exécutera à http://localhost:4200 . 

Vérifiez si le composant root a été bien intégré dans votre application 

7  Atelier Framework côté client 
Figure 3 : Root Component 

4. Création des autres composants
Notre application ContactManager va contenir les composants suivants : 
✓ Composant principal root (déjà créé)
✓ Composant menu : contenant le menu de l’application
✓ Composant contact­list : contenant la liste des contacts
✓ Composant contact­item : représente un seul contact
✓ Composant contact­add : un formulaire pour ajouter un contact
✓ Composant contact­edit : un formulaire pour éditer un contact.

4.1. Création du composant menu 

A la racine de votre projet dans un invite de commande, tapez la commande suivante : 

ng generate component menu 

Pour intégrer le composant menu dans l’application. Modifiez le fichier root/root.component.html 


comme suite : 

<app­menu></app­menu> 
<p>root works!</p>

Vérifiez si le composant est bien intégré dans l’application. 

8  Atelier Framework côté client 
4.2­ création du composant contact­list 

La procédure est la même qu’on a utilisé pour créer le composant menu. Après modification du 
fichier roo/root.component.html est comme suite : 

<app­menu></app­menu> 
<app­contact­list></app­contact­list> 

Les autres composants seront créés dans les TPs suivants. 

Figure 4 : Composant Menu + ContactList 

5. Modification des templates

Notre application maintenant contient deux composants : root & menu. Il est conseillé qu’avant


commencer le développement, de créer un prototype de votre application avant de commencer le 
vrai développement. 
Pour rendre notre application ergonomique et facile à l’utilisation, on va utiliser Framework css 
bootstrap.  

5.1­ Bootstrap 
Pour utiliser bootstrap dans votre projet, il y a deux façons : 
a­ Installer Bootstrap depuis le dépôt npm 
Tapez cette commande pour ajouter Bootstrap à votre projet ­bien sûre exécuté cette commande à 
la racine de votre projet) : 
Pour Bootstrap 3 par exemple : 
npm install bootstrap@3.3.7

Pour la dernière version de Bootstrap (version 5) : 
npm install bootstrap

Bootstrap est installé dans le dossier node_modules/bootstrap 

9  Atelier Framework côté client 
Figure 5 : bootstrap 

b­ Alternative : Bootstrap local 
Comme alternative, vous pouvez également télécharger le CSS Bootstrap et l'ajouter localement à 
votre projet. J'ai téléchargé Bootstrap à partir du site Web et créé un dossier styles (même niveau 
que styles.css) : 

Figure 6 : intégration de bootstrap 
c­ Importer le fichier css 
Nous avons deux options pour importer le CSS de Bootstrap qui a été installé à partir de NPM : 
✓ Configurez angular.json :

"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.scss"

10  Atelier Framework côté client 
]

✓ Importez directement dans src/style.css ou src/style.scss :

@import '~bootstrap/dist/css/bootstrap.min.css'; 

Personnellement, je préfère importer tous mes styles dans src/style.css car il a déjà été déclaré dans 
angular.json. 
Pour plus d’information sur le framework css Bootstrap, veillez consulter cette page : 
documentations 

5.2­ Création d’un prototype de l’application 

Nous voulons créer un prototype (données statique) avant de commencer le développement. 
Ce prototype servira de base à la phase de conception de votre site web. 
Quelques raisons de ce choix. 
• Il est plus difficile et coûteux de faire des changements dans le code plutôt que dans un
prototype.
• Si vous êtes amené à travailler en équipe, il est plus facile de savoir qui fait quoi.
• Il existe de nombreux outils de prototypage.
• Il facilite l’évolution et l'amélioration de l’interface.
• Il est plus rapide et facile de présenter un prototype à un éventuel client.

a­ Template menu 

Modifiez le fichier menu.component.html comme suite : 

<header> 
 <div class="d­flex flex­column flex­md­row align­items­center pb­3 mb­4 border­bottom"> 
 <nav class="d­inline­flex mt­2 mt­md­0 ms­md­auto"> 
 <a class="me­3 py­2 text­dark text­decoration­none" href="#">Hi User</a> 
 <a class="me­3 py­2 text­dark text­decoration­none" href="#">Ajouter</a> 
 <a class="me­3 py­2 text­dark text­decoration­none" href="#">Liste des 
contacts</a> 
 </nav> 
   </div> 
</header> 

Sauvegardez le fichier et regardez l’effet de ce changement. 

11  Atelier Framework côté client 
Figure 7 : template menu 

Ici nous avons créé un menu contenant 3 éléments : 
✓ Hi User : Nom d’utilisateur connecté
✓ Ajouter : lorsqu’on clique dessus, un formulaire d’ajout d’un nouveau contact doit être
afficher
✓ Liste des contacts : pour aller à la liste des contacts

b­ Template liste des contacts 
Ajoutez le code suivant dans le template contact­list : 

<main> 
 <div class="row row­cols­1 row­cols­md­3 mb­3 text­center"> 
 <div class="col"> 
 <div class="card mb­4 rounded­3 shadow­sm"> 
 <div class="card­header py­3"> 
<h4 class="my­0 fw­normal">Contact 1</h4>
 </div> 
 <div class="card­body"> 
 <h1 class="card­title">Walid HAMMAMI</h1> 
 <ul class="list­unstyled mt­3 mb­4"> 
<li>Phone : xx xxxxxx</li>
<li>Email : walid.ham@hotmail.com</li>
<li>Description : amis</li>
 </ul> 
 <div class="mat­card­actions"> 
 <button type="button" class="btn btn­primary"> 

12  Atelier Framework côté client 
 Edit 
 </button> 
 <button type="button" class="btn btn­danger"> 
 Delete 
 </button> 
 </div> 
 </div> 
 </div> 
   </div> 
 </div> 

</main> 

Regardez l’effet de ce changement. 

Figure 8 : template contact­list 
Ajoutez maintenant 4 contacts à votre template, comme la capture écran suivante : 

13  Atelier Framework côté client 
Figure 9 : Prototype de l’application 

6. Résumé

✓ ng new <nom­app> : pour créer une application angular
✓ npm install : pour installer les paquets nécessaire
✓ ng generate component <nom­composant> (ou : ng g c <nom­composant>) : pour créer un
nouveau composant
✓ ng serve ­o : démarrer le serveur par défaut intégré dans Angular
✓ npm install bootstrap : pour installer la dernière version de bootstrap
✓ @import '~bootstrap/dist/css/bootstrap.min.css'; : importer bootstrap style
✓ selector : ‘app­nom­composant’ : nom de la balise à utiliser dans un template html

14  Atelier Framework côté client 

Vous aimerez peut-être aussi