1
00:00:03,650 --> 00:00:09,520
Une application Angular typique se compose de nombreux composants.

2
00:00:09,520 --> 00:00:16,225
Les composants contrôlent une partie de l'écran appelée comme vue dans Angular.

3
00:00:16,225 --> 00:00:21,840
Donc, lorsque vous créez votre écran sur votre application Angular,

4
00:00:21,840 --> 00:00:25,310
vous pouvez diviser votre écran en plusieurs vues,

5
00:00:25,310 --> 00:00:29,384
chacune étant contrôlée par un composant distinct.

6
00:00:29,384 --> 00:00:31,200
Jusqu'à présent, dans l'exemple,

7
00:00:31,200 --> 00:00:35,715
, nous avons un seul composant racine qui contrôle l'ensemble de l'écran.

8
00:00:35,715 --> 00:00:42,440
Dans cette leçon, nous allons ajouter un composant supplémentaire qui fait partie de l'écran et prend le contrôle

9
00:00:42,440 --> 00:00:45,890
de cette partie de l'écran et prend soin de

10
00:00:45,890 --> 00:00:50,275
l'ensemble du rendu de cette partie de l'écran, ici.

11
00:00:50,275 --> 00:00:54,060
Visitons rapidement le composant App que

12
00:00:54,060 --> 00:00:57,350
nous avons déjà dans le cadre de notre application Angular.

13
00:00:57,350 --> 00:00:58,730
Donc, dans ce composant,

14
00:00:58,730 --> 00:01:04,250
, vous pouvez voir que nous importons le composant à partir du noyau angulaire.

15
00:01:04,250 --> 00:01:07,100
Donc, cela nous donne la possibilité de

16
00:01:07,100 --> 00:01:11,585
définir un décorateur de composants et de l'appliquer à notre classe.

17
00:01:11,585 --> 00:01:16,640
Donc, cela définira un composant qui fait partie de notre application Angular.

18
00:01:16,640 --> 00:01:19,590
Donc, ici, ce composant particulier,

19
00:01:19,590 --> 00:01:22,970
comme vous pouvez le voir, lorsque vous définissez le décorateur de composant,

20
00:01:22,970 --> 00:01:30,450
il se compose de plusieurs propriétés ici l'une d'entre elles étant le sélecteur, ici.

21
00:01:30,450 --> 00:01:36,375
Maintenant, cette propriété de sélecteur particulière définit une chaîne ici.

22
00:01:36,375 --> 00:01:40,010
Notez, en particulier, ce qui est contenu à l'intérieur de la chaîne.

23
00:01:40,010 --> 00:01:42,080
C'est écrit app-root.

24
00:01:42,080 --> 00:01:46,270
Maintenant, en regardant le fichier index.html.

25
00:01:46,270 --> 00:01:48,915
Donc, je vais au fichier index.html.

26
00:01:48,915 --> 00:01:51,400
Vous pouvez voir que juste là,

27
00:01:51,400 --> 00:02:00,570
nous utilisons cette app root comme l'une des balises dans notre fichier index.html.

28
00:02:00,570 --> 00:02:05,630
Donc, maintenant vous voyez que cette balise particulière que vous utilisez fait référence

29
00:02:05,630 --> 00:02:11,270
au sélecteur de ce que nous avons spécifié ici, app-root.

30
00:02:11,270 --> 00:02:18,500
Donc, si vous voulez donner une partie de l'écran et la rendre contrôlable par un composant,

31
00:02:18,500 --> 00:02:23,135
alors vous utilisez le sélecteur pour spécifier et ensuite vous allez inclure

32
00:02:23,135 --> 00:02:28,310
la balise sélecteur dans votre fichier HTML.

33
00:02:28,310 --> 00:02:32,190
La même chose s'applique également au modèle d'un composant.

34
00:02:32,190 --> 00:02:35,330
Si vous incluez un autre sélecteur d'un autre composant

35
00:02:35,330 --> 00:02:39,350
dans le modèle de ce composant,

36
00:02:39,350 --> 00:02:42,770
alors cette partie de l'écran sera remise à

37
00:02:42,770 --> 00:02:46,440
le second composant à contrôler à partir du second composant.

38
00:02:46,440 --> 00:02:52,304
Nous en apprendrons également dans l'une des leçons ultérieures.

39
00:02:52,304 --> 00:02:57,970
Maintenant, la deuxième partie que vous voyez en cours de spécification est TemplateURL.

40
00:02:57,970 --> 00:03:06,560
Cette TemplateURL spécifie le nom du fichier de modèle pour ce composant particulier.

41
00:03:06,560 --> 00:03:10,970
Donc, dans ce cas, comme vous pouvez le voir, c'est app.component.html.

42
00:03:10,970 --> 00:03:14,720
Donc, c'est la raison pour laquelle le modèle est défini dans le fichier

43
00:03:14,720 --> 00:03:19,605
app.component.html pour ce composant particulier.

44
00:03:19,605 --> 00:03:25,270
De plus, vous pouvez également fournir des styles pour cette application.

45
00:03:25,270 --> 00:03:30,105
Donc, ici, nous disons StyleURL et puis ici,

46
00:03:30,105 --> 00:03:36,610
entre crochets, vous fournissez ce dicton./app.component.scss.

47
00:03:36,610 --> 00:03:44,175
Donc, ce qui signifie que ce fichier SaaS particulier est appliqué à ce style.

48
00:03:44,175 --> 00:03:48,620
Donc, comme vous l'avez vu quand nous avons créé notre application Angular,

49
00:03:48,620 --> 00:03:53,970
J'ai spécifié au format de style que je vais utiliser est un SCSS.

50
00:03:53,970 --> 00:03:56,650
Donc, c'est la raison pour laquelle ces fichiers sont SCSS.

51
00:03:56,650 --> 00:04:01,190
Si vous n'utilisez pas le style SCSS et créez plutôt normalement,

52
00:04:01,190 --> 00:04:06,860
alors ce serait juste des fichiers CSS et alors vous pouvez utiliser CSS pour définir

53
00:04:06,860 --> 00:04:16,020
les styles qui peuvent être utilisés dans vos modèles d'application ou dans vos modèles de composants.

54
00:04:16,020 --> 00:04:19,820
Donc, si vous avez des styles

55
00:04:19,820 --> 00:04:23,000
spécifiques à un composant que vous voulez inclure pour ce composant particulier,

56
00:04:23,000 --> 00:04:25,565
alors vous les inclurez dans ce fichier.

57
00:04:25,565 --> 00:04:29,965
Vous pouvez également spécifier le modèle et le style en ligne.

58
00:04:29,965 --> 00:04:33,280
Donc, si vous spécifiez le style ou le modèle en ligne,

59
00:04:33,280 --> 00:04:37,785
vous le spécifiez simplement comme avec les guillemets arrière.

60
00:04:37,785 --> 00:04:40,080
Donc, par exemple, je peux simplement,

61
00:04:40,080 --> 00:04:42,520
au lieu de faire le templateURL,

62
00:04:42,520 --> 00:04:47,180
je peux simplement éditer ceci pour template et

63
00:04:47,180 --> 00:04:52,475
alors je vais définir le modèle dans les guillemets arrière ici.

64
00:04:52,475 --> 00:04:59,420
Donc, je dirais et dans les qootes arrière, je peux même faire des modèles comme celui-ci.

65
00:04:59,420 --> 00:05:07,360
Donc, je peux dire h1 puis titre.

66
00:05:07,360 --> 00:05:17,060
Donc, ce serait ce que nous appelons comme modèle en ligne que nous utilisons dans notre application.

67
00:05:17,060 --> 00:05:19,280
Maintenant, si vous utilisez des guillemets arrière,

68
00:05:19,280 --> 00:05:23,690
vous pouvez également utiliser des choses comme dollar add on dans

69
00:05:23,690 --> 00:05:28,955
afin d'utiliser des variables dans vos modèles et ainsi de suite.

70
00:05:28,955 --> 00:05:31,235
Dans ce cours particulier,

71
00:05:31,235 --> 00:05:34,820
, nous allons utiliser des fichiers modèles distincts

72
00:05:34,820 --> 00:05:39,590
et créer les modèles dans ces fichiers HTML à la place.

73
00:05:39,590 --> 00:05:45,050
Je préfère cette méthode de définition de mes modèles plutôt que de faire des modèles en ligne.

74
00:05:45,050 --> 00:05:49,180
Mais si votre modèle est très simple et ne contient que deux ou trois lignes,

75
00:05:49,180 --> 00:05:56,235
alors utilisez par tous les moyens un modèle en ligne comme celui-ci dans votre application.

76
00:05:56,235 --> 00:06:02,930
Alors, laissez-moi revenir à ma valeur d'origine ici.

77
00:06:02,930 --> 00:06:04,770
Même chose pour les styles.

78
00:06:04,770 --> 00:06:08,240
Aussi, je peux simplement dire des styles et puis dans les guillemets arrière

79
00:06:08,240 --> 00:06:12,500
incluent mes classes CSS dans les guillemets arrière.

80
00:06:12,500 --> 00:06:15,245
Bien que comme je l'ai mentionné,

81
00:06:15,245 --> 00:06:24,895
je préfère les garder dans des fichiers séparés juste pour avoir du code propre dans mes fichiers .ts ici.

82
00:06:24,895 --> 00:06:27,515
Nous avons donc des styles de modèle de sélecteur.

83
00:06:27,515 --> 00:06:30,010
Nous aurons aussi un autre appelé ID du module.

84
00:06:30,010 --> 00:06:33,020
Pour le moment, je ne l'utilise pas pour mon composant,

85
00:06:33,020 --> 00:06:40,395
mais dans certains cas, vous devrez spécifier explicitement l'ID du module pour votre composant.

86
00:06:40,395 --> 00:06:44,610
Nous en verrons quelques exemples un peu plus tard.

87
00:06:44,610 --> 00:06:50,955
Maintenant, en outre, un composant n'est rien d'autre qu'une classe JavaScript ou une classe Type Script.

88
00:06:50,955 --> 00:06:53,615
C'est pourquoi vous voyez ici,

89
00:06:53,615 --> 00:06:58,960
définissant une classe disant AppComponent et ensuite vous exportez cette classe.

90
00:06:58,960 --> 00:07:01,820
La raison pour laquelle nous utilisons l'export ici,

91
00:07:01,820 --> 00:07:06,820
afin que ce composant puisse être importé dans mon module d'application.

92
00:07:06,820 --> 00:07:10,070
Donc vous avez vu que nous importons ceci dans mon module d'application.

93
00:07:10,070 --> 00:07:18,350
Donc, chaque fois que vous voulez rendre un composant ou un module portable dans un autre module,

94
00:07:18,350 --> 00:07:25,245
alors vous feriez toujours précéder l'exportation vers la classe ici.

95
00:07:25,245 --> 00:07:28,040
Donc, en plus, aussi,

96
00:07:28,040 --> 00:07:34,295
nous voyons que nous avons quelques propriétés locales que nous avons définies

97
00:07:34,295 --> 00:07:43,220
dans nos classes ici et celles-ci seraient accessibles via mon modèle.

98
00:07:43,220 --> 00:07:45,340
Donc, je peux les utiliser dans mon modèle.

99
00:07:45,340 --> 00:07:48,170
Donc, les propriétés qui sont définies dans mon fichier

100
00:07:48,170 --> 00:07:53,230
component.ts sont accessibles à partir de mes fichiers de modèle.

101
00:07:53,230 --> 00:08:00,875
Nous parlerons de l'aspecteur de liaison de données un peu plus tard dans une autre leçon.

102
00:08:00,875 --> 00:08:08,075
Pour résumer, ce que nous avons appris jusqu'à présent est qu'un composant est défini par

103
00:08:08,075 --> 00:08:15,990
spécifiant le code et spécifiant également le modèle correspondant.

104
00:08:15,990 --> 00:08:19,850
Ainsi, à l'intérieur du code, vous pouvez définir des propriétés et des méthodes

105
00:08:19,850 --> 00:08:24,455
qui seront accessibles à partir de votre modèle à partir du modèle correspondant.

106
00:08:24,455 --> 00:08:26,530
Ainsi, comme vous l'avez vu, dans les métadonnées,

107
00:08:26,530 --> 00:08:29,370
dans le décorateur, dans le décorateur de composant,

108
00:08:29,370 --> 00:08:33,425
vous avez spécifié le nom de fichier de modèle comme un

109
00:08:33,425 --> 00:08:38,380
des propriétés de votre classe de composant ici.

110
00:08:38,380 --> 00:08:41,870
De même, toutes les propriétés et méthodes que vous définissez dans

111
00:08:41,870 --> 00:08:45,875
votre composant seront accessibles à partir de votre modèle.

112
00:08:45,875 --> 00:08:49,645
Non seulement cela, vous pouvez également avoir ce qui est appelé comme liaison d'événement

113
00:08:49,645 --> 00:08:53,450
de votre modèle vers vos composants.

114
00:08:53,450 --> 00:08:57,320
Donc, si des événements sont générés dans vos modèles, donc par exemple,

115
00:08:57,320 --> 00:09:02,180
en cliquant sur un bouton sur votre modèle qui peut déclencher

116
00:09:02,180 --> 00:09:08,535
appels à des méthodes à l'intérieur de votre code ici,

117
00:09:08,535 --> 00:09:11,400
le Javascript ou le code Type Script ici.

118
00:09:11,400 --> 00:09:16,790
Nous verrons l'utilisation de ceux dans l'une des leçons ultérieures et puis là, je vais, encore une fois,

119
00:09:16,790 --> 00:09:20,180
revoir ce point sur la liaison de propriété et la liaison d'événement,

120
00:09:20,180 --> 00:09:23,500
et vous expliquer cela plus en détail.

121
00:09:23,500 --> 00:09:29,840
Les composants d'une application Angular peuvent eux-mêmes être organisés en hiérarchie.

122
00:09:29,840 --> 00:09:32,470
Donc, vous aurez toujours un composant racine.

123
00:09:32,470 --> 00:09:33,835
Donc, pour notre application,

124
00:09:33,835 --> 00:09:37,130
le fichier app.component.ts et

125
00:09:37,130 --> 00:09:43,039
le modèle HTML correspondant forment le composant racine de notre application

126
00:09:43,039 --> 00:09:46,724
et ce composant racine peut alors contenir des composants

127
00:09:46,724 --> 00:09:52,825
dans une hiérarchie et peut inclure des composants dans la hiérarchie.

128
00:09:52,825 --> 00:09:56,750
Nous verrons que dans le tout prochain exercice,

129
00:09:56,750 --> 00:10:02,275
où nous allons créer un autre composant, puis l'utiliser dans notre composant racine.

130
00:10:02,275 --> 00:10:04,960
Ainsi, vous pouvez avoir plusieurs composants étant

131
00:10:04,960 --> 00:10:08,005
inclus dans votre composant racine et ces composants

132
00:10:08,005 --> 00:10:13,690
eux-mêmes peuvent utiliser d'autres composants qui sont inclus à l'intérieur d'eux.

133
00:10:13,690 --> 00:10:21,075
Donc, cette hiérarchie de composants vous permet de concevoir l'écran de votre application.

134
00:10:21,075 --> 00:10:24,940
Avec cette compréhension rapide des composants

135
00:10:24,940 --> 00:10:28,810
et de la façon dont les composants sont utiles pour la conception de notre application,

136
00:10:28,810 --> 00:10:32,935
nous allons maintenant passer à notre prochain exercice où nous allons créer

137
00:10:32,935 --> 00:10:37,339
et ajouter un autre composant à notre application Angular

138
00:10:37,339 --> 00:10:41,810
, puis nous définirons un modèle pour ce composant et nous allons ensuite nous utilisera

139
00:10:41,810 --> 00:10:47,230
ce composant à l'intérieur de notre composant racine pour concevoir notre écran.