Scribd
Importer
70 vues3 pages

TP3 - Angular (Service)

Ce document décrit la création d'un service Angular et son injection dans une application. Il explique comment créer un service, l'ajouter au module, et l'utiliser dans un composant pour récupérer et ajouter des données.

Transféré par

Hamed Kasmi
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
70 vues3 pages

TP3 - Angular (Service)

Ce document décrit la création d'un service Angular et son injection dans une application. Il explique comment créer un service, l'ajouter au module, et l'utiliser dans un composant pour récupérer et ajouter des données.

Transféré par

Hamed Kasmi
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 3

Angular: Front-End JavaScript Framework TP3

TP n°3
LES SERVICES ANGULAR

Objectifs et résultats :

Dans ce troisième atelier, vous allez créer un nouveau service Angular et l'injecter dans
votre application. Vous utiliserez alors le service dans les composants. À la fin de cet atelier,
vous serez en mesure de :
 Implémentez un service et injectez-le dans votre application
 Utiliser le service dans un composant

1- Créer un service

1.1. Ajouter dans le dossier src/app/services le service :

 AboutService

Cela créera deux nouveaux fichiers dans le dossier des services nommés :

 about.service.ts
 about.service.spec.ts.
1.2. Ensuite, ouvrez le fichier about.service.ts et mettez-le à jour comme indiqué ci-
dessous :

1.3. Déclarer le service dans le fichier app.module.ts

Enseignant : Mohamed Anouar DAHDEH Page 1 sur 3


Angular: Front-End JavaScript Framework TP3

2- Utilisation de service

Maintenant, mettez à jour le fichier about.component.ts pour utiliser le service


comme suit :

3- Autres fonctions :

3.1. Ajouter au service AboutService les méthodes suivantes :


 getAllComments() : permet de récupérer la liste des commentaires à partir du
tableau comments
 addComment (c) : permet d’ajouter un commentaire c au tableau comments

3.2. Modifier le fichier about.component.ts afin d’utiliser ces deux nouvelles méthodes

4- Ajout d’une classe Modèle :

4.1. Créer le dossier shared sous src/app, dans lequel vous ajoutez le fichier comment.ts
4.2. Modifier le fichier comment.ts comme suit :

Enseignant : Mohamed Anouar DAHDEH Page 2 sur 3


Angular: Front-End JavaScript Framework TP3

4.3. Utiliser la classe Comment dans les fichiers about.service.ts et about.component.ts

Indication :

//comments Array
comments : Comment []= [] ;

Enseignant : Mohamed Anouar DAHDEH Page 3 sur 3

Vous aimerez peut-être aussi