Angular - 2-4 Creating a new component

Les composants sont importants, n'est-ce pas ? C'est pourquoi nous commençons par l'un d'eux, le composant d'application. D'un côté, c'est un composant Angular normal, mais d'autre part, il est aussi un peu spécial car il sert de composant racine, app root, il est à la fin listé ici dans le module app dans ce tableau bootstrap qui dit à Angular que c'est un component spécial, vous devez amorcer l'application entière avec ce composant comme composant racine. Donc tous les autres composants que nous créons ne seront pas ajoutés au fichier index.html, leurs sélecteurs ne seront pas ajoutés ici, leurs sélecteurs seront ajoutés au fichier app.component.html parce que c'est maintenant où nous ajoutons les autres parties.

Assez parlé de l'ajout de composants, ajoutons-en un. Disons que nous voulons afficher des informations sur un serveur. Nous construisons un back-end pour notre application de gestion de serveur et nous voulons sortir des informations sur le serveur. Donc je vais stocker ceci dans un nouveau dossier qui est un sous-dossier du dossier app parce que généralement dans un projet Angular CLI, tout le contenu lié à l'application est placé dans le dossier app. Je vais le nommer server car il contiendra mon ServerComponent. et c'est une bonne pratique, le nom du dossier doit être égal au nom du composant et chaque composant doit avoir son propre dossier, bien que ce ne soit pas une règle stricte mais généralement, c'est logique.

Donc ici, dans le dossier du serveur, je vais ajouter mon ServerComponent. Une bonne convention de nommage est d'avoir server, donc le nom de votre composant en premier, puis un point et ensuite component. Nous apprendrons plus tard qu'il existe d'autres composants dans une application Angular, donc en utilisant des noms de fichiers comme ça, c'est très facile de voir ce qu'il y a dans le fichier. Et très important, n'oubliez pas d'ajouter .ts, pour TypeScript, car c'est dans ce langage que nous allons écrire ce composant.

Maintenant, nous avons un fichier vide pour notre nouveau composant, comment pouvons-nous créer un composant maintenant ? Tout d'abord, un composant est simplement une classe, une classe TypeScript, pour qu'Angular puisse l'instancier pour créer des objets basés sur le plan que nous avons mis en place ici. Donc, exportons cette classe afin de pouvoir l'utiliser en dehors du fichier aussi. parce que comme je l'ai déjà dit, on va utiliser notre composant dans le composant app par exemple pour l'ajouter pour l'y ajouter. Nous allons donc ajouter une classe ici et cette classe doit maintenant s'appeler ServerComponent. Encore une fois, la convention de nommage prévoit que le nom du composant soit le premier, serveur, puis la description, composant parce que plus tard nous apprendrons aussi d'autres parties qui pourraient être nommées différemment dans l'application Angular.

Voici notre classe et pour l'instant, c'est une classe TypeScript normale, rien de spécial à son sujet, nous ne pouvons pas l'utiliser comme ça, Angular n'a pas toutes les informations dont il a besoin. Nous devons donc lui ajouter quelque chose qui indique à Angular que ce n'est pas seulement une classe TypeScript normale mais plutôt quelque
plutôt quelque chose de spécial, un composant. Pour ce faire, nous ajoutons un décorateur spécial, Les décorateurs sont une fonctionnalité de TypeScript qui vous permet d'améliorer vos classes, par exemple, améliorer les éléments que vous utilisez dans votre code, ce n'est pas limité aux classes mais ici nous allons utiliser un décorateur de classe. C'est le décorateur de composant et les décorateurs sont toujours attachés en ajoutant un signe @ devant eux.
Maintenant, ce décorateur de composant n'est pas quelque chose que TypeScript connaît dès le départ, donc nous devons l'importer. Nous devons ajouter un import et cet import doit maintenant nous donner accès à ce component, donc nous devons importer ce component entre accolades, car à partir du fichier où nous allons l'importer, nous pourrions aussi importer d'autres composants aussi, donc nous devons choisir spécifiquement le composant en utilisant cette syntaxe et ensuite from Le package d'où nous importons le composant est @angular/core. Maintenant Angular est livré avec un couple de packages où il regroupe ses fonctionnalités et le package core comme son nom l'indique nous donne accès à certaines des fonctionnalités de base d'Angular.

Donc, avec cela, nous avons importé component. Maintenant ce décorateur @component est connu de TypeScript, donc quand il analyse ce fichier et le compile en Javascript, il est capable de le comprendre, maintenant nous devons passer un objet Javascript à ce décorateur de composant pour le configurer parce que sans aucune configuration, il n'est toujours pas très utile à Angular. Mais ici, nous pouvons configurer quelques informations importantes qui seront stockées en tant que métadonnées pour cette classe en arrière-plan, et qui diront à Angular ce qu'il doit faire avec cette classe.

et une information importante est le sélecteur. Il s'agit essentiellement de la balise HTML qui vous permettra d'utiliser ce composant dans vos autres modèles de composants. Nous le verrons bientôt en action.

Action. Le sélecteur doit être une chaîne et ici vous pouvez définir le nom de votre choix, mais vous devez vous assurer que c'est un sélecteur unique que vous n'écrasez pas par inadvertance un élément HTML par défaut ou quelque chose comme ça. En général, vous le préfixez avec app-, puis vous lui donnez un nom approprié, comme server, car il s'agit d'un ServerComponent. Ceci est mon propre sélecteur qui me permet d'utiliser ce composant dans les fichiers HTML de mes autres composants.

Donc, avec cette configuration, l'autre élément important dont nous avons besoin est le modèle et ici nous allons faire référence à un autre fichier externe. Je reviendrai bientôt sur une autre alternative et ce fichier externe doit bien sûr être créé. Donc, dans le même dossier, je vais créer un fichier server.component et maintenant .html, qui contiendra le modèle, le code HTML de mon composant. Donc ici, je peux maintenant ajouter le contenu que je veux, comme par exemple le composant serveur pour démarrer simplement et de revenir au fichier TypeScript, je peux maintenant pointer vers ce fichier HTML.

On a besoin d'un chemin relatif pour ça, à la fin tout ça va être empaqueté par webpack, donc nous devons lui indiquer où trouver le fichier HTML. Eh bien, relativement au fichier TypeScript, le chemin est simplement ./server.component.html, comme ça, cela pointe vers ce fichier. Avec cela, nous avons créé notre premier composant, maintenant pour l'utiliser nous devons plonger dans le module d'application et comprendre ce qu'il fait car nous devons changer quelque chose ici pour utiliser notre propre composant. Nous le ferons dans le prochain cours