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 eu un aperçu du fonctionnement de notre projet, on va voir ensemble comment créer un Component. Nous allons donc ajouter un nouveau fichier dans le dossier de l’application et à l’intérieur on va créer un sous-dossier donc je vais aller directement dans le dossier source, dans le sous dossier « app» et je vais aller créer le dossier et le nommer « user», mais vous pouvez choisir autre chose bien évidemment, pareil, pour le fichier, je vais l’appeler « user», cependant, il doit contenir la même convention à savoir « user.component.ts» et nous exportons une classe « export class» dans laquelle vous nommez généralement le composant « user» voilà moi je l’ai mis en pascal case. Maintenant on ajoute le décorateur @component pour dire à Angular que cette classe doit être traitée comme un Component. Et ici, mon IDE a ajouté l’importation automatiquement mais vous devez vous assurez qu’il soit bien renseigné à chaque fois que vous créer ce type de fichier. Chaque fichier fonctionne de manière autonome et dépend de chaque dépendances de ce fichier. Ainsi, chaque objet ou classe, que vous utilisez depuis un autre fichier doit être importé dans ce fichier. Maintenant, nous avons définitivement besoin d’un sélecteur ici, donc notre propre balise permettant de l’utiliser. Maintenant vous êtes relativement libre en ce qui concerne la dénomination, mais ce nom devra comporter un tiret pour que vous ayez quelque chose ou autre, afin que vous n’entriez pas en conflit avec les noms par défaut, comme h1. Je vais le nommer « app-user» afin de suivre la convention avec "app-" en préfixe puis le nom du composant. Maintenant je vais aussi ajouter un modèle d’URL pour lier le fichier HTML correspondant mais ce fichier n’existe pas encore, on va le créer, assurez vous bien de donner le bon chemin pour que l’IDE retrouve bien notre fichier HTML dans notre arborescence. Donc on créer le fichier , donc je vais le nommer «user.component.html», voilà le fichier, à l’intérieur on va mettre une balise "p" pour ajouter un paragraphe, et je vais juste mettre « Quelques utilisateurs» et on sauvegarde. Maintenant dans le fichier«app.module.ts», le voici et on va ajouter un import où nous allons importer le composant « user» juste en dessous, donc je vais copier et coller et je vais mettre user comme ceci et vous devez vous assurez que le nom que vous utilisez içi correspond à votre nom de classe que vous avez créer ici dans ce fichier et cela doit être un chemin relatif qui se trouve dans le sous-dossier « user» et dans le composant « user» sans l’extension « .ts» puis il interagit bien sur les deux fichiers. Nous l’ajoutons maintenant aux déclarations car nous devons déclarer tous les composants que nous utilisons dans ce module. La question est de savoir où Angular cherchera alors le sélecteur dans ce composant ? Et la réponse se trouve essentiellement dans tous les autres composant de cette déclaration. Mais avant je dois modifier mon fichier, je remplace les parenthèses à "UserComponent" par des brackets, et également remplacer les doubles quotes par des simples pour bien lire l’import, et je supprime celui qui nous est d’aucune utilité. Donc, nous pouvons aller à l’application. Maintenant on va tester notre component que nous avons créer, dans notre fichier « app.component.html, en insérant «app-user». Vous verrez que si vous revenez à votre navigateur, et vous pouvez voir sur notre page le contenu de notre page concernant notre component que nous avons créer. Voilà concernant notre vidéo, je vous dit à bientôt pour la suivante.