Chapitre 2

Création d’un projet

Angular

kallel.sahar@gmail.com
Installation l’environnement d’exécution
› Télécharger la version LTS du node js à partir de son site
web officiel www.nodejs.org et installer le.
› Le package manager npm est installé automatiquement.
› Il offre énormément d’outils et de librairies sont utiles
pour le développement du partie Frontend.
› Pour vérifier les installations de node js :
– node –v
– npm -v

26
Installation
› Pour faciliter le développement d’une application Angular, les outils
suivants doivent être installés.
› Node JS : https://nodejs.org/
– Node JS installe l’outil npm (Node Package Manager) qui permet
de télécharger et installer des bibliothèques Java Script.
› npm –v
› node –v
› Installa ensuite Angular CLI ( Command Line Interface) qui permet
de générer compiler , tester des projets Angular
– npm install –g @angular/cli

27
Installation
› Plusieurs IDE professionnels peuvent être utilisé pour éditer le code:
– Web Storm, PHP Storm
– Visual Studio Code
– Eclipse avec plugin Angular
› D’autres eclipses classiques peuvent être aussi utilisé :
– Atom, SublimeText, Etc

28
Installation Angular CLIs
› npm install –g @angular/cli@16 //ici la version de Angular cli est 16
› ng –version //pour vérifier son installation
› Angular CLI
– Créer une application (projet).
– Générer des squelettes des composants, modules, services, directives.
– Compiler/Builder un projet.
– Lancer des tests de type unitaire (Karma) ou e2e (End-to-End).
– Générer la configuration de l’application.
› Exécutable ng
– ng new
– ng serve
– ng generate ou ng g
29
Exemples d’utilisation de “ng”

30
Création d’un projet Angular
› ng new <NomDuProjet>

31
Exécution du Projet Angular
› Afin d’exécuter le projet Angular, on exécute la commande
ng serve
› La commande ng serve :
– compile le code source du projet pour transpiler le code TypeScript en
Javascript

- en même temps , démarre un serveur web local basé sur nodeJs pour
déployer l’application localement ( port par défaut du serveur : 4200)

32
TEST DU PROJET
ANGULAR
Afin de tester un
projet Angular, il suffit
d’ouvrir votre
navigateur et taper :
http://localhost:4200

33
Arborescence du projet Angular

34
Arborescence du projet Angular
DOSSIER / FICHIER RÔLES
package.json Déclare les dépendances NPM tirées lors de l'installation
du projet et nécessaires à la compilation et les tests
src/ Contient les fichiers classiques index.html,styles.css,
main.ts, le fichier de configuration de la compilation
TypeScript tsconfig.json, etc

scr/app Contient les sources du premier projet (composants,

services, etc)

src/assets Permet d'y placer tous les assets tels que les images
src/environments Contient les différents fichiers de configuration spécifiques
aux environnements d’exécution
35
Le fichier index.html

36
Le fichier main.ts

37
Le fichier app.module.ts

38
Le module de démarrage

39
Intégration de Boostrap
› Bootstrap représente une trousse d'outils frontale gratuite conçue
pour la création d'applications mobiles. Intégrant du code HTML,
CSS et un framework JavaScript.
› Il offre une vaste collection de fragments de code réutilisables, à
disposition des développeurs pour diverses sections de leurs
projets.
› Ce cadre propose des modèles de design variés couvrant des
éléments tels que les boutons, les fenêtres modales, les carrousels
d'images, les tableaux, les barres de navigation, et bien d'autres
encore.
› Bootstrap inclut une documentation exhaustive pour en faciliter
l'utilisation.
40
Avantages de Bootstrap
• Composants d'interface utilisateur prédéfinis : Pas besoin de créer des
barres de navigation, des boutons, des carrousels et des cartes à partir
de zéro, car Bootstrap a des morceaux de code préconstruits .
• Personnalisable: possibilité de modifier divers éléments, tels que des
images et du texte, en fonction de vos besoins.
• Responsive: Les internautes modernes naviguent sur divers appareils, des
smartphones et tablettes aux ordinateurs
• Apporte un style cohérent : Une bonne application Web doit avoir une
apparence et une apparence cohérentes sur différentes pages.
• Communauté forte : Ce framework contient de nombreuses ressources et
une documentation solide et est soutenu par de nombreux
développeurs.
41
Etapes : Bootstrap + Angular
1. Installer Bootstrap:
npm install bootstrap @popperjs/core ngx-bootstrap
2. Informer Angular à la présence de Bootstrap
"styles":
[ "node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css" ],
"scripts":
[ "node_modules/@popperjs/core/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js" ]
3. Tester l’application

42
Etapes : Bootstrap + Angular
<div class="container">
<h1>Install Bootstrap 5 in Angular 16</h1>
<div class="card">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural
lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>

43