6. Comprendre l'espace de travail et la structure des fichiers Angular

Les projets Angular sont organisés dans un espace de travail. Comprendre cette structure est la clé d'un développement efficace.

Fichiers racines de l'espace de travail

• angular.json : Configuration de tout l'espace de travail. Définit les projets, les options de build, les frameworks de test et les commandes.
• package.json : Contient les métadonnées du projet, les dépendances (bibliothèques nécessaires à l'exécution) et les dépendances de développement (outils de build/développement).
• tsconfig.json : Fichiers de configuration TypeScript. Définit comment le code TypeScript est compilé en JavaScript.

Le dossier src (Code source)

C'est ici que vit tout le code de votre application. Les fichiers principaux sont :

1. index.html : L'unique page hôte de la SPA. Angular injecte son contenu dans la balise <app-root> ici.
2. main.ts : Le point d'entrée de l'application. Il amorce le module Angular principal (AppModule) pour démarrer l'application.
3. styles.css : Styles globaux pour l'application.
4. app/ : Contient le module principal de l'application et les composants de base.

Fichiers de l'application principale (src/app/)

Toute application Angular est composée de Components, Templates, Styles et Modules.

• app.module.ts : Définit le module racine de l'application. Déclare quels composants, services et autres modules sont disponibles.
• app.component.ts : La classe du composant principal (logique).
• app.component.html : Le template du composant (vue).
• app.component.css : Styles spécifiques au composant (scopés).
• app-routing.module.ts : Gère les routes de navigation de l'application.

Analogie : L'application est un arbre. index.html est le sol, main.ts est la graine, app.module.ts est le tronc, et app.component.ts/html est la première branche et la première feuille.