Chapitre 2
Création d’un projet
Angular
[Link]@[Link]
Installation l’environnement d’exécution
› Télécharger la version LTS du node js à partir de son site
web officiel [Link] 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 : [Link]
– 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 :
[Link]
33
Arborescence du projet Angular
34
Arborescence du projet Angular
DOSSIER / FICHIER RÔLES
[Link] 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 [Link],[Link],
[Link], le fichier de configuration de la compilation
TypeScript [Link], 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 [Link]
36
Le fichier [Link]
37
Le fichier [Link]
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/[Link]",
"src/[Link]" ],
"scripts":
[ "node_modules/@popperjs/core/dist/umd/[Link]",
"node_modules/bootstrap/dist/js/[Link]" ]
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