Une application Angular typique se compose de nombreux composants.
Les composants contrôlent une partie de l'écran appelée comme vue dans Angular.
Donc, lorsque vous créez votre écran sur votre application Angular,
vous pouvez diviser votre écran en plusieurs vues,
chacune étant contrôlée par un composant distinct.
Jusqu'à présent, dans l'exemple,
, nous avons un seul composant racine qui contrôle l'ensemble de l'écran.
Dans cette leçon, nous allons ajouter un composant supplémentaire qui fait partie de l'écran et prend le contrôle
de cette partie de l'écran et prend soin de
l'ensemble du rendu de cette partie de l'écran, ici.
Visitons rapidement le composant App que
nous avons déjà dans le cadre de notre application Angular.
Donc, dans ce composant,
, vous pouvez voir que nous importons le composant à partir du noyau angulaire.
Donc, cela nous donne la possibilité de
définir un décorateur de composants et de l'appliquer à notre classe.
Donc, cela définira un composant qui fait partie de notre application Angular.
Donc, ici, ce composant particulier,
comme vous pouvez le voir, lorsque vous définissez le décorateur de composant,
il se compose de plusieurs propriétés ici l'une d'entre elles étant le sélecteur, ici.
Maintenant, cette propriété de sélecteur particulière définit une chaîne ici.
Notez, en particulier, ce qui est contenu à l'intérieur de la chaîne.
C'est écrit app-root.
Maintenant, en regardant le fichier index.html.
Donc, je vais au fichier index.html.
Vous pouvez voir que juste là,
nous utilisons cette app root comme l'une des balises dans notre fichier index.html.
Donc, maintenant vous voyez que cette balise particulière que vous utilisez fait référence
au sélecteur de ce que nous avons spécifié ici, app-root.
Donc, si vous voulez donner une partie de l'écran et la rendre contrôlable par un composant,
alors vous utilisez le sélecteur pour spécifier et ensuite vous allez inclure
la balise sélecteur dans votre fichier HTML.
La même chose s'applique également au modèle d'un composant.
Si vous incluez un autre sélecteur d'un autre composant
dans le modèle de ce composant,
alors cette partie de l'écran sera remise à
le second composant à contrôler à partir du second composant.
Nous en apprendrons également dans l'une des leçons ultérieures.
Maintenant, la deuxième partie que vous voyez en cours de spécification est TemplateURL.
Cette TemplateURL spécifie le nom du fichier de modèle pour ce composant particulier.
Donc, dans ce cas, comme vous pouvez le voir, c'est app.component.html.
Donc, c'est la raison pour laquelle le modèle est défini dans le fichier
app.component.html pour ce composant particulier.
De plus, vous pouvez également fournir des styles pour cette application.
Donc, ici, nous disons StyleURL et puis ici,
entre crochets, vous fournissez ce dicton./app.component.scss.
Donc, ce qui signifie que ce fichier SaaS particulier est appliqué à ce style.
Donc, comme vous l'avez vu quand nous avons créé notre application Angular,
J'ai spécifié au format de style que je vais utiliser est un SCSS.
Donc, c'est la raison pour laquelle ces fichiers sont SCSS.
Si vous n'utilisez pas le style SCSS et créez plutôt normalement,
alors ce serait juste des fichiers CSS et alors vous pouvez utiliser CSS pour définir
les styles qui peuvent être utilisés dans vos modèles d'application ou dans vos modèles de composants.
Donc, si vous avez des styles
spécifiques à un composant que vous voulez inclure pour ce composant particulier,
alors vous les inclurez dans ce fichier.
Vous pouvez également spécifier le modèle et le style en ligne.
Donc, si vous spécifiez le style ou le modèle en ligne,
vous le spécifiez simplement comme avec les guillemets arrière.
Donc, par exemple, je peux simplement,
au lieu de faire le templateURL,
je peux simplement éditer ceci pour template et
alors je vais définir le modèle dans les guillemets arrière ici.
Donc, je dirais et dans les qootes arrière, je peux même faire des modèles comme celui-ci.
Donc, je peux dire h1 puis titre.
Donc, ce serait ce que nous appelons comme modèle en ligne que nous utilisons dans notre application.
Maintenant, si vous utilisez des guillemets arrière,
vous pouvez également utiliser des choses comme dollar add on dans
afin d'utiliser des variables dans vos modèles et ainsi de suite.
Dans ce cours particulier,
, nous allons utiliser des fichiers modèles distincts
et créer les modèles dans ces fichiers HTML à la place.
Je préfère cette méthode de définition de mes modèles plutôt que de faire des modèles en ligne.
Mais si votre modèle est très simple et ne contient que deux ou trois lignes,
alors utilisez par tous les moyens un modèle en ligne comme celui-ci dans votre application.
Alors, laissez-moi revenir à ma valeur d'origine ici.
Même chose pour les styles.
Aussi, je peux simplement dire des styles et puis dans les guillemets arrière
incluent mes classes CSS dans les guillemets arrière.
Bien que comme je l'ai mentionné,
je préfère les garder dans des fichiers séparés juste pour avoir du code propre dans mes fichiers .ts ici.
Nous avons donc des styles de modèle de sélecteur.
Nous aurons aussi un autre appelé ID du module.
Pour le moment, je ne l'utilise pas pour mon composant,
mais dans certains cas, vous devrez spécifier explicitement l'ID du module pour votre composant.
Nous en verrons quelques exemples un peu plus tard.
Maintenant, en outre, un composant n'est rien d'autre qu'une classe JavaScript ou une classe Type Script.
C'est pourquoi vous voyez ici,
définissant une classe disant AppComponent et ensuite vous exportez cette classe.
La raison pour laquelle nous utilisons l'export ici,
afin que ce composant puisse être importé dans mon module d'application.
Donc vous avez vu que nous importons ceci dans mon module d'application.
Donc, chaque fois que vous voulez rendre un composant ou un module portable dans un autre module,
alors vous feriez toujours précéder l'exportation vers la classe ici.
Donc, en plus, aussi,
nous voyons que nous avons quelques propriétés locales que nous avons définies
dans nos classes ici et celles-ci seraient accessibles via mon modèle.
Donc, je peux les utiliser dans mon modèle.
Donc, les propriétés qui sont définies dans mon fichier
component.ts sont accessibles à partir de mes fichiers de modèle.
Nous parlerons de l'aspecteur de liaison de données un peu plus tard dans une autre leçon.
Pour résumer, ce que nous avons appris jusqu'à présent est qu'un composant est défini par
spécifiant le code et spécifiant également le modèle correspondant.
Ainsi, à l'intérieur du code, vous pouvez définir des propriétés et des méthodes
qui seront accessibles à partir de votre modèle à partir du modèle correspondant.
Ainsi, comme vous l'avez vu, dans les métadonnées,
dans le décorateur, dans le décorateur de composant,
vous avez spécifié le nom de fichier de modèle comme un
des propriétés de votre classe de composant ici.
De même, toutes les propriétés et méthodes que vous définissez dans
votre composant seront accessibles à partir de votre modèle.
Non seulement cela, vous pouvez également avoir ce qui est appelé comme liaison d'événement
de votre modèle vers vos composants.
Donc, si des événements sont générés dans vos modèles, donc par exemple,
en cliquant sur un bouton sur votre modèle qui peut déclencher
appels à des méthodes à l'intérieur de votre code ici,
le Javascript ou le code Type Script ici.
Nous verrons l'utilisation de ceux dans l'une des leçons ultérieures et puis là, je vais, encore une fois,
revoir ce point sur la liaison de propriété et la liaison d'événement,
et vous expliquer cela plus en détail.
Les composants d'une application Angular peuvent eux-mêmes être organisés en hiérarchie.
Donc, vous aurez toujours un composant racine.
Donc, pour notre application,
le fichier app.component.ts et
le modèle HTML correspondant forment le composant racine de notre application
et ce composant racine peut alors contenir des composants
dans une hiérarchie et peut inclure des composants dans la hiérarchie.
Nous verrons que dans le tout prochain exercice,
où nous allons créer un autre composant, puis l'utiliser dans notre composant racine.
Ainsi, vous pouvez avoir plusieurs composants étant
inclus dans votre composant racine et ces composants
eux-mêmes peuvent utiliser d'autres composants qui sont inclus à l'intérieur d'eux.
Donc, cette hiérarchie de composants vous permet de concevoir l'écran de votre application.
Avec cette compréhension rapide des composants
et de la façon dont les composants sont utiles pour la conception de notre application,
nous allons maintenant passer à notre prochain exercice où nous allons créer
et ajouter un autre composant à notre application Angular
, puis nous définirons un modèle pour ce composant et nous allons ensuite nous utilisera
ce composant à l'intérieur de notre composant racine pour concevoir notre écran.