Ecole Supérieure PRivée d’Ingénieurs de Monastir
TP7 : Node JS & Angular
Matière: Full Stack Classes: INFO-02
Enseignant :
Dr A. Mars Date: 12/2023
I. Objectifs TP :
Ce premier TP vise à :
- Utiliser Node JS avec Express JS
- Utiliser Node JS avec Postman
II. Mise en place :
1. Voici les étapes pour démarrer et tester un projet [Link] avec [Link]:
2. Installez [Link] sur votre ordinateur si ce n'est pas déjà fait. Vous pouvez le télécharger depuis le
site officiel de [Link] : [Link]
3. Ouvrez un terminal ou une invite de commande et créez un nouveau dossier pour votre projet.
4. Dans le dossier de votre projet, initialisez un nouveau projet [Link] en exécutant la commande
suivante :
npm init
5. Cette commande va créer un fichier [Link] qui contiendra les informations de votre projet et
ses dépendances.
6. Installez [Link] en utilisant la commande npm install express.
7. Créez un fichier [Link] ou tout autre nom de fichier pour le point d'entrée de votre application
[Link]. Ajoutez le code suivant pour initialiser votre application [Link] :
const express = require('express');
const app = express();
const port = 3000;
[Link]('/', (req, res) => {
[Link]('Hello World!');
});
[Link](port, () => {
[Link](`Example app listening at [Link]
});
8. Ce code crée une application [Link] qui écoute sur le port 3000 et renvoie "Hello World!"
lorsque vous accédez à [Link]
9. Exécutez votre application en utilisant la commande node suivi du nom de votre fichier. Par
exemple, si votre fichier s'appelle [Link], vous pouvez exécuter la commande suivante :
10. Tout d'abord, vous devez installer React Router. Vous pouvez le faire en utilisant npm en exécutant
la commande suivante dans votre terminal :
node [Link]
11. Testez votre application en accédant à [Link] dans votre navigateur. Vous devriez voir
"Hello World!" affiché sur la page.
12. Pour ajouter des routes à votre application, vous pouvez utiliser la méthode [Link]() pour les
requêtes GET, [Link]() pour les requêtes POST, [Link]() pour les requêtes PUT, [Link]() pour
les requêtes DELETE, et ainsi de suite. Par exemple, pour ajouter une route pour la page "/about",
vous pouvez ajouter le code suivant avant [Link]() :
[Link]('/about', (req, res) => {
[Link]('About Page');
});
III. Test avec PostMan :
Dans cette étape, vous allez créer un point d'accès qui renvoie une liste de tous les films stockés dans
un fichier JSON.
Considérons que vous disposez d'une base de données JSON de films dans un fichier nommé
[Link] qui se trouve dans le même répertoire que votre fichier [Link].
Exemple :
[
{
"id": 1,
"title": "Star girl"
},
{
"id": 2,
"title": "Five feet apart"
},
{
"id": 3,
"title": "Titanic"
},
{
"id": 4,
"title": "Spiderman"
}
]
13. Tout d'abord, vous devez lire le contenu du fichier, puis renvoyer les données obtenues au client qui
a envoyé la requête GET à votre serveur.
Nous utiliserons le module fs pour lire le fichier. La procédure à suivre est décrite ci-dessous.
const fs = require('fs')
[Link]("/list_movies", (req, res) => {
[Link](__dirname + '/' + '[Link]', 'utf8', (err, data) => {
[Link](data);
});
});
1. Pour se connecter à [Link] via Axios, vous devez suivre les étapes suivantes :
Installez le package Axios dans votre projet Angular. Vous pouvez le faire en exécutant la
commande suivante dans votre terminal :
npm install axios
2. Importez le module Axios dans votre composant Angular. Vous pouvez le faire en
ajoutant la ligne suivante au haut de votre fichier de composant :
import axios from 'axios';
3. Créez une instance d'Axios. Vous pouvez le faire en utilisant la fonction create() d'Axios.
const axios = [Link]();
4. Configurez l'instance d'Axios. Vous pouvez le faire en définissant des options telles que
l'URL de base, les en-têtes ou les paramètres.
[Link] = '[Link]
5. Effectuez une requête HTTP. Vous pouvez le faire en utilisant les méthodes get(), post(),
put() ou delete() d'Axios.
[Link]('/users').then((response) => {
// Traitez la réponse
});
Exemple
Voici un exemple de connexion à [Link] via Axios
import { Component, OnInit } from '@angular/core';
import { axios } from 'axios';
@Component({
selector: 'my-app',
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})
export class AppComponent implements OnInit {
constructor() {}
ngOnInit() {
[Link]('/users').then((response) => {
[Link] = [Link];
});
}
}
Dans cet exemple, nous créons une instance d'Axios et la configurons avec une URL de base. Nous
effectuons ensuite une requête HTTP GET sur l'URL /users. La réponse est stockée dans la propriété users
du composant.
Options de requête
Axios prend en charge de nombreuses options de requête qui vous permettent de contrôler le comportement
de la requête. Vous pouvez trouver une liste complète des options de requête dans la documentation
d'Axios.
Récupération de la réponse
La réponse d'une requête Axios est un objet de type Response. Cet objet contient des informations sur la
requête, telles que le code d'état HTTP, le corps de la réponse et les en-têtes.
Pour récupérer la réponse d'une requête, vous pouvez utiliser la propriété data de l'objet Response. La
propriété data contient le corps de la réponse sous forme de tableau, d'objet ou de chaîne de caractères.
Erreurs
Si une requête échoue, Axios lève une exception de type AxiosError. Vous pouvez traiter les erreurs en
utilisant un gestionnaire de rejets.
Voici un exemple de traitement des erreurs :
[Link]('/users').then((response) => {
// Traitez la réponse
}).catch((error) => {
// Traitez l'erreur
});
Exercice 2 :
Créez une application Angular qui permet à l'utilisateur de créer un blog. Les articles du blog doivent être
stockés dans un serveur [Link].
a. Commencez par créer un plan pour votre application. Cela vous aidera à vous organiser et à éviter de
vous perdre.
b. Utilisez des composants Angular pour structurer votre application. Cela vous aidera à garder votre
code organisé et maintenable.
c. Utilisez les services Angular pour accéder aux données et aux fonctionnalités de votre serveur
[Link]. Cela vous aidera à garder votre code propre et réutilisable
Ressources supplémentaires qui peuvent vous aider :
Documentation Angular: [Link]
Documentation [Link]: [Link]
Tutoriels Angular: [Link]
Tutoriels [Link]: [Link]
