1
00:00:00,000 --> 00:00:08,745
Jetzt, da wir ein Verständnis für einseitige Anwendungen haben,

2
00:00:08,745 --> 00:00:10,660
werden wir an

3
00:00:10,660 --> 00:00:14,490
unserer Winkelapplikation, die wir

4
00:00:14,490 --> 00:00:16,980
bisher in den Übungen gearbeitet haben, weiter arbeiten und sie

5
00:00:16,980 --> 00:00:21,535
mit der Unterstützung des Winkelrouter-Moduls in die einseitige Anwendung entwickeln.

6
00:00:21,535 --> 00:00:25,110
Wir haben bereits mehrere Komponenten als Teil

7
00:00:25,110 --> 00:00:28,770
unserer Winkelapplikation in die vorangegangene Übung aufgenommen und wir haben bereits

8
00:00:28,770 --> 00:00:32,625
für unsere Winkelanwendung konfiguriert, um

9
00:00:32,625 --> 00:00:37,410
zwischen zwei verschiedenen Komponenten verlegen zu können.

10
00:00:37,410 --> 00:00:40,970
Nun werden wir mehr in unsere Winkelapplikation integrieren und

11
00:00:40,970 --> 00:00:44,960
in die vollwertige Winkelapplikation entwickeln, zusammen mit

12
00:00:44,960 --> 00:00:49,040
der Navigation zwischen den verschiedenen Ansichten, die

13
00:00:49,040 --> 00:00:53,790
von den verschiedenen Komponenten unserer Anwendung gerendert werden.

14
00:00:53,800 --> 00:00:58,275
Weiter mit unserer Anwendung, wie sie jetzt steht,

15
00:00:58,275 --> 00:01:05,990
haben wir das Haus gerendert, wenn Sie zu unserer Anwendung navigieren

16
00:01:05,990 --> 00:01:09,740
jetzt und dann

17
00:01:09,740 --> 00:01:13,740
wurde die Home-Vorlage zwischen der Kopfzeile und der Fußzeile angezeigt und dann, wenn Sie zum Menü gehen,

18
00:01:13,740 --> 00:01:19,920
wird das Menü zwischen der Kopfzeile und die Fußzeile in der Ansicht hier.

19
00:01:19,920 --> 00:01:25,490
Nun müssen wir natürlich die anderen Komponenten, die wir

20
00:01:25,490 --> 00:01:28,700
in unsere Winkelanwendung aufgenommen haben, integrieren,

21
00:01:28,700 --> 00:01:32,715
um diese als vollwertige Winkelapplikation zu entwickeln.

22
00:01:32,715 --> 00:01:36,135
In dieser Übung werden wir die ContactComponent integrieren,

23
00:01:36,135 --> 00:01:38,914
wir werden die Vorlage für die ContactComponent

24
00:01:38,914 --> 00:01:43,190
aktualisieren, wir werden auch die Vorlage für die HomeComponent aktualisieren und dies

25
00:01:43,190 --> 00:01:48,600
einen Schritt vorwärts in Richtung unserer einseitigen Winkelanwendung machen.

26
00:01:48,600 --> 00:01:52,585
Beginnen wir mit der ContactComponent.

27
00:01:52,585 --> 00:01:56,630
Um zu beginnen, kopieren Sie zuerst die Vorlage für

28
00:01:56,630 --> 00:02:01,070
die ContactComponent, die ich Ihnen in den Übungsanweisungen gegeben habe, und

29
00:02:01,070 --> 00:02:06,660
fügen Sie sie dann in die Datei contactcomponent.html ein, damit wir

30
00:02:06,660 --> 00:02:13,580
die tatsächliche Ansicht unserer ContactComponent hier etwas detaillierter ausblenden.

31
00:02:13,580 --> 00:02:18,680
Jetzt können Sie sehen, dass ich den Code für die

32
00:02:18,680 --> 00:02:24,550
Vorlagendatei aus den Anweisungen in meine ContactComponent ausgeschnitten und eingefügt habe.

33
00:02:24,550 --> 00:02:27,650
Wir werden die Integration

34
00:02:27,650 --> 00:02:30,665
der ContactComponent in unsere Anwendung abschließen und dann schauen wir uns an, wie

35
00:02:30,665 --> 00:02:33,590
die ContactComponent aussieht

36
00:02:33,590 --> 00:02:36,940
und kommen dann wieder und schauen sich diesen Code ein wenig später an.

37
00:02:36,940 --> 00:02:41,660
Um nun die ContactComponent in unsere Winkelapplikation

38
00:02:41,660 --> 00:02:46,910
zu integrieren, müssen wir einen Pfad zur ContactComponent in unsere Routen einbinden.

39
00:02:46,910 --> 00:02:52,270
Also, wenn ich direkt nach dem Menü zur routes.ts-Datei

40
00:02:52,270 --> 00:03:01,520
gehe, werde ich einen anderen Pfad für die ContactComponent einschließen. Ich werde

41
00:03:01,520 --> 00:03:05,480
die URL verwenden, um uns zu kontaktieren und

42
00:03:05,480 --> 00:03:15,375
die entsprechende Komponente ist ContactComponent hier.

43
00:03:15,375 --> 00:03:19,815
Damit haben wir nun unsere ContactComponent

44
00:03:19,815 --> 00:03:24,725
in unsere Anwendung integriert und lassen Sie uns die Änderungen

45
00:03:24,725 --> 00:03:30,935
daran speichern und dann müssen wir auch die Header-Komponente aktualisieren und den

46
00:03:30,935 --> 00:03:37,540
Link in der Header-Komponente aktualisieren, um uns zu helfen, zur ContactComponent zu navigieren.

47
00:03:37,540 --> 00:03:43,680
Also, ich werde dies einfach aus dem Menü einen Link in der

48
00:03:43,680 --> 00:03:48,710
Symbolleiste meiner Header-Komponente kopieren und dann in

49
00:03:48,710 --> 00:03:53,960
die ContactComponent kopieren und es dann aktualisieren, als kontaktieren Sie uns.

50
00:03:53,960 --> 00:03:57,680
Lassen Sie uns die Änderungen an allen Dateien speichern und

51
00:03:57,680 --> 00:04:05,725
dann einen Blick auf die resultierende Anwendung werfen.

52
00:04:05,725 --> 00:04:08,570
Wenn wir nun zur Anwendung in unserem Browser navigieren,

53
00:04:08,570 --> 00:04:12,680
können wir sehen, dass die Details der ContactComponent

54
00:04:12,680 --> 00:04:16,790
hier zwischen dem Header und der Fußzeile angezeigt werden, wie wir erwarten.

55
00:04:16,790 --> 00:04:18,590
Also, innerhalb der ContactComponent,

56
00:04:18,590 --> 00:04:22,370
haben wir den Titel „Kontaktieren Sie uns“

57
00:04:22,370 --> 00:04:26,390
und dann einige Standortinformationen, wo ich die Adresse angezeigt habe.

58
00:04:26,390 --> 00:04:28,490
Also, das ist ähnlich der Adresse, die wir

59
00:04:28,490 --> 00:04:30,740
in der Fußzeile haben, also werde ich nicht erklären, dass im

60
00:04:30,740 --> 00:04:36,050
Detail dann haben wir einen anderen Teil hier, wo wir die Karte unseres Standorts einschließen.

61
00:04:36,050 --> 00:04:37,490
Wir werden das im Moment nicht tun,

62
00:04:37,490 --> 00:04:41,990
wir werden es einfach als leer lassen und dann auch Sie sehen, dass ich

63
00:04:41,990 --> 00:04:48,150
drei Schaltflächen habe, die ich hier für Call, Skype und E-Mail enthalten habe.

64
00:04:48,150 --> 00:04:52,354
Diese drei Tasten sind in unserer Anwendung aktiviert

65
00:04:52,354 --> 00:04:57,910
und ich verwende die Matte erhobene Taste, um diese drei Tasten zu rendern.

66
00:04:57,910 --> 00:05:00,980
Sie können also sehen, dass diese Schaltflächen sich von

67
00:05:00,980 --> 00:05:05,080
den anderen Schaltflächen unterscheiden, die Sie in Ihrer Anwendung dort enthalten haben.

68
00:05:05,080 --> 00:05:10,870
Dies ist also eine erhöhte Knopfkomponente aus unserem eckigen Material dort.

69
00:05:10,870 --> 00:05:14,195
Also, nachdem wir die ContactComponent gesehen haben und

70
00:05:14,195 --> 00:05:17,675
die Tatsache, dass wir in der Lage sind, zu der ContactComponent zu navigieren.

71
00:05:17,675 --> 00:05:20,560
Nun, von den anderen Komponenten,

72
00:05:20,560 --> 00:05:22,730
werfen wir einen kurzen Blick auf

73
00:05:22,730 --> 00:05:29,250
den HTML-Code, den wir für die Vorlage für unsere ContactComponent enthalten. Wenn Sie

74
00:05:29,250 --> 00:05:33,335
zu contactcomponent.html gehen, werden Sie sehen, dass wir

75
00:05:33,335 --> 00:05:38,720
den Titel für diese Seite haben, indem Sie dieses div

76
00:05:38,720 --> 00:05:42,965
hier verwenden und das zweite div innen hier mit FxFlex

77
00:05:42,965 --> 00:05:48,020
die Standortinformationen enthält und dann dies innerhalb dieser Standortinformationen,

78
00:05:48,020 --> 00:05:51,260
ich definiere wieder ein anderes div, das mir erlauben wird , um

79
00:05:51,260 --> 00:05:55,480
hier mehrere Ansichten in dieses andere div aufzunehmen.

80
00:05:55,480 --> 00:05:57,290
Also, in diesem definiere ich

81
00:05:57,290 --> 00:06:00,410
ein anderes div mit Effektlayoutspalte und Effekte-Layer-Zeile.

82
00:06:00,410 --> 00:06:09,675
Dies ist also eine verschachtelte Möglichkeit, meine CSS-Flex-Ansichten hier zu definieren.

83
00:06:09,675 --> 00:06:11,270
Also, in diesem wieder

84
00:06:11,270 --> 00:06:14,990
verwende ich eine div Flex-Ansicht mit FxFlex 50, so dass es

85
00:06:14,990 --> 00:06:18,900
eine Hälfte und dann FxFlex-Offset 20 Pixel einnimmt.

86
00:06:18,900 --> 00:06:26,300
Also, diese CSS-Ansicht wird um 20 Pixel nach rechts verschoben werden, so dass ich

87
00:06:26,300 --> 00:06:29,300
etwas Marge dort habe und dann haben wir

88
00:06:29,300 --> 00:06:33,800
die Adresse hier und dann unten hier unten,

89
00:06:33,800 --> 00:06:36,080
Sie können sehen, dass in einem anderen div,

90
00:06:36,080 --> 00:06:42,690
Ich habe ein Tag mit Matte angehobenem Knopf damit verbunden.

91
00:06:42,690 --> 00:06:45,740
Dies ist, was bewirkt, dass die erhöhten Schaltflächen,

92
00:06:45,740 --> 00:06:49,140
die wir unten auf der Kontaktseite dort haben.

93
00:06:49,140 --> 00:06:51,050
Also, drei von ihnen hier.

94
00:06:51,050 --> 00:06:52,730
Eins für die Telefonnummer.

95
00:06:52,730 --> 00:07:00,425
Eine für das Skype und eine für die E-Mail hier und beachten Sie auch, dass ich

96
00:07:00,425 --> 00:07:04,010
die Font Awesome Symbole für jeden von ihnen und dann die

97
00:07:04,010 --> 00:07:08,350
Karte Ihres Standorts in einem anderen div hier verwende.

98
00:07:08,350 --> 00:07:13,690
Also, beide schließen diese in diesem äußeren div ein, das wieder in das div eingeschlossen ist.

99
00:07:13,690 --> 00:07:20,555
Also, verschachtelte Möglichkeit, die Flex-Layouts für unsere verschiedenen Teile hier zu definieren.

100
00:07:20,555 --> 00:07:23,465
Also, das ist es für die ContactComponent.

101
00:07:23,465 --> 00:07:29,329
Das haben wir nun in unsere einseitige Anwendung integriert.

102
00:07:29,329 --> 00:07:32,445
Gehen Sie jetzt zum DishService.

103
00:07:32,445 --> 00:07:36,440
Jetzt, im DishService zusammen mit der GetDish-Methode,

104
00:07:36,440 --> 00:07:39,005
werde ich zwei weitere Methoden vorstellen.

105
00:07:39,005 --> 00:07:42,350
Eine Methode namens GetDish,

106
00:07:42,350 --> 00:07:50,950
ein bestimmtes Gericht und dann werde ich das Gericht mit einer ID identifizieren, die hier angegeben ist.

107
00:07:50,950 --> 00:07:52,460
Also, die ID

108
00:07:52,460 --> 00:08:01,885
wäre und das würde mir das Gericht mit der ID geben, die dieser Nummer entspricht.

109
00:08:01,885 --> 00:08:04,640
Das wird also eine weitere Methode sein, die ich hinzufügen

110
00:08:04,640 --> 00:08:09,870
und auch eine andere Methode namens GetFeaturedDish hinzufügen werde.

111
00:08:13,750 --> 00:08:17,495
Also, dieses vorgestellte Gericht wird

112
00:08:17,495 --> 00:08:22,460
die vorgestellte Eigenschaft, die wir hinzugefügt haben, verwenden

113
00:08:22,460 --> 00:08:27,995
und dann das Gericht zurückgeben, für das das Feature auf true gesetzt ist.

114
00:08:27,995 --> 00:08:33,330
So können Sie ein bestimmtes Gericht auswählen und es dann zur Verfügung stellen.

115
00:08:33,330 --> 00:08:37,970
Nun, der Grund, warum ich dieses Feature-Flag habe, ist, dass, wenn die Funktion auf true gesetzt ist,

116
00:08:37,970 --> 00:08:41,680
dieses bestimmte Gericht auf der HomeComponent gerendert wird.

117
00:08:41,680 --> 00:08:44,455
Nun, wie wählen wir diese Gerichte aus?

118
00:08:44,455 --> 00:08:47,185
Also, lassen Sie uns den Code dafür hinzufügen.

119
00:08:47,185 --> 00:08:49,050
Also, für den GetDish,

120
00:08:49,050 --> 00:08:57,650
muss ich etwas von den Gerichten zurückgeben, die ich bereits dort habe.

121
00:08:57,650 --> 00:08:59,600
Also, von der Konstante Gerichte,

122
00:08:59,600 --> 00:09:05,525
werde ich die JavaScript-Methode verwenden, um ein Array zu filtern.

123
00:09:05,525 --> 00:09:09,470
Also, die Filterung eines Arrays hilft mir,

124
00:09:09,470 --> 00:09:13,565
nur die Elemente aus dem Array auszuwählen, die

125
00:09:13,565 --> 00:09:16,985
einem bestimmten Kriterien entsprechen,

126
00:09:16,985 --> 00:09:21,530
die im Filter hier angegeben werden, und dann werde ich nur das erste zurückgeben.

127
00:09:21,530 --> 00:09:25,050
Jetzt passiert es so, dass, wenn ich eine ID angebe,

128
00:09:25,050 --> 00:09:28,960
es nur ein Element auswählt, aber dann wird das zu einem Array.

129
00:09:28,960 --> 00:09:33,150
Also, aus diesem Array muss ich dieses ein Element in diesem Array extrahieren.

130
00:09:33,150 --> 00:09:37,320
Also, deshalb verwende ich dort innerhalb von Klammern Null.

131
00:09:37,320 --> 00:09:41,010
Also, das wird mir helfen, zu identifizieren.

132
00:09:41,010 --> 00:09:43,005
Also, wie filtere ich mein Geschirr?

133
00:09:43,005 --> 00:09:47,140
Also, für jedes Gericht in meiner Liste der Gerichte,

134
00:09:47,140 --> 00:09:49,729
also hier werde ich

135
00:09:49,729 --> 00:09:55,610
eine andere Funktion von Typoskript als Pfeilfunktionen genannt verwenden.

136
00:09:55,610 --> 00:10:01,575
Die Pfeilfunktion ist eine Kurzform, um eine Funktion zu schreiben.

137
00:10:01,575 --> 00:10:04,090
Also, wenn Sie es gewohnt sind, Funktionen zu schreiben,

138
00:10:04,090 --> 00:10:06,100
anstatt die Funktion aufwändig zu sagen

139
00:10:06,100 --> 00:10:09,850
Funktion und dann innerhalb von Klammern Dish und so weiter zu schreiben,

140
00:10:09,850 --> 00:10:13,900
kann ich es einfach in Fällen schreiben, in denen die Funktion sehr einfach ist,

141
00:10:13,900 --> 00:10:17,195
es ist sehr einfach, dies als Pfeilfunktion hier zu schreiben.

142
00:10:17,195 --> 00:10:27,305
Also, hier, werde ich angeben, dass Gericht ID gleich der ID ist.

143
00:10:27,305 --> 00:10:33,245
Also, was ich hier angebe, ist das Geschirr Array filtern und extrahieren

144
00:10:33,245 --> 00:10:40,360
nur die Elemente aus dem Array, für die die Schale ID.

145
00:10:40,360 --> 00:10:44,570
Also, jedes Element hier wird von diesem Parameter Gericht hier identifiziert.

146
00:10:44,570 --> 00:10:47,090
Also, für die die Dish-ID mit der

147
00:10:47,090 --> 00:10:50,360
ID übereinstimmt, die als Parameter an das Gericht geliefert wurde.

148
00:10:50,360 --> 00:10:53,810
Auf diese Weise werden Sie dieses spezifische Gericht aus diesem

149
00:10:53,810 --> 00:10:59,400
Array extrahieren und dann dieses Gericht von dieser GetDish-Methode zurückgeben.

150
00:10:59,710 --> 00:11:04,240
Die Pfeilfunktionen halfen mir, Code auf einfachere Weise zu schreiben.

151
00:11:04,240 --> 00:11:06,724
Wenn Sie Pfeilfunktionen nicht mögen,

152
00:11:06,724 --> 00:11:09,710
können Sie es auf die konventionellere Weise schreiben, indem Sie

153
00:11:09,710 --> 00:11:16,870
„function dish“ sagen, und dann geben Sie dish.id triple gleich id zurück,

154
00:11:16,870 --> 00:11:19,005
so dass dies einen booleschen Wert zurückgibt.

155
00:11:19,005 --> 00:11:22,960
Wenn der Filter hier auf eine wahre Innenseite trifft,

156
00:11:22,960 --> 00:11:27,115
werden diese Elemente aus dem Geschirr in das Array ausgewählt.

157
00:11:27,115 --> 00:11:31,980
Also, hier kommt Ihr JavaScript-Wissen zu Ihrem Vorteil.

158
00:11:31,980 --> 00:11:34,060
Sie müssen also wissen, wie ein JavaScript-Filter

159
00:11:34,060 --> 00:11:38,085
funktioniert, um Ihnen zu helfen, zu verstehen, wie dies geschieht.

160
00:11:38,085 --> 00:11:41,390
Okay, jetzt ähnlich für das vorgestellte Gericht

161
00:11:41,390 --> 00:11:47,365
werde ich eine ähnliche Methode verwenden, um aus meinem Geschirr

162
00:11:47,365 --> 00:11:51,620
Array mit einem Filter hier

163
00:11:51,620 --> 00:11:57,000
zu extrahieren, aber der Filter, den ich hier definieren werde, wäre hier wieder eine Pfeilfunktion.

164
00:11:58,410 --> 00:12:03,260
Sie werden sich an Pfeilfunktionen gewöhnen und dann, wenn Sie sich daran gewöhnen,

165
00:12:03,260 --> 00:12:06,370
dann werden Sie feststellen, wie einfach sie zu richtig sind.

166
00:12:06,370 --> 00:12:11,380
Also, hier

167
00:12:11,380 --> 00:12:20,445
ist die Art, mich auszuwählen, dish.featured Eigenschaft, weil diese dish.feature bereits ein boolescher Wert ist.

168
00:12:20,445 --> 00:12:25,720
Also, das wird mir helfen, das vorgestellte Gericht zurückzugeben.

169
00:12:25,720 --> 00:12:27,355
Also, für welches Gericht auch immer,

170
00:12:27,355 --> 00:12:29,120
das Gericht ist wahr.

171
00:12:29,120 --> 00:12:31,710
Dieses spezielle Gericht wird aus

172
00:12:31,710 --> 00:12:35,330
dem Geschirr Array herausgefiltert und dann wird es nur einen Tag geben.

173
00:12:35,330 --> 00:12:38,280
Wie auch immer, Sie sollten sicherstellen,

174
00:12:38,280 --> 00:12:42,210
dass Sie nur für eines von denen auf true gesetzt werden,

175
00:12:42,210 --> 00:12:50,630
und dann verwende ich das, weil dieser Filter ein Sub-Array aus dem Geschirr Array zurückgibt,

176
00:12:50,630 --> 00:12:52,300
also muss ich dieses Element auswählen.

177
00:12:52,300 --> 00:12:55,600
Es wird ein einzelnes Element bei Index Null geben.

178
00:12:55,600 --> 00:12:59,150
Also verwende ich den Index Null, um dieses Element auszuwählen und

179
00:12:59,150 --> 00:13:03,680
das von der Get-Feature-Dish-Methode hier zurückzugeben.

180
00:13:03,680 --> 00:13:09,985
Das schließt also das Update zum Geschirrservice ab.

181
00:13:09,985 --> 00:13:15,140
Um unsere Home-Vorlage zu erstellen,

182
00:13:15,140 --> 00:13:21,195
werden wir auf der Home-Ansicht ein ausgewähltes Gericht,

183
00:13:21,195 --> 00:13:24,545
eine ausgewählte aktuelle Promotion durch das Restaurant

184
00:13:24,545 --> 00:13:29,785
und einen ausgewählten Unternehmensleiter aus der Liste der Leser.

185
00:13:29,785 --> 00:13:34,260
Der Unternehmensleiter, der auf der Titelseite angezeigt wird,

186
00:13:34,260 --> 00:13:38,550
wird Teil Ihres Auftrags sein, der dieser Lektion folgt.

187
00:13:38,550 --> 00:13:40,380
Aber wir werden jetzt einschließen,

188
00:13:40,380 --> 00:13:45,775
wir haben ein vorgestelltes Gericht und die vorgestellte Promotion auf der Titelseite.

189
00:13:45,775 --> 00:13:50,170
Also, was bedeutet, dass ich einen Promotion-Service brauche,

190
00:13:50,170 --> 00:13:55,250
der die Reihe von Aktionen zurückgibt, die von diesem speziellen Restaurant durchgeführt werden.

191
00:13:55,250 --> 00:14:01,095
Lassen Sie mich also einen Promotion-Service für meine Anwendung hinzufügen.

192
00:14:01,095 --> 00:14:04,005
Um dies zu tun,

193
00:14:04,005 --> 00:14:12,140
werde ich im freigegebenen Ordner eine neue Datei namens promotion.ts erstellen.

194
00:14:12,560 --> 00:14:18,410
In der promotion.ts werde ich eine Klasse,

195
00:14:18,870 --> 00:14:29,125
Klassenförderung erstellen und diese Promotion hier zurückgeben.

196
00:14:29,125 --> 00:14:32,460
Also, was enthält diese Promotion-Klasse?

197
00:14:32,460 --> 00:14:36,529
Es enthält eine ID-Eigenschaft,

198
00:14:36,529 --> 00:14:43,010
dann enthält es den Namen für die Förderung des Restaurants.

199
00:14:43,010 --> 00:14:47,310
So zum Beispiel, die Förderung könnte wie Wochenende Buffet sein.

200
00:14:47,310 --> 00:14:52,320
Oder 10% von jedem einzelnen Tag zur

201
00:14:52,320 --> 00:14:57,845
Mittagszeit und Dinge wie diese können auf der Titelseite Ihrer Restaurants vorgestellt werden.

202
00:14:57,845 --> 00:15:01,280
Also, Name, dann werde ich auch ein Bild einschließen,

203
00:15:01,280 --> 00:15:05,635
das vom Typ String die Bild-URL sein soll,

204
00:15:05,635 --> 00:15:10,625
dann Label, das eine Zeichenfolge sein wird.

205
00:15:10,625 --> 00:15:13,895
Preis auch eine Zeichenfolge.

206
00:15:13,895 --> 00:15:15,330
Nun, die Arbeit impliziert,

207
00:15:15,330 --> 00:15:17,260
du siehst, dass ich sie im Moment nicht benutze,

208
00:15:17,260 --> 00:15:25,780
wir werden sie in einer der späteren Übungen mit Boolean in Gebrauch bringen.

209
00:15:25,780 --> 00:15:29,965
Sie sehen also wieder das markierte Flag in der Werbeaktion

210
00:15:29,965 --> 00:15:34,960
und dann die Beschreibungszeichenfolge.

211
00:15:34,960 --> 00:15:38,380
So, Sie sehen, dass die Förderung strukturiert ist ziemlich

212
00:15:38,380 --> 00:15:42,840
ähnlich wie die Schale Struktur, die wir früher gesehen haben.

213
00:15:42,840 --> 00:15:46,010
Also, das ist die Beförderungsklasse hier.

214
00:15:46,010 --> 00:15:48,090
Jetzt, zusammen mit der Promotion-Klasse,

215
00:15:48,090 --> 00:15:50,980
muss ich eine andere Klasse erstellen, die die

216
00:15:50,980 --> 00:16:00,615
Menge der Förderung sagt Konstante mit Promotions hier exportiert.

217
00:16:00,615 --> 00:16:04,240
Also, hier werde ich die

218
00:16:06,920 --> 00:16:11,024
Promotion-Klasse

219
00:16:11,024 --> 00:16:18,400
aus der promotion.ts-Datei importieren,

220
00:16:18,400 --> 00:16:25,290
und dann würde ich eine Konstante namens promotion exportieren.

221
00:16:25,290 --> 00:16:32,395
Sie sehen also, dass ich eine Struktur verwende, die dem Geschirr hier sehr ähnlich ist.

222
00:16:32,395 --> 00:16:36,290
Also, Sie beginnen zu sehen,

223
00:16:36,660 --> 00:16:40,790
dass, Diese Struktur, die wir früher für

224
00:16:40,790 --> 00:16:46,465
die Aktionen für die Gerichte verwendet, ist auch nützlich für die Deklaration von Werbeaktionen.

225
00:16:46,465 --> 00:16:47,910
Wenn Sie eine andere Struktur haben,

226
00:16:47,910 --> 00:16:50,990
werden Sie sehen, dass die Struktur bei Führungskräften

227
00:16:50,990 --> 00:16:55,315
für das JavaScript-Objekt hier etwas anders ist. Die Werbeaktionen.

228
00:16:55,315 --> 00:17:00,160
Nun, die Details einer bestimmten Promotion habe ich es in den Anweisungen gegeben,

229
00:17:00,160 --> 00:17:02,790
also würde ich vorschlagen, dass Sie es von

230
00:17:02,790 --> 00:17:05,550
dort kopieren und einfügen, anstatt dass ich das Ganze hier eintippe.

231
00:17:05,550 --> 00:17:07,390
Also, lassen Sie mich voran gehen und kopieren und fügen Sie

232
00:17:07,390 --> 00:17:11,800
dieses JavaScript-Objekt hier in dieses JavaScript-Objekt-Array ein,

233
00:17:11,800 --> 00:17:13,510
also gehen Sie.

234
00:17:13,510 --> 00:17:20,475
Die Promotion hat momentan nur ein einziges Objekt.

235
00:17:20,475 --> 00:17:22,715
In Zukunft können wir mehr hinzufügen.

236
00:17:22,715 --> 00:17:26,375
An dieser Stelle habe ich nur eine, so dass ich es gerade hinzugefügt,

237
00:17:26,375 --> 00:17:31,265
und ich werde das verwenden und das ist die vorgestellte Förderung für mein Restaurant dort.

238
00:17:31,265 --> 00:17:33,045
Das ist nur Werbung,

239
00:17:33,045 --> 00:17:35,820
also lassen Sie mich diese Aktionen aktualisieren,

240
00:17:35,820 --> 00:17:37,465
das ist, was ich brauche.

241
00:17:37,465 --> 00:17:42,120
Also, ich werde nur die Änderungen an der Datei promotion.ts speichern.

242
00:17:42,120 --> 00:17:46,820
Als nächstes werde ich einen anderen Dienst namens Promotion-Dienst erstellen.

243
00:17:46,820 --> 00:17:53,285
Um dies zu tun, lassen Sie uns in die Befehlszeile an der Eingabeaufforderung gehen, geben Sie

244
00:17:53,285 --> 00:18:02,005
ng generieren Umfragen Dienstleistungen/Förderung.

245
00:18:02,005 --> 00:18:05,105
Also, der Promotion-Dienst wird dort erstellt.

246
00:18:05,105 --> 00:18:08,500
Also, jetzt ist der PromotionService an Ort und Stelle.

247
00:18:08,500 --> 00:18:13,575
Lassen Sie uns also die Funktionen für den PromotionService hinzufügen.

248
00:18:13,575 --> 00:18:18,070
Wenn Sie zum PromotionService gehen,

249
00:18:18,070 --> 00:18:25,690
sehen Sie, dass der PromotionService jetzt in Ihrem Dienste-Ordner hier enthalten ist,

250
00:18:25,690 --> 00:18:28,615
daher müssen wir einen PromotionService vorbereiten.

251
00:18:28,615 --> 00:18:30,715
Also, im PromotionService,

252
00:18:30,715 --> 00:18:33,170
werde ich

253
00:18:37,170 --> 00:18:48,355
Förderung von Shared/Promotion,

254
00:18:48,355 --> 00:18:55,010
der Promotionklasse, importieren und

255
00:18:57,000 --> 00:19:09,985
dort auch Promotions aus der Shared/Promotion-Klasse importieren.

256
00:19:09,985 --> 00:19:11,885
Die ständigen Aktionen von dort.

257
00:19:11,885 --> 00:19:14,590
Nun, genau wie wir für den Geschirrservice hatten,

258
00:19:14,590 --> 00:19:19,840
müssen wir drei Methoden innerhalb des PromotionsService erstellen.

259
00:19:19,840 --> 00:19:25,080
Also, was ich tun werde, ist, mir die Mühe zu ersparen,

260
00:19:25,080 --> 00:19:27,450
ich werde in den dish.service gehen

261
00:19:27,450 --> 00:19:29,750
und dann einfach diese drei kopieren

262
00:19:29,750 --> 00:19:33,445
und dann in meinen Promotion-Dienst einfügen,

263
00:19:33,445 --> 00:19:35,570
dann einfach den Code bearbeiten.

264
00:19:35,570 --> 00:19:38,965
Okay, also vom Promotion-Dienst,

265
00:19:38,965 --> 00:19:46,505
muss ich GetPromotions zurückgeben und

266
00:19:46,505 --> 00:19:54,340
dies ist vom Typ Promotion und dann wird dies

267
00:19:54,340 --> 00:20:00,670
PROMOTIONS zurückgeben, und dann die zweite wäre Förderung,

268
00:20:00,670 --> 00:20:08,505
die wieder die ID der Promotion erhält,

269
00:20:08,505 --> 00:20:10,615
also werde ich

270
00:20:10,615 --> 00:20:20,830
Promotions.Filter zurückgeben promo.id ist id.

271
00:20:20,830 --> 00:20:26,780
Dann GetFeatured Promotion.

272
00:20:26,780 --> 00:20:31,860
So können Sie sehen, dass die Struktur des Promotionservice

273
00:20:31,860 --> 00:20:39,920
dem Geschirrservice sehr ähnlich ist und dies nicht Promotion-Typ wäre,

274
00:20:39,920 --> 00:20:41,875
und dies wird

275
00:20:41,875 --> 00:20:52,145
promotions.filter promo zurückgeben und dies wird promo.featured und das war's.

276
00:20:52,145 --> 00:20:55,030
Mein PromotionService ist bereit.

277
00:20:55,030 --> 00:20:59,695
Jetzt gehe ich in die Home-Komponente und bereite das vor,

278
00:20:59,695 --> 00:21:02,115
so dass

279
00:21:02,115 --> 00:21:07,560
ich in meiner Home-Komponente ein vorgestelltes Gericht und eine vorgestellte Promotion anzeigen werde.

280
00:21:07,560 --> 00:21:10,820
Die Featured/Dish und Featured/Promotion werden in

281
00:21:10,820 --> 00:21:15,690
der Home-Komponente mit der eckigen Materialkartenkomponente angezeigt.

282
00:21:15,690 --> 00:21:19,675
Also müssen wir zuerst die Daten in unsere Home-Komponente bekommen,

283
00:21:19,675 --> 00:21:24,690
also werden wir das in der Home-Komponentententyp-Skriptdatei dort tun.

284
00:21:24,690 --> 00:21:29,630
Also, gehen Sie zur Home-Komponentententyp-Skriptdatei, home component.ts.

285
00:21:29,630 --> 00:21:44,330
Hier muss ich das Gericht

286
00:21:44,330 --> 00:21:52,060
aus geteiltem Gericht und auch den

287
00:21:52,060 --> 00:22:07,430
entsprechenden dish.service von Dienstleistungen/dish.service importieren.

288
00:22:12,330 --> 00:22:17,495
Okay, jetzt werde ich auch dasselbe für Promotions tun,

289
00:22:17,495 --> 00:22:21,465
also werde ich das einfach kopieren und es hier einfügen,

290
00:22:21,465 --> 00:22:23,120
und dann diesen bearbeiten,

291
00:22:23,120 --> 00:22:26,735
also wäre dies eine Förderung, das

292
00:22:26,735 --> 00:22:31,315
wäre PromotionService,

293
00:22:31,315 --> 00:22:42,350
und dann Förderung, und dann wäre dies PromotionService.

294
00:22:42,790 --> 00:22:46,800
Damit haben wir sowohl die Gerichte als auch die

295
00:22:46,800 --> 00:22:50,205
Gerichte und den Promotion Service für uns,

296
00:22:50,205 --> 00:22:52,485
innerhalb unserer Home-Komponente.

297
00:22:52,485 --> 00:22:54,660
Kommt jetzt zum Konstruktor.

298
00:22:54,660 --> 00:23:01,180
Lassen Sie jetzt die beiden Dienste hier injizieren

299
00:23:02,280 --> 00:23:12,590
und sie für unsere Anwendungen oder Gerichte zur Verfügung stellen,

300
00:23:25,490 --> 00:23:30,240
und den hier injizierten Werbedienst.

301
00:23:30,240 --> 00:23:34,610
Damit haben wir Zugriff auf beide Dienste.

302
00:23:34,610 --> 00:23:38,650
Also, jetzt innerhalb der NgonInit-Methode,

303
00:23:38,650 --> 00:23:43,779
werde ich die beiden vorgestellten Gerichte holen.

304
00:23:43,779 --> 00:23:51,770
Also, ich würde sagen this.dishService.GetFeatureddish

305
00:23:51,770 --> 00:23:59,520
und auch Förderung,

306
00:24:03,690 --> 00:24:11,510
PromotionService und GetFeaturedPromotion.

307
00:24:14,400 --> 00:24:18,820
Nur um vollständig zu sein,

308
00:24:18,820 --> 00:24:23,185
lassen Sie mich das Gericht hier als

309
00:24:23,185 --> 00:24:32,025
vom Typ Dish und die Promotion vom Typ Promotion hier erklären.

310
00:24:32,025 --> 00:24:38,830
Also, das sollte alle Werte klären, die wir hier im Inneren verwenden.

311
00:24:38,830 --> 00:24:46,665
Damit schließen wir das Update unserer Home-Components Typoskriptdatei ab.

312
00:24:46,665 --> 00:24:49,710
Wechseln wir nun zur Vorlagendatei

313
00:24:49,710 --> 00:24:55,815
und fügen Sie dann die beiden Karten hinzu, um das vorgestellte Gericht und die vorgestellte Werbeaktion anzuzeigen.

314
00:24:55,815 --> 00:25:00,310
Nun, dafür habe ich Ihnen den Code in den Anweisungen gegeben.

315
00:25:00,310 --> 00:25:02,995
Also, ich werde nur diesen Code kopieren und ihn hier einfügen.

316
00:25:02,995 --> 00:25:05,640
Sie wissen bereits, wie man Karten erstellt,

317
00:25:05,640 --> 00:25:10,590
so dass Sie leicht dem Code folgen können, den ich hier einfüge.

318
00:25:10,590 --> 00:25:17,095
Also, die Home-Komponenten-Vorlage wird ebenfalls aktualisiert,

319
00:25:17,095 --> 00:25:20,830
so dass Sie sehen können, dass es hier zwei Karten hat.

320
00:25:20,830 --> 00:25:26,550
Zum einen zeigt das Gericht und das andere, das die Promotion hier anzeigt

321
00:25:26,550 --> 00:25:33,030
und in einem FxLayout div hier eingeschlossen ist.

322
00:25:33,030 --> 00:25:38,175
Also, lassen Sie uns die Änderungen speichern und dann einen kurzen Blick auf unsere Anwendung werfen.

323
00:25:38,175 --> 00:25:41,095
Nach der Erstellung des Promotion-Dienstes

324
00:25:41,095 --> 00:25:45,470
müssen wir auch den Promotion-Dienst in das AppModule aufnehmen

325
00:25:45,470 --> 00:25:47,750
und für unsere Anwendung zur Verfügung stellen.

326
00:25:47,750 --> 00:25:49,840
Also, ich gehe hier rein

327
00:25:49,840 --> 00:25:53,350
und importiere dann

328
00:25:53,350 --> 00:26:00,950
den Promotionsdienst hier rein.

329
00:26:03,150 --> 00:26:16,030
Dann deklarierte der Promotion-Dienst

330
00:26:16,030 --> 00:26:19,720
hier als einer der Anbieter in meiner AppModule.ts-Datei.

331
00:26:19,720 --> 00:26:21,580
In der AppModule-Datei

332
00:26:21,580 --> 00:26:23,415
benötige ich also beide

333
00:26:23,415 --> 00:26:25,480
und speichere dann Änderungen. Wenn

334
00:26:25,480 --> 00:26:27,055
Sie in den Browser gehen,

335
00:26:27,055 --> 00:26:29,455
können Sie jetzt sehen, dass im Browser,

336
00:26:29,455 --> 00:26:34,150
die Home-Komponente zeigt nun die beiden Karten,

337
00:26:34,150 --> 00:26:40,580
eine für das vorgestellte Gericht und eine für die vorgestellte Aktion hier.

338
00:26:40,580 --> 00:26:43,850
So können Sie sehen, dass die beiden Autos hier angezeigt werden.

339
00:26:43,850 --> 00:26:50,505
Ich kann nun zur Menüseite

340
00:26:50,505 --> 00:26:54,405
und dann auch zur Kontaktseite navigieren.

341
00:26:54,405 --> 00:26:56,690
Die Seite Info ist immer noch nicht vorhanden.

342
00:26:56,690 --> 00:27:02,070
Sie füllen die Seite Info als Teil Ihrer zweiten Zuweisung aus.

343
00:27:02,070 --> 00:27:07,490
Werfen Sie einen Blick auf die gleiche Anwendung auf einer kleineren Bildschirmgröße,

344
00:27:07,490 --> 00:27:11,200
also ist dies ein iPhone 6 Plus-Bildschirm.

345
00:27:11,200 --> 00:27:16,225
Schauen wir uns die Home-Komponente und einen iPhone 6 Plus-Bildschirm an.

346
00:27:16,225 --> 00:27:24,490
Sie können das vorgestellte Gericht und vorgestellte Promotion auf der Homepage dort sehen.

347
00:27:24,490 --> 00:27:29,820
Dann wird das Menü, das wir zuvor gesehen haben,

348
00:27:29,820 --> 00:27:35,150
und auch die Kontaktseite wird hier angezeigt.

349
00:27:35,150 --> 00:27:41,395
So können Sie sehen, dass jetzt unsere einseitige Anwendung viel konfigurierter ist.

350
00:27:41,395 --> 00:27:43,120
Abgesehen von der Über,

351
00:27:43,120 --> 00:27:46,875
die wir in der zweiten Aufgabe tun werden.

352
00:27:46,875 --> 00:27:54,345
Eine weitere kleine Änderung, die Sie in Ihrer Header-Komponenten-HTML-Datei tun können,

353
00:27:54,345 --> 00:27:57,470
ist, dass zusammen mit der Router-Link-Direktive

354
00:27:57,470 --> 00:28:06,880
die Angular Route auch eine weitere Direktive namens RouteLinkActive unterstützt.

355
00:28:06,880 --> 00:28:14,660
Dies ermöglicht es uns, einige Klassen auf das bestimmte Element hier anzuwenden.

356
00:28:14,660 --> 00:28:16,305
Also, in diesem Fall,

357
00:28:16,305 --> 00:28:20,090
wenn dieser Link aktiv wird als was ich hier spezifiziere,

358
00:28:20,090 --> 00:28:24,980
wird dort als Klasse auf dieses bestimmte Element angewendet.

359
00:28:24,980 --> 00:28:28,309
Also werde ich eine Klasse namens aktiv angeben.

360
00:28:28,309 --> 00:28:32,280
Also hier gebe ich RouterLinkActive mit active an.

361
00:28:32,280 --> 00:28:35,265
Wenn ich also eine CSS-Klasse namens active definiere,

362
00:28:35,265 --> 00:28:39,300
wird die Klasse auf diesen Link angewendet,

363
00:28:39,300 --> 00:28:46,975
wenn diese bestimmte Ansicht auf der Anwendungsseite hier angezeigt wird.

364
00:28:46,975 --> 00:28:53,250
Ich werde dasselbe kopieren und es auf alle verbleibenden Schaltflächen anwenden,

365
00:28:53,250 --> 00:28:56,735
wo ich den Routerlink bereits definiert habe.

366
00:28:56,735 --> 00:28:59,600
Also werde ich die RouterLinkActive Klasse anwenden,

367
00:28:59,600 --> 00:29:04,195
auf die Startseite, das Menü und die Kontaktieren Sie uns.

368
00:29:04,195 --> 00:29:08,535
Nun bedeutet das auch, dass ich eine aktive CSS-Klasse definieren sollte.

369
00:29:08,535 --> 00:29:14,360
Also, um das zu tun, werde ich in die Header-Komponenten-SESS-Datei gehen

370
00:29:14,360 --> 00:29:16,590
und dann eine aktive Klasse hier

371
00:29:16,590 --> 00:29:21,400
definieren, also werde ich die aktive Klasse direkt dort definieren.

372
00:29:21,400 --> 00:29:22,870
Um die aktive Klasse zu definieren,

373
00:29:22,870 --> 00:29:31,220
werde ich hier eine weitere Farbvariable namens background-moredark hinzufügen.

374
00:29:33,030 --> 00:29:39,080
Dann ist die entsprechende Farbe 4527A0,

375
00:29:39,900 --> 00:29:47,480
dies ist eine dunklere Version dieser dunklen Hintergrundfarbe, 4527A0.

376
00:29:47,480 --> 00:29:50,055
Dann, für meine aktive,

377
00:29:50,055 --> 00:29:52,720
was ich tun werde, ist, von der aktiven Klasse lasse

378
00:29:52,720 --> 00:29:57,725
ich die Klasse einen Hintergrund definieren,

379
00:29:57,725 --> 00:29:59,560
den Hintergrund

380
00:29:59,560 --> 00:30:09,410
dieses Elements auf die Hintergrund-moredark Farbe setzen.

381
00:30:10,170 --> 00:30:18,270
Also, wenn diese bestimmte Ansicht ausgewählt und auf der Seite angezeigt wird,

382
00:30:18,270 --> 00:30:21,630
dann wird diese aktive Klasse auf dieses

383
00:30:21,630 --> 00:30:24,670
bestimmte A-Tag

384
00:30:24,670 --> 00:30:30,340
dort durch die Router-Link-aktive Direktive angewendet werden, die wir hier angewendet haben.

385
00:30:30,340 --> 00:30:34,750
Nun, welche Änderung bewirkt das auf unserer Webseite. Wenn wir

386
00:30:34,750 --> 00:30:36,460
nun auf unserer Webseite gehen,

387
00:30:36,460 --> 00:30:40,685
werden wir sehen, was dies auf unserer Webseite einführt.

388
00:30:40,685 --> 00:30:43,390
Gehen Sie zu unserer Anwendung,

389
00:30:43,390 --> 00:30:45,360
sehen Sie jetzt, dass, wenn wir in

390
00:30:45,360 --> 00:30:52,125
der Home-Ansicht in der Home-Komponente sind, die hier angezeigt wird, seine entsprechende Ansicht.

391
00:30:52,125 --> 00:30:59,870
Dann hat die Home-Schaltfläche hier eine andere Hintergrundfarbe, die

392
00:30:59,870 --> 00:31:03,670
angewendet wird, da die aktive Klasse in hinzugefügt wurde, weil wir

393
00:31:03,670 --> 00:31:08,150
die RouterLinkActive definieren, die hier aktiv ist.

394
00:31:08,150 --> 00:31:09,510
Also, diese Klasse wird angewendet.

395
00:31:09,510 --> 00:31:11,985
In ähnlicher Weise

396
00:31:11,985 --> 00:31:17,205
sehen Sie, wenn Sie das Menü auswählen, dass das Menü in der Kopfzeile hervorgehoben

397
00:31:17,205 --> 00:31:20,025
ist, und die Menüansicht wird hier

398
00:31:20,025 --> 00:31:21,795
und ähnlich für den Inhalt angezeigt.

399
00:31:21,795 --> 00:31:29,035
Dies ermöglicht es uns, auf einen Blick zu sehen, auf welche bestimmte Sicht VR,

400
00:31:29,035 --> 00:31:31,760
in unserer einseitigen Anwendung.

401
00:31:31,760 --> 00:31:38,145
Also, dies ist eine zusätzliche kleine Bit Angebot Verbesserung der Benutzeroberfläche,

402
00:31:38,145 --> 00:31:42,255
die es uns ermöglicht, einige interessante Funktionen zu sehen.

403
00:31:42,255 --> 00:31:46,004
Obwohl es nicht viel zur Funktionalität der Anwendung hinzugefügt,

404
00:31:46,004 --> 00:31:54,370
sondern fügen Sie einfach ein kleines Feature hinzu, das eine nützliche Ergänzung zu Ihrer Anwendung sein wird.

405
00:31:54,370 --> 00:31:58,615
Damit schließen wir diese Übung ab.

406
00:31:58,615 --> 00:32:02,275
In dieser Übung haben wir daran gearbeitet,

407
00:32:02,275 --> 00:32:07,495
die Kontaktkomponente in unsere einseitige Anwendung zu integrieren.

408
00:32:07,495 --> 00:32:15,800
Wir haben auch ein paar Karten entworfen, die wir in die Home-Komponente

409
00:32:15,800 --> 00:32:20,180
aufgenommen haben und einige neue Funktionen zu unserer Anwendung hinzugefügt.

410
00:32:20,180 --> 00:32:28,310
Dies ist ein guter Zeitpunkt für Sie, die Änderungen in Ihrem Git-Repository mit der Meldung

411
00:32:28,310 --> 00:32:31,520
Single Page Application Part 1 zu speichern.