IONIC Section 4 - 4.1 Création de notre premier Component
Cliquez içi pour plus de vidéos disponibles sur notre chaine youtube !Maintenant que nous avons un aperçu du fonctionnement du projet, nous allons voir comment créer notre premier component. L'idée est d'ajouter un nouveau fichier dédié dans le dossier de l'application et de l'organiser proprement pour qu'Angular puisse le reconnaître et l'utiliser dans nos templates.
Organisation des fichiers
Direction le dossier src/app, dans lequel nous créons un sous-dossier user (le nom est libre, mais il doit refléter le rôle du component). À l'intérieur, nous créons un fichier user.component.ts qui suit la convention de nommage standard. Dans ce fichier, nous exportons une classe : export class UserComponent, en PascalCase. Pour indiquer à Angular qu'il s'agit d'un component, on lui ajoute le décorateur @Component. L'IDE ajoute en général l'import automatiquement, mais il faut toujours vérifier que tout est bien renseigné : chaque fichier fonctionne de manière autonome et doit importer explicitement chaque dépendance utilisée.
Le décorateur @Component attend plusieurs propriétés. La première est le selector, c'est-à-dire la balise HTML personnalisée qui permettra d'instancier le component. Le nom doit obligatoirement contenir un tiret pour ne pas entrer en conflit avec les balises HTML natives. Par convention, on préfixe par app-, ce qui donne ici app-user. Il faut aussi déclarer templateUrl pour lier le component à son fichier HTML — attention au chemin relatif.
On crée ensuite le fichier user.component.html à côté du .ts. À l'intérieur, on place une simple balise <p>Quelques utilisateurs</p> pour vérifier le bon fonctionnement. Reste à faire connaître le component à l'application : dans app.module.ts, on importe UserComponent depuis le chemin relatif ./user/user.component (sans l'extension .ts), puis on l'ajoute au tableau declarations. Pensez à utiliser des crochets et des simples quotes conformes à la syntaxe TypeScript.
Pour tester, on insère la balise <app-user></app-user> dans app.component.html. En rechargeant le navigateur, le texte « Quelques utilisateurs » apparaît : notre premier component est opérationnel. Rendez-vous dans la prochaine vidéo pour aller plus loin.
En résumé
Cette leçon guide pas à pas la création d'un premier component en Ionic. Elle couvre la structure du fichier TypeScript avec le décorateur @Component, la création du fichier HTML correspondant et l'intégration du component dans le module app.module.ts. L'accent est mis sur les conventions de nommage (PascalCase pour la classe, sélecteur avec tiret) et l'importance des imports automatiques pour chaque dépendance.
Points clés
- Créer un dossier dédiée au component (ex: 'user') dans src/app/components avec les fichiers .ts, .html et optionnellement .scss/.css
- Utiliser le décorateur @Component avec trois propriétés essentielles : selector (avec tiret obligatoire comme 'app-user'), templateUrl (chemin du fichier HTML) et styleUrls (optionnel)
- Exporter une classe nommée en PascalCase (ex: UserComponent) qui sera décorée par @Component
- Ajouter les imports nécessaires automatiquement générés par l'IDE, en vérifiant que chaque dépendance utilisée est bien importée
- Déclarer le nouveau component dans le module (app.module.ts) en l'important et l'ajoutant au tableau declarations
- Utiliser le component dans les templates en l'insérant via son sélecteur (ex: <app-user></app-user>)
Questions fréquentes
Pourquoi le sélecteur du component doit-il contenir un tiret ?
Le tiret est une convention obligatoire en Angular pour différencier les components personnalisés des balises HTML natives. Cela évite les conflits de noms et améliore la clarté du code (ex: app-user au lieu de user).
Quels fichiers sont minimalement requis pour créer un component ?
Minimalement, il faut deux fichiers : le fichier TypeScript (.ts) contenant la classe décorée @Component avec le sélecteur et templateUrl, et le fichier HTML (.html) contenant le template du component. Les fichiers de style (.css/.scss) sont optionnels.
Où doit-on déclarer un nouveau component pour qu'il soit utilisable ?
Le component doit être déclaré dans le tableau 'declarations' du module Angular (app.module.ts ou tout autre module) auquel il appartient. Il faut d'abord l'importer en haut du fichier module, puis l'ajouter à la liste des déclarations.