[ANGULAR] TP-1

Objectifs

- Environnement de développement Angular.

- Création d’une application Angular.
- Architecture d’une application Angular.
- Le composant principal d’une application Angular.
- Les fichiers d’un composant.

1- Installation de l’environnement de développement Angular.

a- Installez Node JS à partir du lien www.nodejs.org.
NB. Il faut installer la version avec la mention LTS.
b- Vérifiez la version de node js en tapant la commande node --version sur l’invite de
commande
c- Vérifiez la version de npm installée en tapant npm --version
NB. Le paramètre - -version peut être simplifié à l’aide de -v
d- Installez Angular CLI en tapant la commande npm install -g @angular/cli
NB. -g est l’acronyme de --global
2- Création d’une application Angular
a- Démarrez l’environnement de développement intégré vscode et ajoutez l’extension
Angular Language Service.
b- Ouvrez un nouveau terminal Command Prompt. Accédez au dossier dans lequel vous
désirez créer votre application Créez une nouvelle application Angular nommée
showroom-auto en tapant la commande ng new showroom-auto.
c- Explorez l’arborescence de l’application showroom-auto (node-module, src, app, assets,
index.html, etc.)
3- Lancement de l’application dans le browser
a- Dans le terminal, accédez au dossier de l’application à l’aide de la commande cd
showroom-auto
b- Lancez l’application à l’aide de la commande ng serve
c- Dans le navigateur, tapez l’URL http://localhost:4200 (il s’agit du port d’Angular)
4- Exploration du composant principal.
a- Observez et définissez les différents fichiers créés avec le composant principal.
b- Dans le fichier app.component.html, template du composant principal, effacez le
contenu par défaut et ajoutez le code html suivant :
<h1>Welcome to my {{title}}</h1>.
c- Lancez l’application.

3BI – IHEC – A.U 2023-2024 | Framework de développement web 1