1
00:00:00,000 --> 00:00:06,150
Maintenant, nous allons passer à

2
00:00:06,150 --> 00:00:09,045
notre prochain exercice où nous allons créer

3
00:00:09,045 --> 00:00:13,275
un nouveau composant et l'ajouter à notre application Angular.

4
00:00:13,275 --> 00:00:17,430
Ensuite, nous utiliserons ce composant pour contrôler une partie

5
00:00:17,430 --> 00:00:22,380
de l'écran que nous avons conçu pour notre application Angular.

6
00:00:22,380 --> 00:00:27,380
L'écran de notre application Angular est assez ennuyeux pour le moment.

7
00:00:27,380 --> 00:00:32,240
Tout ce que nous avons est une barre d'outils en haut, puis un écran blanc

8
00:00:32,240 --> 00:00:35,595
vierge ici, mais cela nous donne aussi des idées.

9
00:00:35,595 --> 00:00:39,560
Nous pouvons maintenant prendre du contenu supplémentaire et ensuite

10
00:00:39,560 --> 00:00:43,970
placer cela dans cette partie de l'écran ici. Comment on fait ça ?

11
00:00:43,970 --> 00:00:46,850
Nous pouvons créer un nouveau composant, puis remettre

12
00:00:46,850 --> 00:00:49,460
sur cette partie de l'écran à ce composant et dire,

13
00:00:49,460 --> 00:00:53,450
« Vous prenez soin de rendre ce que vous voulez dans cette partie de l'écran. »

14
00:00:53,450 --> 00:00:58,055
Donc, cette vue sera contrôlée par le nouveau composant.

15
00:00:58,055 --> 00:01:03,345
Comment faisons-nous ça ? Passons à l'exercice maintenant.

16
00:01:03,345 --> 00:01:06,610
Pour commencer l'exercice,

17
00:01:06,610 --> 00:01:10,620
allez aux instructions d'exercice qui suivent cette vidéo particulière.

18
00:01:10,620 --> 00:01:12,555
Ensuite, dans les instructions d'exercice,

19
00:01:12,555 --> 00:01:15,680
vous verrez quelques ressources d'exercice,

20
00:01:15,680 --> 00:01:18,290
qui est un fichier zip à votre disposition.

21
00:01:18,290 --> 00:01:23,085
Téléchargez ce fichier zip sur votre ordinateur,

22
00:01:23,085 --> 00:01:28,320
et cela vous donnera un fichier images.zip.

23
00:01:28,320 --> 00:01:36,340
Donc, enregistrez-le en tant que fichier images.zip dans votre dossier de téléchargements,

24
00:01:36,340 --> 00:01:39,140
décompressez-le, puis cela vous donnera

25
00:01:39,140 --> 00:01:42,200
un dossier d'images contenant

26
00:01:42,200 --> 00:01:46,700
un ensemble d'images que nous allons utiliser dans notre application.

27
00:01:46,700 --> 00:01:51,379
Décompressez le fichier images.zip que vous venez de télécharger,

28
00:01:51,379 --> 00:01:56,415
et déplacez ce fichier images.zip dans votre projet,

29
00:01:56,415 --> 00:01:58,130
et dans votre projet,

30
00:01:58,130 --> 00:02:02,695
dans le dossier sources et assets ici.

31
00:02:02,695 --> 00:02:08,645
Donc, encore une fois, déplacez le dossier images que vous obtenez en

32
00:02:08,645 --> 00:02:15,110
décompressant le fichier images.zip, puis déplacez ce dossier images dans votre application,

33
00:02:15,110 --> 00:02:17,465
donc, à l'intérieur de votre application,

34
00:02:17,465 --> 00:02:22,670
sous le sous-dossier sources et assets.

35
00:02:22,670 --> 00:02:26,975
Ces images qui sont fournies ici seront

36
00:02:26,975 --> 00:02:31,690
disponibles pour une utilisation dans votre application Angular.

37
00:02:31,690 --> 00:02:37,310
Maintenant, nous allons utiliser la CLI Angular pour

38
00:02:37,310 --> 00:02:43,025
générer automatiquement un composant pour nous et l'ajouter à notre application Angular.

39
00:02:43,025 --> 00:02:45,750
Donc, dans le terminal,

40
00:02:45,750 --> 00:02:50,420
allez dans le dossier contenant votre application Angular et tapez

41
00:02:50,420 --> 00:02:56,960
ng generate menu composant.

42
00:02:56,960 --> 00:03:00,570
Donc, nous nommons ce composant comme MenuComponent.

43
00:03:00,570 --> 00:03:03,980
Ce MenuComponent contiendra le menu pour

44
00:03:03,980 --> 00:03:08,390
le restaurant pour lequel nous préparons notre application Angular.

45
00:03:08,390 --> 00:03:10,460
Donc, lorsque vous tapez ceci,

46
00:03:10,460 --> 00:03:11,975
cela générera automatiquement

47
00:03:11,975 --> 00:03:16,350
le MenuComponent, puis l'ajoutera à votre application Angular.

48
00:03:16,350 --> 00:03:19,970
Ce MenuComponent sera créé et ajouté dans

49
00:03:19,970 --> 00:03:27,300
le dossier source/app/menu de votre application.

50
00:03:27,300 --> 00:03:33,050
Donc, il va créer un ensemble de fichiers dans le dossier de menu.

51
00:03:33,050 --> 00:03:35,550
Ainsi, vous pouvez voir qu'il crée un fichier SCSS,

52
00:03:35,550 --> 00:03:38,310
un fichier HTML, et le fichier ts,

53
00:03:38,310 --> 00:03:40,630
et ensuite quelque chose appelé le fichier ts spectral.

54
00:03:40,630 --> 00:03:42,495
On y reviendra plus tard.

55
00:03:42,495 --> 00:03:48,140
Ensuite, aussi, il mettra à jour votre fichier app module.ts.

56
00:03:48,140 --> 00:03:52,920
Alors, allons jeter un oeil à ce qui vient de se passer lorsque vous

57
00:03:52,920 --> 00:03:58,415
a créé ce MenuComponent et l'a ajouté à votre application Angular.

58
00:03:58,415 --> 00:04:01,040
Allons à l'éditeur.

59
00:04:01,040 --> 00:04:03,930
En arrivant à notre éditeur,

60
00:04:03,930 --> 00:04:05,245
, vous remarquerez maintenant que

61
00:04:05,245 --> 00:04:06,650
dans le dossier app,

62
00:04:06,650 --> 00:04:09,380
il y a un nouveau dossier appelé menu,

63
00:04:09,380 --> 00:04:16,210
et ce dossier contient tous les fichiers associés au MenuComponent ici.

64
00:04:16,210 --> 00:04:22,385
L'interface de ligne de commande angulaire suit le guide de style standard angulaire.

65
00:04:22,385 --> 00:04:25,715
Le guide de style suggère que chaque composant devrait être placé

66
00:04:25,715 --> 00:04:29,765
dans son propre dossier comme on le voit ici,

67
00:04:29,765 --> 00:04:34,220
et j'aime à peu près ceci parce que je suis très obsessionnel à propos de

68
00:04:34,220 --> 00:04:38,840
le garder propre hiérarchie pour mes dossiers d'application ici.

69
00:04:38,840 --> 00:04:41,825
Donc, cela fonctionne très bien pour moi.

70
00:04:41,825 --> 00:04:44,545
Certaines personnes aiment une hiérarchie plate,

71
00:04:44,545 --> 00:04:46,570
mais je suis juste confondu avec cette partie.

72
00:04:46,570 --> 00:04:51,455
Donc, je préfère stocker chaque composant dans son propre dossier.

73
00:04:51,455 --> 00:04:53,480
Donc, ça marche bien pour moi.

74
00:04:53,480 --> 00:04:58,430
Maintenant, si vous ouvrez le fichier app module.ts,

75
00:04:58,430 --> 00:05:02,390
, vous remarquerez que le fichier app module.ts a été mis à jour

76
00:05:02,390 --> 00:05:06,810
en incluant une autre importation dans le fichier app module.ts.

77
00:05:06,810 --> 00:05:09,435
Donc, vous voyez que, avec AppComponent,

78
00:05:09,435 --> 00:05:15,235
le MenuComponent a été automatiquement ajouté en tant qu'importation dans votre module d'application.

79
00:05:15,235 --> 00:05:17,570
Donc, cela signifie que MenuComponent est maintenant

80
00:05:17,570 --> 00:05:20,470
disponible pour votre application Angular à utiliser.

81
00:05:20,470 --> 00:05:26,590
Aussi, si vous vérifiez la propriété des déclarations à l'intérieur du décorateur NgModule,

82
00:05:26,590 --> 00:05:29,160
vous verrez que dans la propriété des déclarations,

83
00:05:29,160 --> 00:05:31,465
en plus du AppComponent,

84
00:05:31,465 --> 00:05:34,120
vous avez également le MenuComponent inclus.

85
00:05:34,120 --> 00:05:37,270
C'est la raison pour laquelle j'aime Angular CLI,

86
00:05:37,270 --> 00:05:40,035
parce que cela simplifie tout cela a fonctionné pour moi.

87
00:05:40,035 --> 00:05:41,945
Si je devais le faire à la main,

88
00:05:41,945 --> 00:05:48,710
je devrai aller manuellement dans l'application module.ts et ensuite taper tout ce code là-bas,

89
00:05:48,710 --> 00:05:53,830
et il y a une forte probabilité que je finisse par faire des erreurs là-bas.

90
00:05:53,830 --> 00:05:57,800
Donc, nous nous épargnons beaucoup de problèmes en utilisant l'interface de ligne de commande angulaire.

91
00:05:57,800 --> 00:05:59,720
Donc, c'est pourquoi je suis tombé amoureux de

92
00:05:59,720 --> 00:06:04,455
Angular CLI pour créer mes applications Angular.

93
00:06:04,455 --> 00:06:07,965
Donc, avec cela, nous avons mis en place

94
00:06:07,965 --> 00:06:11,570
notre MenuComponent pour être disponible pour notre application Angular.

95
00:06:11,570 --> 00:06:14,505
Maintenant, où vais-je utiliser le MenuComponent ?

96
00:06:14,505 --> 00:06:21,460
Je vais utiliser le MenuComponent dans mon modèle AppComponents.

97
00:06:21,460 --> 00:06:25,275
Donc, je vais aller au modèle AppComponents, puis

98
00:06:25,275 --> 00:06:29,810
inclure le MenuComponent ici dans mon AppComponent.

99
00:06:29,810 --> 00:06:37,795
Donc, cela va essentiellement passer cette partie de l'écran à mon MenuComponent.

100
00:06:37,795 --> 00:06:38,980
Comment faisons-nous ça ?

101
00:06:38,980 --> 00:06:44,300
Pour ce faire, nous allons d'abord jeter un coup d'œil au fichier MenuComponent.ts.

102
00:06:44,300 --> 00:06:47,425
Ainsi, lorsque vous ouvrez le fichier MenuComponent.ts,

103
00:06:47,425 --> 00:06:54,225
, vous verrez que le sélecteur du MenuComponent a été défini comme app-menu.

104
00:06:54,225 --> 00:07:02,615
Donc, c'est le nom de sélecteur standard que l'interface de ligne de commande angulaire donne pour vos composants.

105
00:07:02,615 --> 00:07:04,840
Vous pouvez changer cela si vous le souhaitez,

106
00:07:04,840 --> 00:07:07,970
mais quel que soit le sélecteur que vous spécifiez ici,

107
00:07:07,970 --> 00:07:15,670
qui formerait les balises que vous utilisez pour l'inclure dans votre fichier de modèle.

108
00:07:15,670 --> 00:07:20,195
Donc, revenant à AppComponent.html,

109
00:07:20,195 --> 00:07:23,795
maintenant, si je veux inclure le fichier de menu ici,

110
00:07:23,795 --> 00:07:24,930
donc je dirai juste,

111
00:07:24,930 --> 00:07:31,775
app menu tag et voila,

112
00:07:31,775 --> 00:07:35,360
que une partie de l'écran est maintenant remise à mon MenuComponent,

113
00:07:35,360 --> 00:07:40,640
et c'est au MenuComponent de décider ce qu'il veut y placer.

114
00:07:40,640 --> 00:07:42,420
Donc, peu importe ce qui est défini,

115
00:07:42,420 --> 00:07:49,535
le modèle MenuComponents sera placé ici.

116
00:07:49,535 --> 00:07:53,630
Donc, maintenant, tout ce qui nous reste est d'aller préparer

117
00:07:53,630 --> 00:07:58,695
notre MenuComponent pour montrer les informations appropriées pour nous.

118
00:07:58,695 --> 00:08:00,885
Sauvegardons les changements,

119
00:08:00,885 --> 00:08:04,825
et ensuite nous passerons à

120
00:08:04,825 --> 00:08:11,715
l'étape suivante où nous allons créer le menu pour notre restaurant en utilisant le MenuComponent.

121
00:08:11,715 --> 00:08:14,845
Avant de faire cela,

122
00:08:14,845 --> 00:08:17,625
ce que je vais faire est,

123
00:08:17,625 --> 00:08:19,830
aller dans le dossier de l'application ici,

124
00:08:19,830 --> 00:08:22,090
et ensuite dans le dossier de l'application,

125
00:08:22,090 --> 00:08:29,660
Je vais créer un nouveau sous-dossier et le nommer comme sous-dossier partagé.

126
00:08:29,660 --> 00:08:34,015
Maintenant, tous les fichiers que je vais partager sur différents composants,

127
00:08:34,015 --> 00:08:37,040
Je vais le mettre dans le dossier partagé ici.

128
00:08:37,040 --> 00:08:39,160
Maintenant, dans le dossier partagé,

129
00:08:39,160 --> 00:08:45,895
Je vais créer un nouveau fichier nommé dish.ts.

130
00:08:45,895 --> 00:08:51,650
A l'intérieur de ce dish.ts, je vais créer une classe pour définir

131
00:08:51,650 --> 00:08:59,050
un plat et le rendre disponible pour les composants restants à utiliser.

132
00:08:59,050 --> 00:09:02,555
Donc, pour définir une classe TypeScript ici,

133
00:09:02,555 --> 00:09:04,240
je dirai export,

134
00:09:04,240 --> 00:09:07,525
donc j'exporte cette classe TypeScript ici,

135
00:09:07,525 --> 00:09:13,550
classe export, puis je nommerai la classe comme plat.

136
00:09:13,550 --> 00:09:16,230
A l'intérieur de cette classe de plat,

137
00:09:16,230 --> 00:09:20,175
Je peux maintenant définir diverses propriétés.

138
00:09:20,175 --> 00:09:21,550
Donc, pour la classe dish,

139
00:09:21,550 --> 00:09:23,050
je vais définir une propriété,

140
00:09:23,050 --> 00:09:27,425
qui est un ID, que je définis comme une chaîne.

141
00:09:27,425 --> 00:09:31,330
Maintenant, notez, si vous venez du monde JavaScript,

142
00:09:31,330 --> 00:09:35,975
en JavaScript, vous n'avez pas besoin de spécifier le type d'une variable.

143
00:09:35,975 --> 00:09:43,380
TypeScript vous permet de spécifier le type de chaque variable.

144
00:09:43,380 --> 00:09:46,405
Donc, si vous spécifiez le nom, la colonne et la chaîne,

145
00:09:46,405 --> 00:09:51,785
cela signifie que la variable name sera toujours du type string.

146
00:09:51,785 --> 00:09:55,595
Donc, si vous essayez d'attribuer un entier au nom,

147
00:09:55,595 --> 00:09:58,400
alors le compilateur TypeScript va automatiquement

148
00:09:58,400 --> 00:10:01,850
attraper cela pour vous et vous dire qu'il y a une erreur.

149
00:10:01,850 --> 00:10:04,855
C'est la raison pour laquelle, en utilisant TypeScript,

150
00:10:04,855 --> 00:10:08,155
, vous pouvez réduire le nombre d'erreurs que vous pourriez causer.

151
00:10:08,155 --> 00:10:11,850
JavaScript ne fait traditionnellement pas cette erreur

152
00:10:11,850 --> 00:10:16,790
en vérifiant car il n'a aucun concept de types de données.

153
00:10:16,790 --> 00:10:22,025
Mais si vous venez d'un langage de programmation traditionnel comme C ++ ou Java,

154
00:10:22,025 --> 00:10:24,945
vous êtes très familier avec les types de données,

155
00:10:24,945 --> 00:10:28,565
les types de données primitifs et

156
00:10:28,565 --> 00:10:33,290
d'autres types de types de données déjà définis dans le langage.

157
00:10:33,290 --> 00:10:41,315
TypeScript apporte cette fonctionnalité à JavaScript ou plutôt dans le cadre de TypeScript,

158
00:10:41,315 --> 00:10:47,865
et qui vous permet de définir des variables et d'attacher des types à ces variables,

159
00:10:47,865 --> 00:10:49,950
d'où le nom TypeScript.

160
00:10:49,950 --> 00:10:51,500
Donc, pour le plat,

161
00:10:51,500 --> 00:10:53,970
Je vais créer une propriété de nom.

162
00:10:53,970 --> 00:10:57,870
Ensuite, je vais créer une propriété image,

163
00:10:57,870 --> 00:10:59,640
qui est aussi une chaîne.

164
00:10:59,640 --> 00:11:03,710
Cette chaîne d'image sera une chaîne qui pointe vers

165
00:11:03,710 --> 00:11:08,635
l'URL de l'image que je vais utiliser pour ce plat particulier.

166
00:11:08,635 --> 00:11:18,230
Ensuite, je vais définir une catégorie pour ce plat comme une autre chaîne en vedette comme booléenne,

167
00:11:18,230 --> 00:11:21,130
étiquette comme une chaîne.

168
00:11:21,150 --> 00:11:31,810
Prix sous forme de chaîne, puis description sous forme de chaîne.

169
00:11:31,810 --> 00:11:37,695
Donc, ce sont des propriétés que j'associe à la classe de plat.

170
00:11:37,695 --> 00:11:43,440
Donc, cela va définir différents plats dans mon menu de mon restaurant,

171
00:11:43,440 --> 00:11:48,060
et pour chaque plat, je dois spécifier toutes ces différentes propriétés.

172
00:11:48,060 --> 00:11:49,325
Maintenant, pourquoi aurais-je besoin de ça ?

173
00:11:49,325 --> 00:11:54,400
Cela m'aidera à construire le menu de mon restaurant comme vous le verrez bientôt.

174
00:11:54,400 --> 00:12:02,890
Donc, avec cela, nous terminons la définition de ma classe là-bas.

175
00:12:02,890 --> 00:12:06,940
Sauvegardons les modifications dans le fichier dish.ts.

176
00:12:06,940 --> 00:12:11,300
Maintenant, ce fichier dish.ts exporte une classe.

177
00:12:11,300 --> 00:12:15,820
Maintenant, je peux importer cette classe dans n'importe lequel des fichiers de script de type composant

178
00:12:15,820 --> 00:12:22,485
de mon application.

179
00:12:22,485 --> 00:12:28,550
Ensuite, je vais passer à mon fichier menu.component.ts.

180
00:12:28,550 --> 00:12:34,484
À l'intérieur du fichier menu.component.ts en plus d'importer le composant,

181
00:12:34,484 --> 00:12:38,420
, je verrai également que vous importez un OnInit là.

182
00:12:38,420 --> 00:12:41,885
Nous reviendrons à la partie OnInit dans l'un des exercices ultérieurs.

183
00:12:41,885 --> 00:12:45,475
Je vais vous expliquer ce que cela fait dans un exercice ultérieur.

184
00:12:45,475 --> 00:12:53,820
Nous allons également importer la nouvelle classe que nous avons créée appelée la classe Dish.

185
00:12:53,820 --> 00:12:56,160
Pourquoi importons-nous cette classe de plats ?

186
00:12:56,160 --> 00:13:03,180
Pour que nous puissions l'utiliser comme type pour une variable que je définit ici.

187
00:13:03,180 --> 00:13:04,850
Alors, où est ce cours de plat ?

188
00:13:04,850 --> 00:13:13,955
Il est dans../shared/dish.

189
00:13:13,955 --> 00:13:17,890
Donc, c'est dans le dossier plat partagé ci-dessus.

190
00:13:17,890 --> 00:13:22,460
Ensuite, vous verrez que nous avons défini le composant de menu ici.

191
00:13:22,460 --> 00:13:23,640
Donc, vous pouvez voir qu'il dit,

192
00:13:23,640 --> 00:13:27,950
« Exporter le composant de menu de classe », puis il dit, « Implémenter dessus. »

193
00:13:27,950 --> 00:13:30,630
Nous reviendrons à cela dans un peu plus tard.

194
00:13:30,630 --> 00:13:37,130
Vous voyez aussi qu'il y a un constructeur et qu'il y a une autre méthode ici appelée NGOnit.

195
00:13:37,130 --> 00:13:40,170
Nous allons les utiliser dans certains exercices ultérieurs.

196
00:13:40,170 --> 00:13:42,970
Alors, laissons-le là en tant que tel et nous reviendrons à

197
00:13:42,970 --> 00:13:46,565
pour comprendre ce que c'est dans un court laps de temps.

198
00:13:46,565 --> 00:13:48,940
Aussi, notez que pour ce composant,

199
00:13:48,940 --> 00:13:52,040
le modèle est défini dans le composant de menu point HTML,

200
00:13:52,040 --> 00:13:56,070
et les URL de style qui y sont définies.

201
00:13:56,070 --> 00:14:02,170
Maintenant, en plus, dans ma classe de composant de menu,

202
00:14:02,170 --> 00:14:07,100
, je vais inclure une nouvelle variable appelée comme

203
00:14:07,100 --> 00:14:14,660
plats qui serait un tableau du type de plat.

204
00:14:14,660 --> 00:14:21,540
Ok ? Ensuite, je vais simplement inclure l'ensemble de plats

205
00:14:21,540 --> 00:14:29,955
dans ma variable vaisselle que j'ai définie ici.

206
00:14:29,955 --> 00:14:35,040
Maintenant, taper tout ça à la main va me prendre beaucoup de temps.

207
00:14:35,040 --> 00:14:39,060
Donc, au lieu de cela, ce que je vous suggère de faire est juste d'aller copier

208
00:14:39,060 --> 00:14:45,780
le contenu directement à partir des instructions qui suivent cette vidéo.

209
00:14:45,780 --> 00:14:47,350
Alors, c'est ce que je vais faire.

210
00:14:47,350 --> 00:14:50,810
Alors revenez et collez ça ici.

211
00:14:50,810 --> 00:14:55,720
Vous pouvez maintenant voir que j'ai coupé et collé les informations pour

212
00:14:55,720 --> 00:15:00,120
tous mes plats à partir des instructions ici.

213
00:15:00,120 --> 00:15:07,045
Donc, cela complète le tableau de tous les plats qui sont définis dans mes instructions.

214
00:15:07,045 --> 00:15:11,035
Donc, c'est la façon la plus simple d'obtenir cette information.

215
00:15:11,035 --> 00:15:13,525
Donc, il suffit de le couper et de le coller à partir de là.

216
00:15:13,525 --> 00:15:16,800
Maintenant, notez que pour ce plat,

217
00:15:16,800 --> 00:15:20,885
chacun d'eux est ici un objet JavaScript.

218
00:15:20,885 --> 00:15:25,240
Donc, cela peut être mappé dans la classe de script de type correspondante là-bas.

219
00:15:25,240 --> 00:15:28,700
Donc, vous pouvez voir que chaque objet JavaScript a des propriétés là-bas,

220
00:15:28,700 --> 00:15:35,245
et ces propriétés correspondent exactement aux propriétés que j'ai définies pour ma classe de plat.

221
00:15:35,245 --> 00:15:37,080
Donc, une fois que j'ai défini cela,

222
00:15:37,080 --> 00:15:39,430
alors ces plats deviendront maintenant un tableau de

223
00:15:39,430 --> 00:15:42,020
plats et cela deviendra maintenant disponible pour

224
00:15:42,020 --> 00:15:48,420
à utiliser lorsque je définirai mon modèle HTML pour mon menu.

225
00:15:48,420 --> 00:15:53,715
Sauvegardons les modifications que nous avons faites jusqu'à présent et puis nous allons

226
00:15:53,715 --> 00:15:59,410
ouvrir le fichier menu.component.html.

227
00:15:59,410 --> 00:16:02,580
Donc, nous allons aller au fichier menu.component.html.

228
00:16:02,580 --> 00:16:06,280
Vous verrez que dans le fichier menu.component.html,

229
00:16:06,280 --> 00:16:11,390
vous avez actuellement juste un P avec menu fonctionne ici.

230
00:16:11,390 --> 00:16:17,390
Donc, si vous venez de coller là-dedans et de voir l'application fonctionner,

231
00:16:17,390 --> 00:16:20,500
vous auriez vu que ce menu fonctionne à l'écran.

232
00:16:20,500 --> 00:16:25,640
Je vais remplacer ceci par mon propre code de modèle ici.

233
00:16:25,640 --> 00:16:31,230
C'est là que je vais prendre l'aide de la disposition de flex angulaire pour m'aider

234
00:16:31,230 --> 00:16:37,125
à bien exposer mon contenu sur mon écran.

235
00:16:37,125 --> 00:16:38,885
Donc, pour commencer,

236
00:16:38,885 --> 00:16:41,490
Je vais commencer par un div,

237
00:16:41,490 --> 00:16:46,480
auquel j'appliquerai une classe appelée conteneur.

238
00:16:46,480 --> 00:16:49,710
Je vais définir la classe de conteneur en utilisant

239
00:16:49,710 --> 00:16:55,360
du code CSS un peu plus tard dans cet exercice.

240
00:16:55,360 --> 00:16:57,715
Donc, je vais appliquer le conteneur de classe ici.

241
00:16:57,715 --> 00:17:04,640
Je vais également définir une propriété appelée fxlayout.

242
00:17:04,640 --> 00:17:07,545
Un attribut appelé fxlayout.

243
00:17:07,545 --> 00:17:10,205
Maintenant, ce fxlayout est un attribut

244
00:17:10,205 --> 00:17:15,015
que la disposition de flex angulaire me permet d'appliquer à un div.

245
00:17:15,015 --> 00:17:20,295
Cela spécifie si les divers contenus

246
00:17:20,295 --> 00:17:25,440
que j'inclut à l'intérieur de ces div doivent être disposés horizontalement ou verticalement.

247
00:17:25,440 --> 00:17:28,755
Donc, je vais spécifier ceci pour être une colonne.

248
00:17:28,755 --> 00:17:32,675
Donc, quel que soit le contenu que j'inclue dans ce div,

249
00:17:32,675 --> 00:17:36,105
sera disposé verticalement l'un en dessous de l'autre sur mon écran.

250
00:17:36,105 --> 00:17:43,855
Si vous avez vu la façon de travailler sur la grille avec du contenu dans Bootstrap,

251
00:17:43,855 --> 00:17:47,100
vous verrez que cela me dit essentiellement que je vais aller

252
00:17:47,100 --> 00:17:50,970
tout mettre en une seule colonne là-bas.

253
00:17:50,970 --> 00:17:55,700
Ne confondez pas cette colonne avec la colonne de Bootstrap de la grille de Bootstrap.

254
00:17:55,700 --> 00:17:57,185
Ce sont deux choses différentes.

255
00:17:57,185 --> 00:18:01,290
Ici, l'attribut est fxlayout et je spécifie colonne.

256
00:18:01,290 --> 00:18:03,240
Je peux également spécifier ceci comme ligne,

257
00:18:03,240 --> 00:18:07,470
ce qui signifie que le contenu sera disposé horizontalement.

258
00:18:07,470 --> 00:18:14,590
Maintenant aussi, un attribut de plus que je vais spécifier pour cela est fxLayoutGap,

259
00:18:14,590 --> 00:18:18,705
que je vais spécifier comme 10 pixel.

260
00:18:18,705 --> 00:18:23,330
Donc, ce que cela signifie est que tout contenu que j'inclue ici

261
00:18:23,330 --> 00:18:27,690
sera séparé l'un de l'autre par un écart de 10 pixels entre chacun d'eux.

262
00:18:27,690 --> 00:18:33,745
De la connaissance de Bootstraps, vous voyez ce qu'est une limite.

263
00:18:33,745 --> 00:18:38,050
Cela définit une séparation de coupure entre

264
00:18:38,050 --> 00:18:42,925
deux éléments de contenu dans mon modèle d'application.

265
00:18:42,925 --> 00:18:46,945
Donc, avec cela, nous fermerons la div ici.

266
00:18:46,945 --> 00:18:49,080
Maintenant, dans ce div,

267
00:18:49,080 --> 00:18:57,735
, je vais définir le contenu réel qui ira dans mon fichier menu.component.html.

268
00:18:57,735 --> 00:19:04,035
Maintenant ici, je vais utiliser un autre composant que la conception matérielle

269
00:19:04,035 --> 00:19:10,745
me fournit appelé comme composant de liste de tapis.

270
00:19:10,745 --> 00:19:14,470
Donc, ce composant me permet de créer une liste d'éléments

271
00:19:14,470 --> 00:19:19,215
que j'inclut dans mon modèle ici.

272
00:19:19,215 --> 00:19:25,360
Donc, il s'agit d'un composant de liste de matériaux angulaires.

273
00:19:25,360 --> 00:19:30,980
De Bootstrap, vous remarquez que dans Bootstrap nous avions l'objet média.

274
00:19:30,980 --> 00:19:36,430
Donc, la liste des tapis est comme l'objet multimédia dans un sens de Bootstrap.

275
00:19:36,430 --> 00:19:39,470
Maintenant, je vais appliquer une classe,

276
00:19:39,470 --> 00:19:42,095
un attribut appelé FxFlex.

277
00:19:42,095 --> 00:19:49,990
Maintenant, ce que cela signifie est que tout cela sera traité comme une unité ou un morceau de contenu

278
00:19:49,990 --> 00:19:58,180
qu'ils seront disposés par ma disposition flex ici.

279
00:19:58,180 --> 00:20:01,100
Donc, si vous êtes familier avec CSS flex layout.

280
00:20:01,100 --> 00:20:05,505
Donc, c'est un morceau de contenu qui sera mis en page par ma mise en page CSS flex.

281
00:20:05,505 --> 00:20:09,420
Donc, appliquez FxFlex ici,

282
00:20:09,420 --> 00:20:16,610
et puis à l'intérieur ici je vais définir mat-list-item.

283
00:20:16,610 --> 00:20:18,380
Donc, ceci est un élément de liste ici.

284
00:20:18,380 --> 00:20:22,250
Donc, à partir de vos connaissances HTML,

285
00:20:22,250 --> 00:20:28,090
si la balise LI que vous utilisez en HTML est similaire à ceci ici.

286
00:20:28,090 --> 00:20:31,240
Donc, ceci est un élément de liste de mg ici.

287
00:20:31,240 --> 00:20:34,705
Donc évidemment, à l'intérieur de cet élément de liste,

288
00:20:34,705 --> 00:20:39,220
, vous allez définir la liste des choses.

289
00:20:39,220 --> 00:20:45,750
Maintenant, angular fournit quelques directives structurelles que vous pouvez appliquer

290
00:20:45,750 --> 00:20:53,455
à vos balises ici qui vous permettent de créer votre contenu.

291
00:20:53,455 --> 00:20:58,375
Maintenant, je vais utiliser une directive structurelle appelée ngFor.

292
00:20:58,375 --> 00:21:01,990
Nous verrons comment nous l'utilisons dans ce modèle.

293
00:21:01,990 --> 00:21:04,050
Ensuite, après cet exercice,

294
00:21:04,050 --> 00:21:07,250
, je vais vous expliquer brièvement ce que sont les directives structurelles et

295
00:21:07,250 --> 00:21:11,625
quel est le but qu'elles servent dans la définition de vos modèles ici.

296
00:21:11,625 --> 00:21:15,960
Donc, à l'intérieur de cet élément de liste vide, je vais dire,

297
00:21:15,960 --> 00:21:21,480
star, notez la syntaxe, star ngFor.

298
00:21:22,470 --> 00:21:25,500
Donc, ceci est la directive structurelle,

299
00:21:25,500 --> 00:21:29,585
la directive structurelle ngFor en angulaire.

300
00:21:29,585 --> 00:21:34,690
Ce que cette directive structurelle ngFor vous permet de faire est

301
00:21:34,690 --> 00:21:40,855
d'itérer sur un tableau d'éléments.

302
00:21:40,855 --> 00:21:48,805
Rappelez-vous que nous avons défini les plats comme un tableau d'objets plats dans notre code.

303
00:21:48,805 --> 00:21:51,040
Maintenant, dans mon modèle,

304
00:21:51,040 --> 00:21:54,095
, j'aurai accès à cet objet vaisselle.

305
00:21:54,095 --> 00:21:56,945
Donc ici, si je veux itérer dessus,

306
00:21:56,945 --> 00:21:59,160
comme je le spécifie, je dirai,

307
00:21:59,160 --> 00:22:04,950
« Laissez plat de plats. »

308
00:22:04,950 --> 00:22:11,495
C'est ainsi que fonctionne la syntaxe pour la directive structurelle ngFor.

309
00:22:11,495 --> 00:22:14,020
Alors, laissez plat de plats.

310
00:22:14,020 --> 00:22:21,805
Ce que cela signifie, c'est que la vaisselle est le tableau d'objets plats.

311
00:22:21,805 --> 00:22:24,245
Lorsque nous sélectionnons dire laisser plat de plats,

312
00:22:24,245 --> 00:22:27,130
cela me permettra d'accéder à chaque élément de

313
00:22:27,130 --> 00:22:30,460
le tableau et ensuite cela m'aide à itérer sur le tableau.

314
00:22:30,460 --> 00:22:32,085
C'est comme une boucle for,

315
00:22:32,085 --> 00:22:36,210
si vous êtes familier avec pour les boucles de programmation.

316
00:22:36,210 --> 00:22:40,630
Donc, cela agit comme une boucle for pour vous et puis cela vous aide à itérer

317
00:22:40,630 --> 00:22:46,855
sur tous les éléments du tableau de plats ici.

318
00:22:46,855 --> 00:22:51,050
Ce plat devient un objet JavaScript qui me permet

319
00:22:51,050 --> 00:22:55,350
d'accéder à chaque élément de ce tableau là.

320
00:22:55,350 --> 00:23:00,680
Maintenant, à partir de cela, nous pouvons également maintenant obtenir un accès

321
00:23:00,680 --> 00:23:06,775
aux propriétés de chaque objet individuel à l'intérieur de mon tableau de plats.

322
00:23:06,775 --> 00:23:13,335
Alors, je peux les utiliser pour définir mon modèle ici.

323
00:23:13,335 --> 00:23:16,120
Laissez-moi exposer le modèle et ensuite nous allons revenir en arrière et

324
00:23:16,120 --> 00:23:19,185
regarder comment ces deux sont interdépendants ici.

325
00:23:19,185 --> 00:23:21,760
Maintenant, à l'intérieur de mon élément de liste vide,

326
00:23:21,760 --> 00:23:28,480
Je peux inclure une image avec l'attribut comme matListAvatar.

327
00:23:30,040 --> 00:23:38,625
Donc, cela me permet d'inclure une image et ensuite avec la source spécifiée ici.

328
00:23:38,625 --> 00:23:44,275
Maintenant intéressant, regardez la syntaxe que j'utilise ici.

329
00:23:44,275 --> 00:23:48,380
À l'intérieur des doubles accolades, je vais dire dish.image.

330
00:23:48,560 --> 00:23:55,985
Ce que cela signifie, c'est qu'il s'agit d'une interpolation unidirectionnelle dont nous parlons.

331
00:23:55,985 --> 00:23:58,885
Ici, quand je spécifie cela,

332
00:23:58,885 --> 00:24:07,635
ce que cela signifie est que cette source obtiendra la valeur de dish.image qui a défini dans

333
00:24:07,635 --> 00:24:10,515
mon objet JavaScript que j'ai défini dans

334
00:24:10,515 --> 00:24:17,050
ma classe de script de type là-bas et qui est disponible pour moi pour faire la mise en page ici.

335
00:24:17,050 --> 00:24:22,510
Donc, que la valeur dish.image sera disponible pour moi et aussi pour cette image,

336
00:24:22,510 --> 00:24:28,255
je vais spécifier une valeur alternative comme dish.name.

337
00:24:28,255 --> 00:24:33,770
Rappelons que mon plat avait aussi la propriété name disponible pour

338
00:24:33,770 --> 00:24:39,240
moi afin que cela définit une image pour ma liste ici.

339
00:24:39,240 --> 00:24:42,460
Vous allez bientôt réaliser à quel point cette liste ressemble à

340
00:24:42,460 --> 00:24:46,010
l'écran lorsque nous remplissons ce modèle ici.

341
00:24:46,010 --> 00:24:53,140
De plus, je vais utiliser un h1 avec la balise MatLine.

342
00:24:53,140 --> 00:24:56,500
Encore une fois, c'est l'utilisation de

343
00:24:56,500 --> 00:25:04,900
le composant de matériau angulaire de liste pour définir mon modèle ici.

344
00:25:04,900 --> 00:25:12,800
Donc, je dis h1 MatLine donc cela m'aide à définir une ligne ici et puis à l'intérieur,

345
00:25:12,800 --> 00:25:17,170
Je vais utiliser les doubles accolades et dire dish.name ici.

346
00:25:17,170 --> 00:25:24,930
Donc, cela me permet d'obtenir la valeur du nom du plat là-bas.

347
00:25:24,930 --> 00:25:33,140
Donc, cela définit une ligne, puis le dans la ligne suivante, je vais dire p MatLine.

348
00:25:33,140 --> 00:25:36,370
Donc, je vais utiliser la balise p ici, puis fermer

349
00:25:36,370 --> 00:25:39,655
de la balise p, puis à l'intérieur de la balise p,

350
00:25:39,655 --> 00:25:48,000
je vais utiliser une span pour définir dish.description.

351
00:25:48,000 --> 00:25:52,025
Donc, si vous êtes familier avec les objets JavaScript,

352
00:25:52,025 --> 00:25:56,180
vous voyez maintenant comment j'accède aux propriétés de

353
00:25:56,180 --> 00:26:02,030
mon objet JavaScript ici, dish.description ici.

354
00:26:02,030 --> 00:26:06,595
Pour noter, courir à travers cette fois de plus

355
00:26:06,595 --> 00:26:13,630
l'attribut ngFor me permet d'itérer sur un tableau d'objets ici.

356
00:26:13,630 --> 00:26:17,700
Donc, la vaisselle est ici un tableau d'objets plats.

357
00:26:17,700 --> 00:26:20,865
Donc, quand je dis laisser plat de plats,

358
00:26:20,865 --> 00:26:28,070
ce plat me donnera accès à chaque élément de

359
00:26:28,070 --> 00:26:32,170
mon tableau de plats et je itère sur chaque élément du tableau

360
00:26:32,170 --> 00:26:36,525
et puis je vais créer ce contenu pour chacun d'eux.

361
00:26:36,525 --> 00:26:39,205
Donc, cet élément de liste vide,

362
00:26:39,205 --> 00:26:43,500
agit essentiellement comme une boucle for de

363
00:26:43,500 --> 00:26:47,830
votre langage informatique traditionnel, puis il itère sur

364
00:26:47,830 --> 00:26:52,890
la liste des plats, puis dispose chacun d'eux sur mon écran.

365
00:26:52,890 --> 00:26:54,895
Donc, avec ce changement,

366
00:26:54,895 --> 00:27:00,145
enregistrons le fichier composant du menu.

367
00:27:00,145 --> 00:27:06,800
Ensuite, nous allons à l'app.module.ts et nous devons importer le module MatList dans ce.

368
00:27:06,800 --> 00:27:11,840
Donc, disons, importer MatListModule

369
00:27:11,840 --> 00:27:20,380
de Angular/Material/List.Une fois que nous avons importé cela là,

370
00:27:20,380 --> 00:27:25,390
puis nous descendons et mettons à jour les importations dans

371
00:27:25,390 --> 00:27:30,320
le décorateur de module Ng et ajouter dans

372
00:27:30,320 --> 00:27:36,435
le module MatList à la liste des importations là-bas.

373
00:27:36,435 --> 00:27:42,430
Ceci mon application module.ts est maintenant mis à jour et puis aussi,

374
00:27:42,430 --> 00:27:47,770
Je vais aller dans le fichier styles.scss, puis ajouter

375
00:27:47,770 --> 00:27:53,575
dans la classe conteneur ici.

376
00:27:53,575 --> 00:27:55,890
Que définit la classe conteneur ici ?

377
00:27:55,890 --> 00:28:00,995
La classe conteneur est marge 20 pixels

378
00:28:00,995 --> 00:28:07,830
et afficher flex et enregistrer les modifications.

379
00:28:07,830 --> 00:28:12,210
Maintenant, allons jeter un oeil à notre page Web.

380
00:28:12,210 --> 00:28:14,180
Aller à notre page web.

381
00:28:14,180 --> 00:28:15,885
Voila. Voilà, tu y vas.

382
00:28:15,885 --> 00:28:22,250
Le menu de notre restaurant montré dans toute sa splendeur sur l'écran.

383
00:28:22,250 --> 00:28:25,365
Vous voyez comment ce menu a été créé.

384
00:28:25,365 --> 00:28:30,455
Regardez le tableau d'objets JavaScript que vous avez vu.

385
00:28:30,455 --> 00:28:35,250
Regardez comment chacune des propriétés du tableau d'objets JavaScript a été utilisée et

386
00:28:35,250 --> 00:28:40,490
mappée aux quatre éléments de ma liste.

387
00:28:40,490 --> 00:28:44,170
Regardez comment les images correspondantes ont été incluses ici

388
00:28:44,170 --> 00:28:48,430
en utilisant le MatlistAvatar ici.

389
00:28:48,430 --> 00:28:55,150
Donc, cela crée des images rondes ici, puis notez comment le nom de

390
00:28:55,150 --> 00:29:03,155
le plat est affiché ici, puis la description du plat inclus ici.

391
00:29:03,155 --> 00:29:09,010
Merveilleux. Maintenant, nous avons le menu pour notre restaurant sur

392
00:29:09,010 --> 00:29:14,925
l'écran en utilisant un composant de menu dans Angular.

393
00:29:14,925 --> 00:29:17,625
Ceci termine cet exercice.

394
00:29:17,625 --> 00:29:21,860
Dans cet exercice, nous avons appris à créer un nouveau composant.

395
00:29:21,860 --> 00:29:25,165
l'ajouter dans notre application Angular,

396
00:29:25,165 --> 00:29:28,270
comment inclure ce composant dans le modèle de

397
00:29:28,270 --> 00:29:32,365
un autre composant afin de créer la hiérarchie des composants.

398
00:29:32,365 --> 00:29:39,255
Ensuite, nous avons vu comment nous pouvons utiliser la disposition de flex angulaire et aussi

399
00:29:39,255 --> 00:29:42,700
les composants de conception de matériaux pour concevoir

400
00:29:42,700 --> 00:29:47,560
le modèle pour notre composant de menu pour afficher le contenu ici.

401
00:29:47,560 --> 00:29:52,710
Maintenant, si vous me demandez comment je me souviens de toutes ces choses.

402
00:29:52,710 --> 00:29:54,535
Eh bien, pour être honnête,

403
00:29:54,535 --> 00:29:59,435
vous ne vous souvenez pas de tout, mais vous devez comprendre l'approche.

404
00:29:59,435 --> 00:30:03,035
C'est plus important que d'essayer de mémoriser ces choses.

405
00:30:03,035 --> 00:30:06,735
Maintenant, si vous me demandez où puis-je obtenir les informations sur

406
00:30:06,735 --> 00:30:12,740
le composant de liste à partir du matériau angulaire.

407
00:30:12,740 --> 00:30:16,560
Nous pouvons trier la documentation matérielle angulaire et là vous

408
00:30:16,560 --> 00:30:21,005
aurez les détails sur la façon dont un composant de liste doit être préparé.

409
00:30:21,005 --> 00:30:29,405
Maintenant, où obtenons-nous les détails sur la façon dont nous concevons un composant en angulaire ?

410
00:30:29,405 --> 00:30:33,240
Nous avons juste examiné un peu de cela et puis dans cet exercice,

411
00:30:33,240 --> 00:30:41,080
nous avons appris comment créer un nouveau composant et ensuite l'appliquer dans notre application angulaire.

412
00:30:41,080 --> 00:30:44,790
Donc, c'est un bon point pour vous de faire un commentaire

413
00:30:44,790 --> 00:30:48,905
get avec les composants du message première partie.

414
00:30:48,905 --> 00:30:50,540
Dans le prochain exercice,

415
00:30:50,540 --> 00:30:54,895
nous allons améliorer cela un peu plus en utilisant un autre type

416
00:30:54,895 --> 00:31:00,920
de composant de matériau angulaire pour disposer le contenu sur mon écran.