Fichiers dans le dossier app

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

Lorsque vous créez un nouveau projet Angular, tout commence dans le dossier app. C’est ici que sont stockés les fichiers principaux qui définissent la structure de votre application. Dans cette section, nous allons explorer le contenu de ce dossier et examiner de plus près le composant principal, qui sert de point d’entrée à l’interface utilisateur.

Composant principal

Examinons maintenant de plus près le composant principal, AppComponent. Ce composant est créé par défaut lors de l’exécution de la commande ng new et il 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.

Dans le 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 :

• Selector (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 classique, 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 constitue le cœur de l'application. Il se charge en premier et gère le template principal. Tout ce qui s'affiche à l'écran passe par lui. La balise <app-root> dans index.html représente le point d'entrée par lequel Angular "entre" dans la page.