Fichiers dans le dossier app

Avant d’aborder le composant principal, présentation des fichiers présents dans le dossier app et de leurs rôles dans l’application.

Lors de la création d’un nouveau projet Angular, tout commence dans le dossier app. C’est ici que sont stockés les fichiers principaux définissant la structure de l’application. Cette section propose une exploration du contenu de ce dossier et un examen détaillé du composant principal, qui constitue le point d’entrée de l’interface utilisateur.

Composant principal

Examen détaillé du composant principal, AppComponent. Ce composant est généré par défaut lors de l’exécution de la commande ng new et sert de composant racine de l’application.

Dans Angular, les composants sont créés à l'aide de décorateurs. Un décorateur est une fonction spéciale qui ajoute des fonctionnalités supplémentaires à une classe.

À l'intérieur du décorateur @Component, des paramètres importants sont définis pour déterminer l'apparence et le comportement du composant. Voici une explication détaillée :

Éléments clés dans le fichier app.component.ts :

• Sélecteur (selector) : définit le nom du composant dans le HTML. Dans ce cas, il peut être utilisé comme <app-root></app-root> ;

• Imports (imports) : liste des dépendances nécessaires au fonctionnement du composant. Dans cet exemple, il utilise RouterOutlet, qui gère l'affichage du contenu en fonction de la route ;

• Template (templateUrl) : chemin vers le fichier HTML (app.component.html) contenant le template du composant ;

• Styles (styleUrls) : chemin vers le fichier CSS (app.component.css) définissant l'apparence du composant.

Utilisation du composant principal

Le processus commence dans le fichier index.html situé dans le dossier src. Il ne contient pas de contenu typique, seulement une structure de base avec une balise spéciale :

Cette balise <app-root> correspond au selector dans app.component.ts. Lorsque Angular s'initialise, il trouve cette balise et la remplace par le contenu de app.component.html.

Conclusion

Le composant principal est le cœur de l'application. Il se charge en premier et gère le modèle principal. Tout ce qui s'affiche à l'écran passe par lui. La balise <app-root> dans index.html est le point d'entrée par lequel Angular "entre" dans la page.