TP 2
TP 2
TP 2
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
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)
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/platformbrowser';
import { NgModule } from '@angular/core';
import { RootComponent } from './root/root.component';
@NgModule({
declarations: [
RootComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [RootComponent]
})
export class AppModule { }
ng serve o
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 contactlist : contenant la liste des contacts
✓ Composant contactitem : représente un seul contact
✓ Composant contactadd : un formulaire pour ajouter un contact
✓ Composant contactedit : 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
<appmenu></appmenu>
<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 contactlist
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 :
<appmenu></appmenu>
<appcontactlist></appcontactlist>
Les autres composants seront créés dans les TPs suivants.
Figure 4 : Composant Menu + ContactList
5. Modification des templates
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
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="dflex flexcolumn flexmdrow alignitemscenter pb3 mb4 borderbottom">
<nav class="dinlineflex mt2 mtmd0 msmdauto">
<a class="me3 py2 textdark textdecorationnone" href="#">Hi User</a>
<a class="me3 py2 textdark textdecorationnone" href="#">Ajouter</a>
<a class="me3 py2 textdark textdecorationnone" href="#">Liste des
contacts</a>
</nav>
</div>
</header>
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 contactlist :
<main>
<div class="row rowcols1 rowcolsmd3 mb3 textcenter">
<div class="col">
<div class="card mb4 rounded3 shadowsm">
<div class="cardheader py3">
<h4 class="my0 fwnormal">Contact 1</h4>
</div>
<div class="cardbody">
<h1 class="cardtitle">Walid HAMMAMI</h1>
<ul class="listunstyled mt3 mb4">
<li>Phone : xx xxxxxx</li>
<li>Email : walid.ham@hotmail.com</li>
<li>Description : amis</li>
</ul>
<div class="matcardactions">
<button type="button" class="btn btnprimary">
12 Atelier Framework côté client
Edit
</button>
<button type="button" class="btn btndanger">
Delete
</button>
</div>
</div>
</div>
</div>
</div>
</main>
Figure 8 : template contactlist
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 <nomapp> : pour créer une application angular
✓ npm install : pour installer les paquets nécessaire
✓ ng generate component <nomcomposant> (ou : ng g c <nomcomposant>) : 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 : ‘appnomcomposant’ : nom de la balise à utiliser dans un template html
14 Atelier Framework côté client