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.