1
00:00:00,000 --> 00:00:08,745
Maintenant que nous avons une compréhension des applications d'une seule page,

2
00:00:08,745 --> 00:00:10,660
nous allons continuer à travailler sur

3
00:00:10,660 --> 00:00:14,490
notre application angulaire que nous avons travaillé dans les exercices jusqu'à

4
00:00:14,490 --> 00:00:16,980
loin et le développer en

5
00:00:16,980 --> 00:00:21,535
l'application d'une seule page en utilisant le support du module de routeur angulaire.

6
00:00:21,535 --> 00:00:25,110
Nous avons déjà inclus plusieurs composants dans

7
00:00:25,110 --> 00:00:28,770
notre application angulaire dans l'exercice précédent et nous avons déjà

8
00:00:28,770 --> 00:00:32,625
configuré pour que notre application angulaire puisse acheminer

9
00:00:32,625 --> 00:00:37,410
entre deux composants différents.

10
00:00:37,410 --> 00:00:40,970
Maintenant, nous allons intégrer plus dans notre application angulaire et

11
00:00:40,970 --> 00:00:44,960
la développer dans l'application angulaire à part entière avec

12
00:00:44,960 --> 00:00:49,040
la navigation parmi les différentes vues

13
00:00:49,040 --> 00:00:53,790
rendues par les différents composants de notre application.

14
00:00:53,800 --> 00:00:58,275
Continuant avec notre application telle qu'elle est maintenant,

15
00:00:58,275 --> 00:01:05,990
nous avons la maison en cours de rendu lorsque vous naviguez vers notre application

16
00:01:05,990 --> 00:01:09,740
maintenant et puis le modèle Home a

17
00:01:09,740 --> 00:01:13,740
été affiché entre l'en-tête et le pied de page et quand vous allez au Menu,

18
00:01:13,740 --> 00:01:19,920
le menu est affiché entre l'en-tête et le pied de page dans la vue ici.

19
00:01:19,920 --> 00:01:25,490
Maintenant, évidemment, nous devons intégrer les autres composants que nous

20
00:01:25,490 --> 00:01:28,700
inclus dans notre application angulaire

21
00:01:28,700 --> 00:01:32,715
pour le développer comme une application angulaire à part entière.

22
00:01:32,715 --> 00:01:36,135
Dans cet exercice, nous allons intégrer le ContactComponent,

23
00:01:36,135 --> 00:01:38,914
nous mettrons à jour le modèle pour le ContactComponent,

24
00:01:38,914 --> 00:01:43,190
nous mettrons également à jour le modèle pour le HomeComponent et faire ce

25
00:01:43,190 --> 00:01:48,600
un pas vers notre application angulaire d'une seule page.

26
00:01:48,600 --> 00:01:52,585
Commençons par le composant ContactComponent.

27
00:01:52,585 --> 00:01:56,630
Pour commencer, copiez d'abord le modèle pour

28
00:01:56,630 --> 00:02:01,070
le ContactComponent que je vous ai donné dans les instructions d'exercice, puis

29
00:02:01,070 --> 00:02:06,660
le coller dans le fichier contactcomponent.html afin que nous puissions vider

30
00:02:06,660 --> 00:02:13,580
la vue réelle de notre ContactComponent plus en détail ici.

31
00:02:13,580 --> 00:02:18,680
Maintenant, vous pouvez voir que j'ai coupé et collé le code pour

32
00:02:18,680 --> 00:02:24,550
le fichier de modèle à partir des instructions dans mon ContactComponent.

33
00:02:24,550 --> 00:02:27,650
Nous allons terminer l'intégration de

34
00:02:27,650 --> 00:02:30,665
le ContactComponent dans notre application et ensuite nous allons regarder

35
00:02:30,665 --> 00:02:33,590
à quoi ressemble le ContactComponent, puis revenir

36
00:02:33,590 --> 00:02:36,940
et regarder rapidement ce code un peu plus tard.

37
00:02:36,940 --> 00:02:41,660
Maintenant, pour intégrer le ContactComponent dans notre application angulaire,

38
00:02:41,660 --> 00:02:46,910
nous devons inclure un chemin vers le ContactComponent dans nos routes.

39
00:02:46,910 --> 00:02:52,270
Donc, en allant au fichier routes.ts juste après le Menu,

40
00:02:52,270 --> 00:03:01,520
Je vais inclure un autre chemin pour le ContactComponent, j'utiliserai

41
00:03:01,520 --> 00:03:05,480
l'URL comme nous contacter et

42
00:03:05,480 --> 00:03:15,375
le composant correspondant est ContactComponent ici.

43
00:03:15,375 --> 00:03:19,815
Donc, avec cela, nous avons maintenant intégré notre ContactComponent

44
00:03:19,815 --> 00:03:24,725
dans notre application et nous allons enregistrer les changements dans

45
00:03:24,725 --> 00:03:30,935
ceci et ensuite nous devrons également mettre à jour le composant d'en-tête et mettre à jour

46
00:03:30,935 --> 00:03:37,540
le lien a dans le composant d'en-tête pour nous aider à naviguer vers le composant ContactComponent.

47
00:03:37,540 --> 00:03:43,680
Donc, je vais juste copier ceci à partir du menu un lien dans

48
00:03:43,680 --> 00:03:48,710
la barre d'outils de mon composant d'en-tête là-bas, puis copier cela dans

49
00:03:48,710 --> 00:03:53,960
le ContactComponent, puis le mettre à jour en tant que contactez-nous.

50
00:03:53,960 --> 00:03:57,680
Sauvegardons les modifications dans tous les fichiers et

51
00:03:57,680 --> 00:04:02,469
puis jetez un oeil à l'application résultante.

52
00:04:02,469 --> 00:04:05,725
En allant à l'application dans notre navigateur,

53
00:04:05,725 --> 00:04:08,570
si nous naviguons maintenant vers le ContactComponent,

54
00:04:08,570 --> 00:04:12,680
nous pouvons voir que les détails du ContactComponent sont affichés

55
00:04:12,680 --> 00:04:16,790
ici entre l'en-tête et le pied de page comme on s'y attend.

56
00:04:16,790 --> 00:04:18,590
Donc, à l'intérieur du ContactComponent,

57
00:04:18,590 --> 00:04:22,370
nous avons le titre Contact Us

58
00:04:22,370 --> 00:04:26,390
là, puis quelques informations de localisation où j'ai affiché l'adresse.

59
00:04:26,390 --> 00:04:28,490
Donc, ceci est similaire à l'adresse que nous avons

60
00:04:28,490 --> 00:04:30,740
dans le pied de page donc je ne vais pas expliquer que dans le détail

61
00:04:30,740 --> 00:04:36,050
, alors nous avons une autre partie ici où nous incluons la carte de notre emplacement.

62
00:04:36,050 --> 00:04:37,490
Nous ne allons pas le faire pour le moment,

63
00:04:37,490 --> 00:04:41,990
nous allons juste le laisser comme vide et puis vous voyez aussi que j'ai

64
00:04:41,990 --> 00:04:48,150
trois boutons que j'ai inclus ici pour Call, Skype et Email.

65
00:04:48,150 --> 00:04:52,354
Ces trois boutons sont activés dans notre application

66
00:04:52,354 --> 00:04:57,910
et j'utilise le bouton surélevé de tapis pour rendre ces trois boutons.

67
00:04:57,910 --> 00:05:00,980
Donc, vous pouvez voir que ces boutons sont différents de

68
00:05:00,980 --> 00:05:05,080
les autres boutons que vous avez inclus dans votre application là-bas.

69
00:05:05,080 --> 00:05:10,870
Donc, ceci est un composant de bouton surélevé de notre matériau angulaire là-bas.

70
00:05:10,870 --> 00:05:14,195
Donc, après avoir vu le ContactComponent et

71
00:05:14,195 --> 00:05:17,675
le fait que nous sommes capables de naviguer vers le ContactComponent.

72
00:05:17,675 --> 00:05:20,560
Maintenant, à partir des autres composants,

73
00:05:20,560 --> 00:05:22,730
jetons un coup d'œil à

74
00:05:22,730 --> 00:05:29,250
le code HTML que nous avons inclus pour le modèle de notre ContactComponent.

75
00:05:29,250 --> 00:05:33,335
En allant à contactcomponent.html, vous verrez que nous avons

76
00:05:33,335 --> 00:05:38,720
le titre de cette page inclus en utilisant cette div

77
00:05:38,720 --> 00:05:42,965
ici et la deuxième div à l'intérieur ici avec FxFlex

78
00:05:42,965 --> 00:05:48,020
inclut les informations de localisation et ensuite ceci à l'intérieur de cette information d'emplacement,

79
00:05:48,020 --> 00:05:51,260
Je suis à nouveau en train de définir un autre div qui me permettra de

80
00:05:51,260 --> 00:05:55,480
inclure plusieurs vues dans cet autre div ici.

81
00:05:55,480 --> 00:05:57,290
Donc, à l'intérieur de cela, je définit

82
00:05:57,290 --> 00:06:00,410
une autre div avec une colonne de mise en page d'effets et une ligne de calque d'effets.

83
00:06:00,410 --> 00:06:09,675
Donc, c'est une façon imbriquée de définir mes vues CSS Flex ici.

84
00:06:09,675 --> 00:06:11,270
Donc, à l'intérieur de ce nouveau,

85
00:06:11,270 --> 00:06:14,990
J'utilise une vue div Flex avec FxFlex 50 donc il

86
00:06:14,990 --> 00:06:18,900
occupe une moitié, puis FxFlex offset 20 pixels.

87
00:06:18,900 --> 00:06:26,300
Donc, cette vue CSS sera déplacée vers la droite de 20 pixels donc j'ai

88
00:06:26,300 --> 00:06:29,300
une certaine marge là et puis nous avons

89
00:06:29,300 --> 00:06:33,800
l'adresse incluse ici et puis en bas ici,

90
00:06:33,800 --> 00:06:36,080
vous pouvez voir qu'à l'intérieur d'un autre div,

91
00:06:36,080 --> 00:06:42,690
j'ai une balise avec un bouton surélevé mat associé à elle.

92
00:06:42,690 --> 00:06:45,740
C'est ce qui provoque les boutons surélevés que nous

93
00:06:45,740 --> 00:06:49,140
avons en bas de la page Contact là-bas.

94
00:06:49,140 --> 00:06:51,050
Donc, trois d'entre eux ici.

95
00:06:51,050 --> 00:06:52,730
Un pour le numéro de téléphone.

96
00:06:52,730 --> 00:07:00,425
Un pour le Skype et un pour l'email ici et notez aussi que je fais usage de

97
00:07:00,425 --> 00:07:04,010
les icônes Font Awesome pour chacun d'eux, puis la carte

98
00:07:04,010 --> 00:07:08,350
de votre emplacement dans un autre div ici.

99
00:07:08,350 --> 00:07:13,690
Donc, ces deux enferment à l'intérieur de cette div externe qui est à nouveau enfermé à l'intérieur de la div.

100
00:07:13,690 --> 00:07:20,555
Donc, façon imbriquée de définir les dispositions flexibles pour nos différentes parties ici.

101
00:07:20,555 --> 00:07:23,465
Donc, c'est à ce sujet pour le ContactComponent.

102
00:07:23,465 --> 00:07:29,329
Nous avons maintenant intégré cela dans notre application d'une seule page.

103
00:07:29,329 --> 00:07:32,445
Maintenant, allez au DishService.

104
00:07:32,445 --> 00:07:36,440
Maintenant, dans le DishService avec la méthode getDish,

105
00:07:36,440 --> 00:07:39,005
, je vais introduire deux méthodes supplémentaires.

106
00:07:39,005 --> 00:07:42,350
Une méthode appelée getDish,

107
00:07:42,350 --> 00:07:50,950
un plat spécifique et puis j'identifierai le plat avec un id spécifié ici.

108
00:07:50,950 --> 00:07:52,460
Donc, l'id serait

109
00:07:52,460 --> 00:08:01,885
et cela spécifierait me donner le plat avec l'id correspondant à ce nombre.

110
00:08:01,885 --> 00:08:04,640
Donc, ce sera une méthode de plus dans laquelle je vais ajouter

111
00:08:04,640 --> 00:08:09,870
et ajouter également dans une autre méthode appelée getFeaturedDish.

112
00:08:13,750 --> 00:08:17,495
Donc, ce plat en vedette utilisera

113
00:08:17,495 --> 00:08:22,460
la propriété vedette que nous avons ajoutée

114
00:08:22,460 --> 00:08:27,995
, puis retournera le plat pour lequel la fonction est définie sur true.

115
00:08:27,995 --> 00:08:33,330
Donc, c'est ainsi que vous pouvez sélectionner un plat spécifique puis le rendre disponible.

116
00:08:33,330 --> 00:08:37,970
Maintenant, la raison pour laquelle j'ai ce drapeau en vedette est que lorsque la fonction est définie sur true,

117
00:08:37,970 --> 00:08:41,680
ce plat particulier sera rendu sur le HomeComponent.

118
00:08:41,680 --> 00:08:44,455
Maintenant, comment sélectionnons-nous ces plats ?

119
00:08:44,455 --> 00:08:47,185
Alors, ajoutons le code pour cela.

120
00:08:47,185 --> 00:08:49,050
Donc, pour le GetDish,

121
00:08:49,050 --> 00:08:57,650
Je dois retourner quelque chose de la constante de vaisselle que j'ai déjà là.

122
00:08:57,650 --> 00:08:59,600
Donc, à partir de la constante vaisselle,

123
00:08:59,600 --> 00:09:05,525
je vais utiliser la façon de JavaScript de faire le filtrage d'un tableau.

124
00:09:05,525 --> 00:09:09,470
Donc, le filtrage d'un tableau m'aidera à sélectionner

125
00:09:09,470 --> 00:09:13,565
uniquement les éléments du tableau qui

126
00:09:13,565 --> 00:09:16,985
correspondent à un critère particulier qui sera spécifié

127
00:09:16,985 --> 00:09:21,530
à l'intérieur du filtre ici et puis parmi eux je ne retournerai que le premier.

128
00:09:21,530 --> 00:09:25,050
Maintenant, il se trouve que lorsque je spécifie un id,

129
00:09:25,050 --> 00:09:28,960
, il ne sélectionnera qu'un seul élément, mais alors cela deviendra un tableau.

130
00:09:28,960 --> 00:09:33,150
Donc, à partir de ce tableau, j'ai besoin d'extraire cet élément dans ce tableau.

131
00:09:33,150 --> 00:09:37,320
Donc, c'est pourquoi j'utilise entre accolades zéro là.

132
00:09:37,320 --> 00:09:41,010
Donc, cela m'aidera à identifier.

133
00:09:41,010 --> 00:09:43,005
Alors, comment filtrer mes plats ?

134
00:09:43,005 --> 00:09:47,140
Donc, pour chaque plat de ma liste de plats,

135
00:09:47,140 --> 00:09:49,729
donc c'est là que je vais utiliser

136
00:09:49,729 --> 00:09:55,610
une autre fonctionnalité de dactylographie appelée fonctions de flèche.

137
00:09:55,610 --> 00:10:01,575
La fonction flèche est une façon abrégée d'écrire une fonction.

138
00:10:01,575 --> 00:10:04,090
Donc, si vous êtes habitué à écrire des fonctions,

139
00:10:04,090 --> 00:10:06,100
au lieu d'écrire la fonction en disant soigneusement la fonction

140
00:10:06,100 --> 00:10:09,850
et puis entre parenthèses plat et ainsi de suite,

141
00:10:09,850 --> 00:10:13,900
je peux simplement l'écrire dans les cas où la fonction est très simple,

142
00:10:13,900 --> 00:10:17,195
il est très facile d'écrire ceci comme une fonction de flèche ici.

143
00:10:17,195 --> 00:10:27,305
Donc, ici, je vais spécifier dire que l'id du plat est égal à l'id.

144
00:10:27,305 --> 00:10:33,245
Donc, ce que je spécifie ici est de filtrer le tableau des plats et d'extraire

145
00:10:33,245 --> 00:10:40,360
seulement les éléments du tableau pour lesquels l'id du plat.

146
00:10:40,360 --> 00:10:44,570
Donc, chaque élément ici est identifié par ce paramètre plat ici.

147
00:10:44,570 --> 00:10:47,090
Donc, pour lequel l'id du plat correspond à l'identifiant

148
00:10:47,090 --> 00:10:50,360
qui a été fourni en tant que paramètre au plat.

149
00:10:50,360 --> 00:10:53,810
Donc, de cette façon, vous allez extraire ce plat spécifique de

150
00:10:53,810 --> 00:10:59,400
ce tableau, puis retourner ce plat de cette méthode getDish.

151
00:10:59,710 --> 00:11:04,240
Les fonctions fléchées m'ont aidé à écrire du code d'une manière plus simple.

152
00:11:04,240 --> 00:11:06,724
Si vous n'aimez pas les fonctions de flèche

153
00:11:06,724 --> 00:11:09,710
alors vous pouvez l'écrire de la manière plus conventionnelle en disant,

154
00:11:09,710 --> 00:11:16,870
« function dish », puis à partir de là, vous retournerez dish.id triple égal à id,

155
00:11:16,870 --> 00:11:19,005
donc cela retournera un booléen.

156
00:11:19,005 --> 00:11:22,960
Lorsque le filtre rencontre un vrai intérieur ici,

157
00:11:22,960 --> 00:11:27,115
ces éléments de la vaisselle seront sélectionnés dans le tableau.

158
00:11:27,115 --> 00:11:31,980
Donc, c'est là que vos connaissances JavaScript vous sont avantagées.

159
00:11:31,980 --> 00:11:34,060
Donc, vous devez savoir comment fonctionne un filtre JavaScript

160
00:11:34,060 --> 00:11:38,085
pour vous aider à comprendre comment cela se fait.

161
00:11:38,085 --> 00:11:41,390
Ok, maintenant de la même façon pour le plat en vedette,

162
00:11:41,390 --> 00:11:47,365
Je vais utiliser une méthode similaire pour extraire de mes plats

163
00:11:47,365 --> 00:11:51,620
tableau en utilisant un filtre ici mais le filtre que

164
00:11:51,620 --> 00:11:57,000
je vais définir ici serait à nouveau une fonction de flèche ici.

165
00:11:58,410 --> 00:12:03,260
Vous vous habituerez aux fonctions fléchées et une fois que vous vous y êtes habitués,

166
00:12:03,260 --> 00:12:06,370
alors vous réaliserez à quel point elles sont simples.

167
00:12:06,370 --> 00:12:11,380
Donc, ici, la façon de me sélectionner

168
00:12:11,380 --> 00:12:20,445
est la propriété dish.featured parce que ce dish.feature est déjà un booléen là-bas.

169
00:12:20,445 --> 00:12:25,720
Donc, cela m'aidera à retourner le plat en vedette.

170
00:12:25,720 --> 00:12:27,355
Donc, pour quel que soit le plat,

171
00:12:27,355 --> 00:12:29,120
la caractéristique du plat est vraie.

172
00:12:29,120 --> 00:12:31,710
Ce plat particulier sera filtré à partir de

173
00:12:31,710 --> 00:12:35,330
le tableau des plats et puis il n'y aura qu'un jour.

174
00:12:35,330 --> 00:12:38,280
Quoi qu'il en soit, vous devriez vous assurer de ce

175
00:12:38,280 --> 00:12:42,210
afin que vous ne définissiez en vedette que pour l'un de ceux-ci,

176
00:12:42,210 --> 00:12:50,630
et puis j'utilise ceci parce que ce filtre retournera un sous-tableau du tableau de vaisselle,

177
00:12:50,630 --> 00:12:52,300
donc j'ai besoin de sélectionner cet élément.

178
00:12:52,300 --> 00:12:55,600
Il y aura un seul élément à l'index zéro.

179
00:12:55,600 --> 00:12:59,150
Donc, j'utilise l'index zéro pour sélectionner cet élément et retourner

180
00:12:59,150 --> 00:13:03,680
à partir de la méthode de plat get featured ici.

181
00:13:03,680 --> 00:13:09,985
Donc, cela complète la mise à jour du service de plat.

182
00:13:09,985 --> 00:13:15,140
Pour construire notre modèle de maison,

183
00:13:15,140 --> 00:13:21,195
nous allons mettre en vedette sur la vue maison un plat sélectionné,

184
00:13:21,195 --> 00:13:24,545
une promotion actuelle sélectionnée par le restaurant,

185
00:13:24,545 --> 00:13:29,785
et un leader d'entreprise sélectionné dans la liste des lecteurs.

186
00:13:29,785 --> 00:13:38,550
Le leader de l'entreprise qui figure sur la première page fera partie de votre mission qui suit cette leçon particulière.

187
00:13:38,550 --> 00:13:40,380
Mais nous allons maintenant inclure,

188
00:13:40,380 --> 00:13:45,775
nous avons un plat en vedette et la promotion en vedette sur la première page.

189
00:13:45,775 --> 00:13:50,170
Donc, ce qui signifie que j'ai besoin d'un service de promotion qui renvoie

190
00:13:50,170 --> 00:13:55,250
l'ensemble des promotions qui sont menées par ce restaurant particulier.

191
00:13:55,250 --> 00:14:01,095
Alors, permettez-moi d'ajouter un service de promotions pour mon application.

192
00:14:01,095 --> 00:14:04,005
Donc, pour ce faire, dans le dossier partagé,

193
00:14:04,005 --> 00:14:12,140
, je vais créer un nouveau fichier appelé promotion.ts.

194
00:14:12,560 --> 00:14:18,410
Dans les promotion.ts, je vais créer une promotion classe,

195
00:14:18,870 --> 00:14:29,125
classe promotion et retourner cette promotion ici.

196
00:14:29,125 --> 00:14:32,460
Alors, que contient cette classe de promotion ?

197
00:14:32,460 --> 00:14:36,529
Il contient une propriété id,

198
00:14:36,529 --> 00:14:43,010
puis il contient le nom de la promotion du restaurant.

199
00:14:43,010 --> 00:14:47,310
Ainsi, par exemple, la promotion pourrait être comme un buffet de week-end.

200
00:14:47,310 --> 00:14:52,320
Ou 10% de chaque jour à

201
00:14:52,320 --> 00:14:57,845
midi et des choses comme ça peuvent être présentées sur la première page de vos restaurants là-bas.

202
00:14:57,845 --> 00:15:01,280
Donc, nom alors je vais également inclure une image,

203
00:15:01,280 --> 00:15:05,635
qui doit être de la chaîne de type l'URL de l'image,

204
00:15:05,635 --> 00:15:10,625
puis étiquette qui sera une chaîne.

205
00:15:10,625 --> 00:15:13,895
Prix aussi une chaîne.

206
00:15:13,895 --> 00:15:15,330
Maintenant, le travail implique,

207
00:15:15,330 --> 00:15:17,260
vous ne me voyez pas les utiliser pour le moment,

208
00:15:17,260 --> 00:15:25,780
nous allons les mettre en usage dans l'un des exercices ultérieurs en vedette booléenne.

209
00:15:25,780 --> 00:15:29,965
Donc, vous voyez le drapeau en vedette apparaissant à nouveau dans la promotion aussi,

210
00:15:29,965 --> 00:15:34,960
, puis chaîne de description.

211
00:15:34,960 --> 00:15:38,380
Donc, vous voyez que la promotion structurée est à peu près

212
00:15:38,380 --> 00:15:42,840
similaire à la structure du plat que nous avons vu plus tôt.

213
00:15:42,840 --> 00:15:46,010
Donc, c'est la classe de promotion ici.

214
00:15:46,010 --> 00:15:48,090
Maintenant, avec la classe de promotion,

215
00:15:48,090 --> 00:15:50,980
J'ai besoin de créer une autre classe qui

216
00:15:50,980 --> 00:16:00,615
exporte l'ensemble de promotion dire constant avec les promotions ici.

217
00:16:00,615 --> 00:16:04,240
Donc ici, je vais importer

218
00:16:06,920 --> 00:16:11,024
la classe de promotion

219
00:16:11,024 --> 00:16:18,400
du fichier promotion.ts,

220
00:16:18,400 --> 00:16:25,290
, puis j'exporterais une constante appelée promotion.

221
00:16:25,290 --> 00:16:32,395
Donc, vous voyez que j'utilise une structure très similaire à la vaisselle ici.

222
00:16:32,395 --> 00:16:36,290
Donc, vous commencez à voir que,

223
00:16:36,660 --> 00:16:40,790
cette structure que nous avons utilisée plus tôt pour

224
00:16:40,790 --> 00:16:46,465
les promotions pour les plats est également utile pour déclarer les promotions.

225
00:16:46,465 --> 00:16:47,910
Si vous avez une structure différente,

226
00:16:47,910 --> 00:16:50,990
vous verrez qu'avec les leaders la structure sera un peu

227
00:16:50,990 --> 00:16:55,315
différente pour l'objet JavaScript ici. Les promotions.

228
00:16:55,315 --> 00:17:00,160
Maintenant, les détails d'une promotion spécifique que je l'ai donnée dans les instructions,

229
00:17:00,160 --> 00:17:02,790
donc je suggère que vous copiez et collez-la à partir de

230
00:17:02,790 --> 00:17:05,550
là-bas au lieu de me taper le tout ici.

231
00:17:05,550 --> 00:17:07,390
Alors, laissez-moi aller de l'avant et copier et coller

232
00:17:07,390 --> 00:17:11,800
cet objet JavaScript dans ce tableau d'objets JavaScript ici,

233
00:17:11,800 --> 00:17:13,510
donc là vous allez.

234
00:17:13,510 --> 00:17:20,475
La promotion n'a qu'un seul objet pour le moment.

235
00:17:20,475 --> 00:17:22,715
À l'avenir, nous pouvons en ajouter plus.

236
00:17:22,715 --> 00:17:26,375
À ce stade, je n'en ai qu'un, alors je viens de l'ajouter là-dedans,

237
00:17:26,375 --> 00:17:31,265
et je vais utiliser cela et c'est la promotion en vedette pour mon restaurant là-bas.

238
00:17:31,265 --> 00:17:33,045
C'est juste une promotion,

239
00:17:33,045 --> 00:17:35,820
alors laissez-moi mettre à jour ces promotions,

240
00:17:35,820 --> 00:17:37,465
c'est ce dont j'ai besoin.

241
00:17:37,465 --> 00:17:42,120
Donc, je vais juste enregistrer les modifications dans le fichier promotion.ts.

242
00:17:42,120 --> 00:17:46,820
Ensuite, je vais créer un autre service appelé service de promotion.

243
00:17:46,820 --> 00:17:53,285
Donc, pour ce faire, allons à la ligne de commande à l'invite de commande type

244
00:17:53,285 --> 00:18:02,005
ng générer des services/promotion d'enquêtes.

245
00:18:02,005 --> 00:18:05,105
Donc, le service de promotion est créé là-bas.

246
00:18:05,105 --> 00:18:08,500
Donc, maintenant le PromotionService est en place.

247
00:18:08,500 --> 00:18:13,575
Alors, ajoutons les fonctionnalités du PromotionService.

248
00:18:13,575 --> 00:18:18,070
Donc, en allant sur PromotionService,

249
00:18:18,070 --> 00:18:25,690
, vous voyez que le PromotionService est maintenant inclus dans votre dossier de services ici,

250
00:18:25,690 --> 00:18:28,615
donc nous devons préparer un PromotionService.

251
00:18:28,615 --> 00:18:30,715
Donc, dans le PromotionService,

252
00:18:30,715 --> 00:18:33,170
, je vais importer

253
00:18:37,170 --> 00:18:48,355
promotion à partir de partage/promotion,

254
00:18:48,355 --> 00:18:55,010
la classe de promotion, et aussi importer

255
00:18:57,000 --> 00:19:09,985
des promotions à partir de la classe partagée/promotions là-bas.

256
00:19:09,985 --> 00:19:11,885
Les promotions constantes à partir de là.

257
00:19:11,885 --> 00:19:14,590
Maintenant, comme nous l'avions pour le service de plat,

258
00:19:14,590 --> 00:19:19,840
nous devons créer trois méthodes dans le PromotionsService.

259
00:19:19,840 --> 00:19:25,080
Donc, ce que je vais faire est de me sauver le problème,

260
00:19:25,080 --> 00:19:27,450
Je vais aller dans le plat.service,

261
00:19:27,450 --> 00:19:29,750
et ensuite copier ces trois,

262
00:19:29,750 --> 00:19:33,445
et ensuite coller dans mon service de promotion,

263
00:19:33,445 --> 00:19:35,570
puis éditer le code.

264
00:19:35,570 --> 00:19:38,965
Ok, donc du service de promotion,

265
00:19:38,965 --> 00:19:46,505
J'ai besoin de retourner getPromotions et

266
00:19:46,505 --> 00:19:54,340
ceci est du type de promotion et ensuite cela retournera PROMOTIONS,

267
00:19:54,340 --> 00:20:00,670
et ensuite obtenir le deuxième serait promotion

268
00:20:00,670 --> 00:20:08,505
qui reçoit à nouveau l'identifiant de la promotion,

269
00:20:08,505 --> 00:20:10,615
donc je vais retourner

270
00:20:10,615 --> 00:20:20,830
PROMOTIONS.filter promo.id est id.

271
00:20:20,830 --> 00:20:26,780
Alors la promotion GetFeatured.

272
00:20:26,780 --> 00:20:31,860
Donc, vous pouvez voir que la structure du service Promotionest très similaire à

273
00:20:31,860 --> 00:20:39,920
le service à vaisselle et ce ne serait pas le type de promotion,

274
00:20:39,920 --> 00:20:41,875
et cela retournera

275
00:20:41,875 --> 00:20:52,145
promotions.Filter promo et ce sera promo.featured et c'est tout.

276
00:20:52,145 --> 00:20:55,030
Mon PromotionService est prêt.

277
00:20:55,030 --> 00:20:59,695
Maintenant, je vais aller dans le volet maison, et préparer ça,

278
00:20:59,695 --> 00:21:02,115
de sorte que dans mon volet maison,

279
00:21:02,115 --> 00:21:07,560
je vais afficher un plat et une promotion vedette.

280
00:21:07,560 --> 00:21:10,820
Le présenté/plat et fonctionné/promotion seront affichés dans

281
00:21:10,820 --> 00:21:15,690
le composant home à l'aide du composant de la carte de matériau angulaire.

282
00:21:15,690 --> 00:21:19,675
Donc, nous devons d'abord obtenir les données dans notre composant home,

283
00:21:19,675 --> 00:21:24,690
donc c'est ce que nous allons faire dans le fichier de script de type home components là-bas.

284
00:21:24,690 --> 00:21:29,630
Donc, en allant dans le fichier de script de type home components, home component.ts.

285
00:21:29,630 --> 00:21:44,330
Ici, j'ai besoin d'importer le plat

286
00:21:44,330 --> 00:21:52,060
de shared/dish et aussi le plat

287
00:21:52,060 --> 00:22:07,430
correspondant de services/dish.service.

288
00:22:12,330 --> 00:22:17,495
Ok, maintenant je vais aussi faire la même chose pour les promotions,

289
00:22:17,495 --> 00:22:21,465
donc je vais juste copier ça et le coller ici,

290
00:22:21,465 --> 00:22:23,120
et ensuite éditer celui-ci,

291
00:22:23,120 --> 00:22:26,735
pour que ce soit la promotion,

292
00:22:26,735 --> 00:22:31,315
ce serait PromotionService,

293
00:22:31,315 --> 00:22:42,350
et ensuite promotion, et ensuite ce serait PromotionService.

294
00:22:42,790 --> 00:22:46,800
Donc, avec cela, nous avons à la fois les services de plat et

295
00:22:46,800 --> 00:22:50,205
et le service de promotion disponibles pour nous,

296
00:22:50,205 --> 00:22:52,485
dans notre composante maison.

297
00:22:52,485 --> 00:22:54,660
Venant maintenant au constructeur.

298
00:22:54,660 --> 00:23:01,180
Laisse maintenant injecter les deux services ici,

299
00:23:02,280 --> 00:23:12,590
et les rendre disponibles pour nos applications ou service de vaisselle,

300
00:23:25,490 --> 00:23:30,240
et le service de promotion injecté ici.

301
00:23:30,240 --> 00:23:34,610
Donc, avec cela, nous avons accès aux deux services.

302
00:23:34,610 --> 00:23:38,650
Alors maintenant, dans la méthode NGONinit,

303
00:23:38,650 --> 00:23:43,779
, je vais chercher les deux plats en vedette.

304
00:23:43,779 --> 00:23:51,770
Donc, je dirais this.DishService.getFeaturedDish

305
00:23:51,770 --> 00:23:59,520
et aussi la promotion,

306
00:24:03,690 --> 00:24:11,510
PromotionService et getFeaturedPromotion.

307
00:24:14,400 --> 00:24:18,820
Juste pour être complet,

308
00:24:18,820 --> 00:24:23,185
laissez-moi déclarer le plat ici comme de type

309
00:24:23,185 --> 00:24:32,025
Dish et la promotion comme de type Promotion ici.

310
00:24:32,025 --> 00:24:38,830
Donc, cela devrait clarifier toutes les valeurs que nous utilisons ici.

311
00:24:38,830 --> 00:24:46,665
Donc, avec cela, nous terminons la mise à jour de notre fichier de caractères des composants maison.

312
00:24:46,665 --> 00:24:49,710
Passons maintenant au fichier template,

313
00:24:49,710 --> 00:24:55,815
, puis ajoutez les deux cartes pour afficher le plat en vedette et la promotion en vedette.

314
00:24:55,815 --> 00:25:00,310
Maintenant, pour cela, je vous ai donné le code dans les instructions.

315
00:25:00,310 --> 00:25:02,995
Donc, je vais juste copier ce code et le coller ici.

316
00:25:02,995 --> 00:25:05,640
Vous savez déjà comment créer des cartes,

317
00:25:05,640 --> 00:25:10,590
afin que vous puissiez facilement suivre le code que je colle ici.

318
00:25:10,590 --> 00:25:17,095
Ainsi, le modèle de composants maison est également mis à jour,

319
00:25:17,095 --> 00:25:20,830
afin que vous puissiez voir qu'il a deux cartes ici.

320
00:25:20,830 --> 00:25:26,550
Pour un, affichant le plat et l'autre affichant la promotion ici,

321
00:25:26,550 --> 00:25:33,030
et enfermé dans un div FxLayout ici.

322
00:25:33,030 --> 00:25:38,175
Alors, sauvegardons les changements, puis jetez un coup d'œil à notre application.

323
00:25:38,175 --> 00:25:41,095
Après avoir créé le service de promotion,

324
00:25:41,095 --> 00:25:45,470
, nous devons également inclure le service de promotion dans l'AppModule,

325
00:25:45,470 --> 00:25:47,750
et le rendre disponible pour notre application.

326
00:25:47,750 --> 00:25:49,840
Donc, je vais aller ici,

327
00:25:49,840 --> 00:25:53,350
et ensuite importer

328
00:25:53,350 --> 00:26:00,950
le service de promotion ici.

329
00:26:03,150 --> 00:26:07,915
Ensuite, a déclaré le service de promotion

330
00:26:07,915 --> 00:26:16,030
comme l'un des fournisseurs

331
00:26:16,030 --> 00:26:19,720
dans mon fichier AppModule.ts ici.

332
00:26:19,720 --> 00:26:21,580
Donc, dans le fichier AppModule,

333
00:26:21,580 --> 00:26:23,415
, j'ai besoin de ces deux,

334
00:26:23,415 --> 00:26:25,480
, puis d'enregistrer des modifications.

335
00:26:25,480 --> 00:26:27,055
Aller au navigateur,

336
00:26:27,055 --> 00:26:29,455
vous pouvez maintenant voir que dans le navigateur,

337
00:26:29,455 --> 00:26:34,150
le composant home affiche maintenant les deux cartes,

338
00:26:34,150 --> 00:26:40,580
une pour le plat en vedette et une pour la promotion en vedette ici.

339
00:26:40,580 --> 00:26:43,850
Donc, vous pouvez voir que les deux voitures sont affichées ici.

340
00:26:43,850 --> 00:26:50,505
Je peux maintenant accéder à la page Menu,

341
00:26:50,505 --> 00:26:54,405
, puis aussi à la page Contact.

342
00:26:54,405 --> 00:26:56,690
La page À propos n'est toujours pas là,

343
00:26:56,690 --> 00:27:02,070
vous allez remplir la page À propos dans le cadre de votre deuxième affectation.

344
00:27:02,070 --> 00:27:07,490
En regardant la même application sur une taille d'écran plus petite,

345
00:27:07,490 --> 00:27:11,200
donc c'est un écran iPhone 6 Plus.

346
00:27:11,200 --> 00:27:16,225
Regardons le composant maison et un écran iPhone 6 Plus.

347
00:27:16,225 --> 00:27:24,490
Vous pouvez voir ce plat en vedette et promotion en vedette sur la page d'accueil là-bas.

348
00:27:24,490 --> 00:27:29,820
Ensuite, le menu que nous avons vu plus tôt,

349
00:27:29,820 --> 00:27:35,150
et aussi la page Contact affichée ici.

350
00:27:35,150 --> 00:27:41,395
Donc, vous pouvez voir que maintenant notre application d'une seule page est beaucoup plus configurée.

351
00:27:41,395 --> 00:27:43,120
Sauf pour le About,

352
00:27:43,120 --> 00:27:46,875
que nous ferons dans la deuxième mission.

353
00:27:46,875 --> 00:27:54,345
Un autre changement mineur que vous pouvez faire dans votre fichier HTML des composants d'en-tête,

354
00:27:54,345 --> 00:27:57,470
est que, avec la directive de liaison du routeur,

355
00:27:57,470 --> 00:28:06,880
la Route angulaire supporte également une directive appelée RouteLinkActive.

356
00:28:06,880 --> 00:28:14,660
Cela nous permet d'appliquer certaines classes à l'élément particulier ici.

357
00:28:14,660 --> 00:28:16,305
Donc, dans ce cas,

358
00:28:16,305 --> 00:28:20,090
si ce lien devient actif que ce que je spécifie ici,

359
00:28:20,090 --> 00:28:24,980
sera appliqué en tant que classe à cet élément particulier là-bas.

360
00:28:24,980 --> 00:28:28,309
Donc, je vais spécifier une classe appelée active.

361
00:28:28,309 --> 00:28:32,280
Donc ici, je spécifie RouterLinkActive avec active.

362
00:28:32,280 --> 00:28:35,265
Donc, si je définit une classe CSS appelée active,

363
00:28:35,265 --> 00:28:39,300
alors la classe sera appliquée à ce lien,

364
00:28:39,300 --> 00:28:46,975
chaque fois que cette vue particulière est affichée sur la page des applications ici.

365
00:28:46,975 --> 00:28:53,250
Je vais copier la même chose et l'appliquer à tous les boutons restants,

366
00:28:53,250 --> 00:28:56,735
où j'ai déjà défini le lien du routeur.

367
00:28:56,735 --> 00:28:59,600
Donc, je vais appliquer la classe RouterLinkActive,

368
00:28:59,600 --> 00:29:04,195
à l'Accueil, au Menu et au Contactez-nous.

369
00:29:04,195 --> 00:29:08,535
Maintenant, cela signifie aussi que je devrais définir une classe CSS active.

370
00:29:08,535 --> 00:29:14,360
Donc, pour ce faire, je vais aller dans le fichier SESS des composants d'en-tête,

371
00:29:14,360 --> 00:29:16,590
, puis définir une classe active ici,

372
00:29:16,590 --> 00:29:21,400
donc je vais définir la classe active juste là.

373
00:29:21,400 --> 00:29:22,870
Pour définir la classe active,

374
00:29:22,870 --> 00:29:31,220
je vais ajouter une autre variable de couleur ici appelée background-moredark.

375
00:29:33,030 --> 00:29:39,080
Ensuite, la couleur correspondante est 4527A0,

376
00:29:39,900 --> 00:29:47,480
c'est une version plus foncée de cette couleur foncée de fond, 4527A0.

377
00:29:47,480 --> 00:29:50,055
Ensuite, pour mon actif,

378
00:29:50,055 --> 00:29:52,720
ce que je vais faire est, de la classe active,

379
00:29:52,720 --> 00:29:57,725
Je laisserai la classe définir un arrière-plan,

380
00:29:57,725 --> 00:29:59,560
définir l'arrière-plan de

381
00:29:59,560 --> 00:30:09,410
cet élément à la couleur background-moredark.

382
00:30:10,170 --> 00:30:18,270
Donc, lorsque cette vue particulière est sélectionnée et affichée dans la page,

383
00:30:18,270 --> 00:30:21,630
alors cette classe active sera appliquée à

384
00:30:21,630 --> 00:30:24,670
cette balise particulière

385
00:30:24,670 --> 00:30:30,340
là par la directive active de lien de routeur que nous avons appliquée ici.

386
00:30:30,340 --> 00:30:34,750
Maintenant, quel changement cela provoque sur notre page Web.

387
00:30:34,750 --> 00:30:36,460
Maintenant, en allant sur notre page web,

388
00:30:36,460 --> 00:30:40,685
, nous allons voir ce que cela introduit sur notre page web.

389
00:30:40,685 --> 00:30:43,390
En allant à notre application,

390
00:30:43,390 --> 00:30:45,360
vous voyez maintenant que lorsque nous sommes dans

391
00:30:45,360 --> 00:30:52,125
la vue de la maison dans le composant home affiché ici, sa vue correspondante.

392
00:30:52,125 --> 00:30:59,870
Ensuite, le bouton Accueil ici a une couleur d'arrière-plan différente qui est

393
00:30:59,870 --> 00:31:03,670
appliquée parce que la classe active a été ajoutée parce que nous

394
00:31:03,670 --> 00:31:08,150
définissons le RouterLinkActive à actif ici.

395
00:31:08,150 --> 00:31:09,510
Donc, cette classe est appliquée.

396
00:31:09,510 --> 00:31:11,985
De même, lorsque vous sélectionnez le menu,

397
00:31:11,985 --> 00:31:17,205
alors vous voyez que le menu est mis en surbrillance dans l'en-tête,

398
00:31:17,205 --> 00:31:20,025
et la vue des menus est affichée ici,

399
00:31:20,025 --> 00:31:21,795
et de même pour le contenu.

400
00:31:21,795 --> 00:31:29,035
Maintenant, cela nous permet de voir en un coup d'œil quelle payer vue particulière VR,

401
00:31:29,035 --> 00:31:31,760
dans notre application d'une seule page.

402
00:31:31,760 --> 00:31:38,145
Donc, il s'agit d'une amélioration supplémentaire de l'interface utilisateur,

403
00:31:38,145 --> 00:31:42,255
qui nous permet de voir quelques fonctionnalités intéressantes.

404
00:31:42,255 --> 00:31:46,004
Bien que, cela n'ajoute pas beaucoup à la fonctionnalité de l'application,

405
00:31:46,004 --> 00:31:54,370
mais juste ajouter quelques petites fonctionnalités qui seront un ajout utile à votre application.

406
00:31:54,370 --> 00:31:58,615
Donc, avec cela, nous terminons cet exercice.

407
00:31:58,615 --> 00:32:02,275
Dans cet exercice, nous avons travaillé à intégrer

408
00:32:02,275 --> 00:32:07,495
le composant contact dans notre application d'une seule page.

409
00:32:07,495 --> 00:32:15,800
Nous avons également conçu quelques cartes que nous avons incluses dans le composant home,

410
00:32:15,800 --> 00:32:20,180
et ajouté quelques nouvelles fonctionnalités à notre application.

411
00:32:20,180 --> 00:32:28,310
C'est le bon moment pour vous d'enregistrer les modifications dans votre dépôt Git avec le message,

412
00:32:28,310 --> 00:32:31,520
Application d'une seule page Partie 1.