Lorsque vous créez un projet avec le CLI Angular, il génère une arborescence de dossiers et de fichiers bien organisée. Cette structure joue un rôle essentiel dans l'organisation du code, rendant le développement plus efficace et scalable.

Vous allez explorer les dossiers clés et les fichiers qui sont automatiquement créés lors de la configuration d’un nouveau projet Angular.

Structure du projet

Lorsque vous exécutez la commande ng new angular-app, le CLI Angular génère la structure suivante :

📂 src/ – Code source de l’application.

Ce dossier contient les fichiers principaux et les configurations nécessaires à votre application Angular.

Code de l'application

Fichiers de configuration

Fichiers supplémentaires

Exécution d'une application Angular

Pour lancer votre application Angular, ouvrez d'abord le terminal. Dans VS Code, vous pouvez utiliser les raccourcis suivants :

• macOS : Cmd + J ou Cmd + ` ;

• Windows : Ctrl + J ou Cmd + `.

Vous pouvez également accéder à Affichage → Terminal depuis le menu supérieur.

Ensuite, exécutez la commande suivante :

Cette commande compile le projet et démarre un serveur de développement local. Une fois le processus terminé, le terminal affichera un message avec une URL :

Ouvrez l'URL (http://localhost:4200/) dans votre navigateur ; la page d'accueil Angular s'affichera.