TP (Angular)
1. Installer [Link] et npm
Angular nécessite [Link] et npm (le gestionnaire de paquets de Node) pour
fonctionner.
• Téléchargez et installez [Link] depuis le site officiel. L'installateur inclut npm,
le gestionnaire de paquets de [Link].
• Vérifiez que [Link] et npm sont correctement installés en exécutant ces
commandes dans votre terminal ou invite de commandes :
Cela affichera la version de [Link] et de npm installée.
2. Installer Angular CLI
Angular CLI (Command Line Interface) est un outil permettant de créer, de développer
et de gérer des applications Angular de manière simplifiée.
Pour installer Angular CLI, ouvrez votre terminal et exécutez la commande suivante :
Cela installe Angular CLI globalement sur votre machine.
3. Créer un nouveau projet Angular
Une fois Angular CLI installé, vous pouvez créer un nouveau projet Angular en
exécutant la commande suivante :
Ou bien la commande suivante pour désactiver la fonctionnalité des composants
autonomes (si on ne se base pas sur les composants autonomes il va falloir la
désactiver à la création de chaque composant) :
Vous serez invité à répondre à quelques questions sur la configuration du projet, telles
que l'ajout du routage (choisissez "Yes" si vous voulez utiliser le routage) et le style CSS
(vous pouvez choisir entre CSS, SCSS, etc.).
Cela crée un dossier product-interface-angular contenant la structure du projet
Angular.
4. Lancer l'application Angular
Pour vérifier si tout fonctionne bien, Accédez au dossier du projet créé et lancer le
serveur de développement intégré d'Angular :
Cela démarre le serveur de développement sur [Link] Ouvrez
votre navigateur et allez à cette adresse pour voir votre application Angular en action.
5. Explorer la structure du projet
Une fois votre projet créé, vous allez voir une structure de dossiers et de fichiers. Voici
les dossiers et fichiers clés :
• src/app : C'est ici que réside le code de votre application (composants,
services, etc.).
• [Link] : Ce fichier contient la configuration de votre projet Angular.
• [Link] : Il contient les dépendances du projet, y compris Angular et
d'autres bibliothèques.
• [Link] : Fichier de configuration pour TypeScript.
6. Créer un composant Angular
Un composant Angular est l'unité de base d'une application Angular. Pour créer un
nouveau composant, exécutez cette commande :
Cela crée un nouveau composant avec les fichiers nécessaires : mon-
[Link], [Link], mon-
[Link], et [Link].
Dans le cas de - -standalone=false on aura une mise à jour automatique du fichier
[Link]
7. Modifier le composant
Ouvrez le fichier src/app/composant-1/[Link] et modifiez le
code du composant pour ajouter des fonctionnalités ou du texte. Par exemple, vous
pouvez modifier le [Link]
8. Étapes pour utiliser plusieurs composants dans une seule page
HTML :
8.1. Créez les composants
Créer deux composants appelés composant-1 et composant-2, exécutez les
commandes suivantes dans votre terminal (assurez-vous que vous êtes dans le
répertoire de votre projet Angular) :
ng generate component composant-1
ng generate component composant-2
8. 2. Définissez les sélecteurs des composants
Chaque composant Angular a un sélecteur (un tag HTML) qui est défini dans le fichier
TypeScript du composant. Par exemple, pour le composant composant-1, le sélecteur
est probablement défini dans le fichier [Link] comme suit :
Cela signifie que vous pouvez insérer le composant composant-1 dans n'importe
quelle autre page HTML en utilisant la balise <app-composant-1></app-composant-
1>.
8. 3. Inclure les composants dans votre HTML principal
Une fois que vous avez les composants créés, vous pouvez les inclure dans n'importe
quel autre composant, comme [Link] (ou un autre fichier HTML). Par
exemple, pour inclure composant-1 et composant-2 dans le fichier HTML principal
[Link], vous pouvez faire ceci :
Dans notre application nous allons créer les composants suivants (home, list-product,
promotion):
À la création des composant ils seront rajoutés directement dans le fichier
[Link]
10. Routage dans Angular
Le routage est essentiel dans une application Angular pour naviguer entre les
différentes vues. Vous pouvez configurer le routage en modifiant le fichier app-
[Link].
1. Créez des composants pour chaque page que vous souhaitez.
2. Configurez les routes dans le fichier [Link] :
Ensuite, ajoutez le <router-outlet></router-outlet> dans votre fichier
[Link] pour afficher les composants en fonction de la route.
Dans notre tp, il faut rajouter leur chemin dans le fichier [Link] pour
pouvoir les utiliser par la suite :
Pour que notre application affiche le composant home dans notre page d’accueil nous
avons utilisé le path vide pour pouvoir y accéder directement avec router-outlet que
nous allons utiliser dans notre fichier [Link]:
On modifie les fichiers html et css du composant home, et on lance notre application
avec ng serve pour s’assurer que la page d’accueil s’affiche correctement:
Pour le composant promotion nous allons utiliser une liste statique à afficher sur notre
page html:
Le fichier [Link]
/* [Link] */
.products-container {
font-family: Arial, sans-serif;
padding: 20px;
max-width: 1000px;
margin: 0 auto;
}
h1 {
text-align: center;
color: #333;
}
.product-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
margin-top: 20px;
}
.product-card {
border: 1px solid #ddd;
border-radius: 8px;
padding: 20px;
background-color: #f9f9f9;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.3s;
}
.product-card:hover {
transform: translateY(-5px);
}
.product-name {
font-size: 1.5rem;
color: #007BFF;
}
.product-description {
font-size: 1rem;
color: #555;
}
.product-price {
font-size: 1.2rem;
color: #28a745;
font-weight: bold;
margin-top: 10px;
}
Pour être redirigé vers le composant promotion après la clique sur le bouton “voir les
promotions” il faut rajouter router-link dans la page [Link] :
Vous testez l’application
Vous faite la même chose pour être redirigé vers la liste des produits et catégorie des
produits
9. Ajouter des services
Les services sont utilisés pour gérer la logique métier, accéder aux API, ou partager des
données entre les composants.
Pour créer un service, exécutez la commande suivante :
ng generate service mon-service
Cela crée un fichier [Link]. Vous pouvez ensuite l'utiliser pour
effectuer des appels HTTP ou pour toute autre logique.
Nous allons créer notre premier service product:
Ensuite, vous pouvez injecter ce service dans votre composant, en rajoutant les
imports du service et HttpClientModule, vous devez aussi le rajouter dans providers
comme ceci :
Lorsqu'un service est ajouté dans le tableau providers d'un module, ce service sera
disponible pour tous les composants du module, et potentiellement pour tous les
modules qui l'importent (selon la portée).
Injecter HttpClient dans un service ou composant Dans votre service ou
composant, vous pouvez ensuite injecter HttpClient pour envoyer des requêtes
HTTP. HttpClient expose plusieurs méthodes comme get(), post(), put(),
delete()
Modifier le fichier [Link] pour qu’il récupère les différents produits de
notre back-end:
Modification du back-end:
Dans notre microservice MS-Product il faut rajouter une classe de configuration et
rajouter l’annotation @CrossOrigin dans notre Controller :
Dans le package config créer la classe WebConfig:
Dans notre controller: