1
00:00:00,000 --> 00:00:06,150
Jetzt werden wir zu

2
00:00:06,150 --> 00:00:09,045
unserer nächsten Übung übergehen, wo wir

3
00:00:09,045 --> 00:00:13,275
eine neue Komponente erstellen und sie zu unserer Angular-Anwendung hinzufügen werden.

4
00:00:13,275 --> 00:00:17,430
Dann werden wir diese Komponente verwenden, um einen Teil

5
00:00:17,430 --> 00:00:22,380
des Bildschirms zu steuern, den wir für unsere Angular-Anwendung entwickelt haben.

6
00:00:22,380 --> 00:00:27,380
Der Bildschirm für unsere Angular Anwendung ist im Moment ziemlich langweilig.

7
00:00:27,380 --> 00:00:32,240
Alles, was wir haben, ist eine Symbolleiste oben und dann ein leerer,

8
00:00:32,240 --> 00:00:35,595
weißer Bildschirm hier, aber das gibt uns auch Ideen.

9
00:00:35,595 --> 00:00:39,560
Wir können jetzt zusätzliche Inhalte aufnehmen und diese

10
00:00:39,560 --> 00:00:43,970
dann in diesen Teil des Bildschirms einfügen. Wie machen wir das?

11
00:00:43,970 --> 00:00:46,850
Wir können eine neue Komponente erstellen und dann

12
00:00:46,850 --> 00:00:49,460
diesen Teil des Bildschirms an diese Komponente übergeben und sagen:

13
00:00:49,460 --> 00:00:53,450
„Sie kümmern sich um das Rendern, was Sie wollen, in diesen Teil des Bildschirms.“

14
00:00:53,450 --> 00:00:58,055
Diese Ansicht wird also von der neuen Komponente gesteuert.

15
00:00:58,055 --> 00:01:03,345
Wie machen wir das? Lasst uns jetzt die Übung durchmachen.

16
00:01:03,345 --> 00:01:06,610
Um mit der Übung zu beginnen,

17
00:01:06,610 --> 00:01:10,620
gehen Sie zu den Übungsanweisungen, die diesem Video folgen.

18
00:01:10,620 --> 00:01:12,555
Dann

19
00:01:12,555 --> 00:01:15,680
werden Sie in den Übungsanweisungen einige Übungsressourcen sehen,

20
00:01:15,680 --> 00:01:18,290
bei denen es sich um eine ZIP-Datei handelt.

21
00:01:18,290 --> 00:01:23,085
Laden Sie diese ZIP-Datei auf Ihren Computer herunter,

22
00:01:23,085 --> 00:01:28,320
und dies erhalten Sie eine images.zip Dateien.

23
00:01:28,320 --> 00:01:36,340
Also, speichern Sie es einfach als images.zip Datei in Ihrem Download-Ordner

24
00:01:36,340 --> 00:01:42,200
, entpacken Sie es, und dann gibt Ihnen dies

25
00:01:42,200 --> 00:01:46,700
einen Bilderordner mit einer Reihe von Bildern, die wir in unserer Anwendung verwenden werden.

26
00:01:46,700 --> 00:01:51,379
Entpacken Sie die Datei images.zip, die Sie gerade heruntergeladen haben,

27
00:01:51,379 --> 00:01:56,415
und verschieben Sie die Datei images.zip in Ihr Projekt

28
00:01:56,415 --> 00:01:58,130
und innerhalb Ihres Projekts

29
00:01:58,130 --> 00:02:02,695
in den Ordner Quellen und Assets hier.

30
00:02:02,695 --> 00:02:08,645
Also, wieder, verschieben Sie den Ordner Bilder, die Sie erhalten, indem Sie

31
00:02:08,645 --> 00:02:15,110
die Datei images.zip entpacken und dann verschieben Sie den Ordner Bilder in Ihre Anwendung,

32
00:02:15,110 --> 00:02:17,465
also, in Ihrer Anwendung,

33
00:02:17,465 --> 00:02:22,670
unter Quellen und Assets Unterordner.

34
00:02:22,670 --> 00:02:26,975
Diese Bilder, die hier bereitgestellt werden,

35
00:02:26,975 --> 00:02:31,690
stehen für die Verwendung in Ihrer Angular-Anwendung zur Verfügung.

36
00:02:31,690 --> 00:02:37,310
Jetzt werden wir die Angular CLI verwenden, um

37
00:02:37,310 --> 00:02:45,750
automatisch eine Komponente für uns zu generieren und sie unserer Angular-Anwendung hinzuzufügen.

38
00:02:45,750 --> 00:02:50,420
Gehen Sie also im Terminal zu dem Ordner, der Ihre Angular-Anwendung enthält, und geben Sie

39
00:02:50,420 --> 00:02:56,960
ng generate component menu ein.

40
00:02:56,960 --> 00:03:00,570
Also, wir werden diese Komponente als MenuComponent benennen.

41
00:03:00,570 --> 00:03:03,980
Dieses MenuComponent enthält das Menü für

42
00:03:03,980 --> 00:03:08,390
das Restaurant, für das wir unsere Angular-Anwendung vorbereiten.

43
00:03:08,390 --> 00:03:10,460
Wenn Sie dies eingeben,

44
00:03:10,460 --> 00:03:11,975
generiert dies automatisch

45
00:03:11,975 --> 00:03:16,350
die MenuComponent und fügt sie dann Ihrer Angular-Anwendung hinzu.

46
00:03:16,350 --> 00:03:19,970
Diese MenuComponent wird erstellt und in

47
00:03:19,970 --> 00:03:27,300
den Quell/app/menü-Ordner Ihrer Anwendung hinzugefügt.

48
00:03:27,300 --> 00:03:33,050
So wird es eine Reihe von Dateien im Menüordner erstellen.

49
00:03:33,050 --> 00:03:35,550
So können Sie sehen, dass es eine SCSS-Datei,

50
00:03:35,550 --> 00:03:38,310
eine HTML-Datei und die ts Datei erstellt,

51
00:03:38,310 --> 00:03:40,630
und dann etwas, das die spektrale ts-Datei genannt wird.

52
00:03:40,630 --> 00:03:42,495
Darauf kommen wir später zurück.

53
00:03:42,495 --> 00:03:48,140
Dann wird auch Ihre App module.ts Datei aktualisiert.

54
00:03:48,140 --> 00:03:52,920
Lassen Sie uns also einen Blick darauf werfen, was gerade passiert ist, als Sie

55
00:03:52,920 --> 00:03:58,415
diese MenuComponent erstellt und zu Ihrer Angular-Anwendung hinzugefügt haben.

56
00:03:58,415 --> 00:04:01,040
Gehen wir zum Redakteur. Wenn Sie

57
00:04:01,040 --> 00:04:03,930
zu unserem Editor kommen,

58
00:04:03,930 --> 00:04:06,650
werden Sie jetzt feststellen, dass

59
00:04:06,650 --> 00:04:09,380
es im App-Ordner einen neuen Ordner namens Menü gibt,

60
00:04:09,380 --> 00:04:16,210
und dieser Menüordner enthält alle MenuComponent verwandten Dateien hier.

61
00:04:16,210 --> 00:04:22,385
Die Angular CLI folgt dem Angular Standard Style Guide.

62
00:04:22,385 --> 00:04:25,715
Der Styleguide schlägt vor, dass jede Komponente

63
00:04:25,715 --> 00:04:29,765
in ihren eigenen Ordner platziert werden sollte, wie hier zu sehen ist,

64
00:04:29,765 --> 00:04:34,220
und ich mag das ziemlich, weil ich sehr besessen bin,

65
00:04:34,220 --> 00:04:38,840
es sauber Hierarchie für meine Anwendungsordner hier zu halten.

66
00:04:38,840 --> 00:04:41,825
Also, das funktioniert sehr gut für mich.

67
00:04:41,825 --> 00:04:44,545
Manche Leute mögen eine flache Hierarchie,

68
00:04:44,545 --> 00:04:46,570
aber ich werde einfach mit diesem Teil verwechselt.

69
00:04:46,570 --> 00:04:51,455
Also, ich bevorzuge es, jede Komponente in einem eigenen Ordner zu speichern.

70
00:04:51,455 --> 00:04:53,480
Also, es funktioniert gut für mich.

71
00:04:53,480 --> 00:04:58,430
Wenn Sie nun die Datei app module.ts öffnen,

72
00:04:58,430 --> 00:05:02,390
werden Sie feststellen, dass die Datei app module.ts aktualisiert wurde,

73
00:05:02,390 --> 00:05:06,810
indem Sie einen weiteren Import in die Datei app module.ts aufgenommen haben.

74
00:05:06,810 --> 00:05:09,435
Sie sehen also, dass zusammen mit der AppComponent

75
00:05:09,435 --> 00:05:15,235
die MenuComponent automatisch als Import zu Ihrem App-Modul hinzugefügt wurde.

76
00:05:15,235 --> 00:05:17,570
Das bedeutet also, dass die MenuComponent jetzt

77
00:05:17,570 --> 00:05:20,470
für Ihre Angular-Anwendung verfügbar ist.

78
00:05:20,470 --> 00:05:26,590
Wenn Sie die Deklarationseigenschaft im NgModule Dekorator überprüfen,

79
00:05:26,590 --> 00:05:29,160
werden Sie auch sehen, dass in der Eigenschaft deklarations

80
00:05:29,160 --> 00:05:31,465
neben der AppComponent

81
00:05:31,465 --> 00:05:34,120
auch die MenuComponent enthalten ist.

82
00:05:34,120 --> 00:05:37,270
Dies ist der Grund, warum ich Angular CLI liebe,

83
00:05:37,270 --> 00:05:40,035
weil es all das für mich funktioniert vereinfacht.

84
00:05:40,035 --> 00:05:41,945
Wenn ich es von Hand machen

85
00:05:41,945 --> 00:05:48,710
würde, muss ich manuell in die App module.ts gehen und dann all diesen Code eingeben,

86
00:05:48,710 --> 00:05:53,830
und es besteht eine hohe Wahrscheinlichkeit, dass ich dort Fehler machen werde.

87
00:05:53,830 --> 00:05:57,800
Wir ersparen uns also eine Menge Ärger, indem wir die Angular CLI verwenden.

88
00:05:57,800 --> 00:05:59,720
Deshalb habe ich mich in

89
00:05:59,720 --> 00:06:04,455
Angular CLI verliebt, um meine Angular-Anwendungen zu erstellen.

90
00:06:04,455 --> 00:06:07,965
Damit haben wir

91
00:06:07,965 --> 00:06:11,570
unsere MenuComponent so eingerichtet, dass sie für unsere Angular-Anwendung verfügbar ist.

92
00:06:11,570 --> 00:06:14,505
Nun, wo werde ich die MenuComponent nutzen?

93
00:06:14,505 --> 00:06:21,460
Ich werde die MenuComponent in meiner AppComponents Vorlage verwenden.

94
00:06:21,460 --> 00:06:25,275
Also gehe ich zur AppComponents Vorlage und

95
00:06:25,275 --> 00:06:29,810
füge dann die MenuComponent hier in meine AppComponent ein.

96
00:06:29,810 --> 00:06:37,795
Also, das wird im Wesentlichen diesen Teil des Bildschirms an meine MenuComponent übergeben.

97
00:06:37,795 --> 00:06:38,980
Wie machen wir das?

98
00:06:38,980 --> 00:06:44,300
Um dies zu tun, werfen wir zunächst einen kurzen Blick auf die Datei MenuComponent.ts.

99
00:06:44,300 --> 00:06:47,425
Wenn Sie also die Datei MenuComponent.ts öffnen,

100
00:06:47,425 --> 00:06:54,225
sehen Sie, dass der Selektor für die MenuComponent als app-Menü definiert wurde.

101
00:06:54,225 --> 00:07:02,615
Dies ist also der Standard-Selektorname, den die Angular CLI für Ihre Komponenten gibt.

102
00:07:02,615 --> 00:07:04,840
Sie können dies ändern, wenn Sie möchten,

103
00:07:04,840 --> 00:07:07,970
aber was auch immer Selektor Sie hier angeben,

104
00:07:07,970 --> 00:07:15,670
würde die Tags bilden, die Sie verwenden, um es in Ihre Vorlagendatei aufzunehmen.

105
00:07:15,670 --> 00:07:20,195
Also, zurück zu AppComponent.html,

106
00:07:20,195 --> 00:07:23,795
jetzt, wenn ich die Menüdatei hier einfügen möchte,

107
00:07:23,795 --> 00:07:24,930
also werde ich einfach sagen,

108
00:07:24,930 --> 00:07:31,775
app menu tag und voila,

109
00:07:31,775 --> 00:07:35,360
dass ein Teil des Bildschirms jetzt an meine MenuComponent übergeben wird,

110
00:07:35,360 --> 00:07:40,640
und es liegt an der MenuComponent zu entscheiden, was es dort platzieren will.

111
00:07:40,640 --> 00:07:42,420
Also, was auch immer definiert ist,

112
00:07:42,420 --> 00:07:49,535
die MenuComponents Vorlage wird hier platziert.

113
00:07:49,535 --> 00:07:53,630
Also, jetzt, alles, was wir übrig sind, ist zu gehen und

114
00:07:53,630 --> 00:07:58,695
unsere MenuComponent vorzubereiten, um die entsprechenden Informationen für uns zu zeigen.

115
00:07:58,695 --> 00:08:00,885
Lassen Sie uns die Änderungen speichern,

116
00:08:00,885 --> 00:08:04,825
und dann werden wir dann zum

117
00:08:04,825 --> 00:08:11,715
nächsten Schritt wechseln, wo wir das Menü für unser Restaurant mit der MenuComponent erstellen.

118
00:08:11,715 --> 00:08:14,845
Bevor ich das

119
00:08:14,845 --> 00:08:17,625
mache, gehe ich

120
00:08:17,625 --> 00:08:19,830
hier zum App-Ordner,

121
00:08:19,830 --> 00:08:22,090
und dann

122
00:08:22,090 --> 00:08:29,660
werde ich im App-Ordner einen neuen Unterordner erstellen und diesen als freigegebenen Unterordner benennen.

123
00:08:29,660 --> 00:08:34,015
Nun, alle Dateien, die ich über verschiedene Komponenten freigeben werde,

124
00:08:34,015 --> 00:08:37,040
werde ich es in den freigegebenen Ordner hier ablegen.

125
00:08:37,040 --> 00:08:39,160
Jetzt, innerhalb des freigegebenen Ordners,

126
00:08:39,160 --> 00:08:45,895
werde ich eine neue Datei namens dish.ts erstellen.

127
00:08:45,895 --> 00:08:51,650
In diesem dish.ts werde ich eine Klasse erstellen, um

128
00:08:51,650 --> 00:08:59,050
ein Gericht zu definieren und es für die restlichen Komponenten zur Verfügung zu stellen.

129
00:08:59,050 --> 00:09:04,240
Also, um hier eine TypeScript-Klasse zu definieren,

130
00:09:04,240 --> 00:09:07,525
werde ich sagen, export, also exportiere ich diese TypeScript-Klasse hier,

131
00:09:07,525 --> 00:09:13,550
exportiere Klasse, und dann werde ich die Klasse als Gericht benennen.

132
00:09:13,550 --> 00:09:16,230
Innerhalb dieser Schüsselklasse

133
00:09:16,230 --> 00:09:20,175
kann ich jetzt verschiedene Eigenschaften definieren.

134
00:09:20,175 --> 00:09:21,550
Also, für die Dish-Klasse

135
00:09:21,550 --> 00:09:23,050
werde ich eine Eigenschaft definieren,

136
00:09:23,050 --> 00:09:27,425
die eine ID ist, die ich als Zeichenfolge definiere.

137
00:09:27,425 --> 00:09:31,330
Wenn Sie aus der JavaScript-Welt kommen,

138
00:09:31,330 --> 00:09:35,975
müssen Sie in JavaScript den Typ einer Variablen nicht angeben.

139
00:09:35,975 --> 00:09:43,380
TypeScript bringt diese Funktion für Sie, um den Typ für jede Variable anzugeben.

140
00:09:43,380 --> 00:09:46,405
Wenn Sie also Name, Spalte und Zeichenfolge angeben,

141
00:09:46,405 --> 00:09:51,785
bedeutet dies, dass die Namensvariable immer vom String-Typ sein wird.

142
00:09:51,785 --> 00:09:58,400
Wenn Sie also versuchen, dem Namen eine ganze Zahl zuzuweisen,

143
00:09:58,400 --> 00:10:01,850
fängt der TypeScript-Compiler dies automatisch für Sie ab und teilt Ihnen dann mit, dass ein Fehler vorliegt.

144
00:10:01,850 --> 00:10:04,855
Aus diesem Grund

145
00:10:04,855 --> 00:10:08,155
können Sie mithilfe von TypeScript die Anzahl der Fehler reduzieren, die Sie verursachen könnten.

146
00:10:08,155 --> 00:10:11,850
JavaScript führt diese

147
00:10:11,850 --> 00:10:16,790
Fehlerprüfung traditionell nicht durch, da es kein Konzept von Datentypen hat.

148
00:10:16,790 --> 00:10:22,025
Aber wenn Sie aus einer traditionellen Programmiersprache wie C ++ oder Java kommen,

149
00:10:22,025 --> 00:10:24,945
sind Sie sehr vertraut mit den Datentypen,

150
00:10:24,945 --> 00:10:28,565
den primitiven Datentypen und

151
00:10:28,565 --> 00:10:33,290
anderen Arten von Datentypen, die bereits in der Sprache definiert sind.

152
00:10:33,290 --> 00:10:41,315
TypeScript bringt diese Funktion in JavaScript oder vielmehr als Teil von TypeScript,

153
00:10:41,315 --> 00:10:47,865
und das ermöglicht es Ihnen, Variablen zu definieren und Typen an diese Variablen anzuhängen,

154
00:10:47,865 --> 00:10:49,950
daher den Namen TypeScript.

155
00:10:49,950 --> 00:10:51,500
Also, für das Gericht,

156
00:10:51,500 --> 00:10:53,970
werde ich eine Namenseigenschaft erstellen.

157
00:10:53,970 --> 00:10:57,870
Dann werde ich eine Image-Eigenschaft erstellen,

158
00:10:57,870 --> 00:10:59,640
die auch eine Zeichenfolge ist.

159
00:10:59,640 --> 00:11:03,710
Diese Bildzeichenfolge wird eine Zeichenfolge sein,

160
00:11:03,710 --> 00:11:08,635
die auf die URL des Bildes verweist, das ich für dieses spezielle Gericht verwenden werde.

161
00:11:08,635 --> 00:11:18,230
Dann werde ich eine Kategorie für dieses Gericht als auch eine andere Zeichenfolge als Boolean gekennzeichnet definieren,

162
00:11:18,230 --> 00:11:21,130
Bezeichnung als Zeichenfolge.

163
00:11:21,150 --> 00:11:31,810
Preis als String und dann Beschreibung als String.

164
00:11:31,810 --> 00:11:37,695
Also, das sind Eigenschaften, die ich mit der Geschirrklasse assoziiere.

165
00:11:37,695 --> 00:11:43,440
Also, dies wird verschiedene Gerichte in meiner Speisekarte meines Restaurants definieren,

166
00:11:43,440 --> 00:11:48,060
und für jedes Gericht muss ich all diese verschiedenen Eigenschaften angeben.

167
00:11:48,060 --> 00:11:49,325
Warum sollte ich das brauchen?

168
00:11:49,325 --> 00:11:54,400
Das wird mir helfen, die Speisekarte für mein Restaurant zu bauen, wie Sie schon bald sehen werden.

169
00:11:54,400 --> 00:12:02,890
Damit vervollständigen wir die Definition meiner Klasse dort.

170
00:12:02,890 --> 00:12:06,940
Speichern wir die Änderungen an der Datei dish.ts.

171
00:12:06,940 --> 00:12:11,300
Nun exportiert diese dish.ts-Datei eine Klasse.

172
00:12:11,300 --> 00:12:15,820
Jetzt kann ich diese Klasse in jede

173
00:12:15,820 --> 00:12:22,485
der Komponententyp-Skriptdateien meiner Anwendung importieren.

174
00:12:22,485 --> 00:12:28,550
Als nächstes werde ich zu meiner menu.component.ts-Datei wechseln.

175
00:12:28,550 --> 00:12:34,484
In der menu.component.ts-Datei neben dem Importieren der Komponente

176
00:12:34,484 --> 00:12:38,420
sehe ich dann auch, dass Sie dort ein OnInit importieren.

177
00:12:38,420 --> 00:12:41,885
Wir werden in einer der späteren Übungen zum OnInit-Teil kommen.

178
00:12:41,885 --> 00:12:45,475
Ich werde erklären, was das in einer späteren Übung tut.

179
00:12:45,475 --> 00:12:53,820
Wir werden auch die neue Klasse importieren, die wir als Dish-Klasse erstellt haben.

180
00:12:53,820 --> 00:12:56,160
Warum importieren wir diese Gericht Klasse?

181
00:12:56,160 --> 00:13:03,180
Damit wir das als Typ für eine Variable verwenden können, die ich hier definiere.

182
00:13:03,180 --> 00:13:04,850
Also, wo ist dieses Gericht Klasse?

183
00:13:04,850 --> 00:13:13,955
Es ist in.. /shared/dish Ordner.

184
00:13:13,955 --> 00:13:17,890
Also, das ist im freigegebenen Dish-Ordner oben.

185
00:13:17,890 --> 00:13:22,460
Dann werden Sie sehen, dass wir die Menükomponente hier definiert haben.

186
00:13:22,460 --> 00:13:23,640
So können Sie sehen, dass es sagt,

187
00:13:23,640 --> 00:13:27,950
„Export-Klassenmenükomponente“ und dann sagt es, „Implementieren Sie darauf.“

188
00:13:27,950 --> 00:13:30,630
Darauf werden wir ein wenig später zurückkommen.

189
00:13:30,630 --> 00:13:37,130
Sie sehen auch, dass es einen Konstruktor gibt und es hier eine weitere Methode namens NGONit gibt.

190
00:13:37,130 --> 00:13:40,170
Wir werden diese in einigen der späteren Übungen verwenden.

191
00:13:40,170 --> 00:13:42,970
Also lassen wir es einfach als solche da und wir werden

192
00:13:42,970 --> 00:13:46,565
zurückkommen, um zu verstehen, was das in kurzer Zeit ist.

193
00:13:46,565 --> 00:13:48,940
Beachten Sie auch, dass für diese Komponente

194
00:13:48,940 --> 00:13:52,040
die Vorlage im Menükomponenten-Punkt-HTML definiert ist,

195
00:13:52,040 --> 00:13:56,070
und die dort definierten Stil-URLs.

196
00:13:56,070 --> 00:14:02,170
Nun, zusätzlich, in meine Menükomponentenklasse,

197
00:14:02,170 --> 00:14:07,100
werde ich eine neue Variable aufnehmen, die als

198
00:14:07,100 --> 00:14:14,660
Gerichte genannt wird, die ein Array des Gerichttyps sein würde.

199
00:14:14,660 --> 00:14:21,540
Ok? Dann werde ich einfach die Menge der

200
00:14:21,540 --> 00:14:29,955
Gerichte in meine Gerichte Variable, die ich hier definiert habe.

201
00:14:29,955 --> 00:14:35,040
Nun, alles mit der Hand zu tippen, braucht mich viel Zeit.

202
00:14:35,040 --> 00:14:39,060
Stattdessen, was ich Ihnen vorschlagen würde, ist einfach gehen und kopieren Sie

203
00:14:39,060 --> 00:14:45,780
den Inhalt direkt aus den Anweisungen, die diesem Video folgen.

204
00:14:45,780 --> 00:14:47,350
Also, das werde ich tun.

205
00:14:47,350 --> 00:14:50,810
Dann komm zurück und füge das hier rein.

206
00:14:50,810 --> 00:14:55,720
Sie können jetzt sehen, dass ich die Informationen für

207
00:14:55,720 --> 00:15:00,120
alle meine Gerichte aus den Anweisungen hier geschnitten und eingefügt habe.

208
00:15:00,120 --> 00:15:07,045
Dies vervollständigt also das Array aller Gerichte, die in meinen Anweisungen definiert sind.

209
00:15:07,045 --> 00:15:11,035
Also, das ist der einfachste Weg, um diese Informationen zu bekommen.

210
00:15:11,035 --> 00:15:13,525
Also, schneiden Sie es einfach von dort aus und fügen Sie es ein.

211
00:15:13,525 --> 00:15:16,800
Beachten Sie nun, dass für dieses Gericht

212
00:15:16,800 --> 00:15:20,885
jeder von ihnen hier ein JavaScript-Objekt ist.

213
00:15:20,885 --> 00:15:25,240
Das kann also dort in die entsprechende Type-Skriptklasse abgebildet werden.

214
00:15:25,240 --> 00:15:28,700
Sie können also sehen, dass jedes JavaScript-Objekt dort Eigenschaften hat,

215
00:15:28,700 --> 00:15:35,245
und diese Eigenschaften genau mit den Eigenschaften übereinstimmen, die ich für meine Dish-Klasse definiert habe.

216
00:15:35,245 --> 00:15:37,080
Sobald ich das definiert habe,

217
00:15:37,080 --> 00:15:39,430
werden diese Gerichte nun zu einer Reihe von

218
00:15:39,430 --> 00:15:42,020
Gerichten und das wird

219
00:15:42,020 --> 00:15:48,420
mir jetzt zur Verfügung stehen, wenn ich meine HTML-Vorlage für mein Menü definiere.

220
00:15:48,420 --> 00:15:53,715
Lassen Sie uns die Änderungen speichern, die wir bisher gemacht haben, und dann

221
00:15:53,715 --> 00:15:59,410
öffnen wir die menu.component.html Datei.

222
00:15:59,410 --> 00:16:02,580
Also gehen wir zur menu.component.html Datei.

223
00:16:02,580 --> 00:16:06,280
Sie werden sehen, dass in der menu.component.html Datei,

224
00:16:06,280 --> 00:16:11,390
Sie haben derzeit nur ein P mit Menü funktioniert hier.

225
00:16:11,390 --> 00:16:17,390
Also, wenn Sie es einfach dort einfügen und dann sehen, wie die Anwendung funktioniert,

226
00:16:17,390 --> 00:16:20,500
hätten Sie gesehen, dass nur dieses Menü auf dem Bildschirm funktioniert.

227
00:16:20,500 --> 00:16:25,640
Ich werde dies hier durch meinen eigenen Vorlagencode ersetzen.

228
00:16:25,640 --> 00:16:31,230
Dies ist, wo ich die Hilfe des eckigen Flex-Layouts nehmen werde, um mir

229
00:16:31,230 --> 00:16:37,125
zu helfen, meine Inhalte gut in meinem Bildschirm zu legen.

230
00:16:37,125 --> 00:16:38,885
Also, um zu beginnen,

231
00:16:38,885 --> 00:16:41,490
werde ich mit einem div beginnen,

232
00:16:41,490 --> 00:16:46,480
auf das ich eine Klasse namens Container anwenden werde.

233
00:16:46,480 --> 00:16:49,710
Ich werde die Container-Klasse definieren, indem ich

234
00:16:49,710 --> 00:16:55,360
etwas CSS-Code später in dieser Übung verwende.

235
00:16:55,360 --> 00:16:57,715
Also, ich werde den Klassencontainer hier anwenden.

236
00:16:57,715 --> 00:17:04,640
Ich werde auch eine Eigenschaft namens fxlayout definieren.

237
00:17:04,640 --> 00:17:07,545
Ein Attribut namens fxlayout.

238
00:17:07,545 --> 00:17:10,205
Nun, dieses fxlayout ist ein Attribut

239
00:17:10,205 --> 00:17:15,015
, das das eckige Flex-Layout mir erlaubt, auf ein div anzuwenden.

240
00:17:15,015 --> 00:17:20,295
Dies gibt an, ob die verschiedenen Inhalte

241
00:17:20,295 --> 00:17:25,440
, die ich in diese div einschließe, entweder horizontal oder vertikal angelegt werden sollten.

242
00:17:25,440 --> 00:17:28,755
Also werde ich angeben, dass dies eine Spalte ist.

243
00:17:28,755 --> 00:17:32,675
Also, egal welcher Inhalt ich in diesem div

244
00:17:32,675 --> 00:17:36,105
einschließe, wird vertikal untereinander auf meinem Bildschirm angeordnet.

245
00:17:36,105 --> 00:17:43,855
Wenn Sie die Grid-Art gesehen haben, mit Inhalten in Bootstrap zu arbeiten,

246
00:17:43,855 --> 00:17:47,100
würden Sie sehen, dass dies mir im Wesentlichen sagt, dass ich

247
00:17:47,100 --> 00:17:50,970
alles in eine einzige Spalte legen werde.

248
00:17:50,970 --> 00:17:55,700
Verwechseln Sie diese Spalte nicht mit der Bootstrap-Spalte aus dem Bootstrap-Gitter.

249
00:17:55,700 --> 00:17:57,185
Es sind zwei verschiedene Dinge.

250
00:17:57,185 --> 00:18:01,290
Hier ist das Attribut fxlayout und ich gebe Spalte an.

251
00:18:01,290 --> 00:18:03,240
Ich kann dies auch als Zeile angeben,

252
00:18:03,240 --> 00:18:07,470
was bedeutet, dass der Inhalt horizontal ausgelegt wird.

253
00:18:07,470 --> 00:18:14,590
Nun auch ein weiteres Attribut, das ich dafür angeben werde, ist FxLayoutGap,

254
00:18:14,590 --> 00:18:18,705
das ich als 10 Pixel angeben werde.

255
00:18:18,705 --> 00:18:23,330
Also, was das bedeutet, ist, dass

256
00:18:23,330 --> 00:18:27,690
jeder Inhalt, den ich hier einschließe, durch einen Abstand von 10 Pixeln zwischen jedem von ihnen getrennt wird.

257
00:18:27,690 --> 00:18:33,745
Aus Bootstraps Wissen sehen Sie, was ein Cutoff hier ist.

258
00:18:33,745 --> 00:18:38,050
Dies definiert eine Cutoff-Trennung zwischen

259
00:18:38,050 --> 00:18:42,925
zwei Teilen von Inhalten in meiner Anwendungsvorlage.

260
00:18:42,925 --> 00:18:46,945
Also, damit werden wir das div hier schließen.

261
00:18:46,945 --> 00:18:49,080
Jetzt, in diesem div,

262
00:18:49,080 --> 00:18:57,735
werde ich den tatsächlichen Inhalt definieren, der in meine menu.component.html Datei geht.

263
00:18:57,735 --> 00:19:04,035
Jetzt hier drin werde ich eine andere Komponente verwenden, die

264
00:19:04,035 --> 00:19:10,745
mir das Materialdesign als Mattenlistenkomponente bietet.

265
00:19:10,745 --> 00:19:14,470
Diese Komponente ermöglicht es mir, eine Liste von

266
00:19:14,470 --> 00:19:19,215
Elementen zu erstellen, die ich hier in meine Vorlage einschließe.

267
00:19:19,215 --> 00:19:25,360
Dies ist also eine eckige Materiallistenkomponente.

268
00:19:25,360 --> 00:19:30,980
Von Bootstrap bemerken Sie, dass wir in Bootstrap das Medienobjekt hatten.

269
00:19:30,980 --> 00:19:36,430
Also, die Mattenliste ist wie das Medienobjekt in gewissem Sinne von Bootstrap.

270
00:19:36,430 --> 00:19:39,470
Jetzt werde ich eine Klasse anwenden,

271
00:19:39,470 --> 00:19:42,095
ein Attribut namens FxFlex.

272
00:19:42,095 --> 00:19:49,990
Nun, was das bedeutet, ist, dass diese ganze Sache als eine Einheit oder ein Stück

273
00:19:49,990 --> 00:19:58,180
Inhalt behandelt wird, die sie von meinem Flex-Layout hier angelegt werden.

274
00:19:58,180 --> 00:20:01,100
Also, wenn Sie mit CSS Flex-Layout vertraut sind.

275
00:20:01,100 --> 00:20:05,505
Also, dies ist ein Stück Inhalt, der von meinem CSS-Flex-Layout ausgelegt wird.

276
00:20:05,505 --> 00:20:09,420
Also, wenden Sie FxFlex hier an,

277
00:20:09,420 --> 00:20:16,610
und dann werde ich hier mat-list-item definieren.

278
00:20:16,610 --> 00:20:18,380
Also, das ist ein Listenelement hier.

279
00:20:18,380 --> 00:20:22,250
Also, aus Ihrem HTML-Wissen,

280
00:20:22,250 --> 00:20:28,090
wenn das LI-Tag, das Sie in HTML verwenden, hier ähnlich ist.

281
00:20:28,090 --> 00:20:31,240
Also, das ist ein mg Listenelement hier.

282
00:20:31,240 --> 00:20:34,705
Also offensichtlich

283
00:20:34,705 --> 00:20:39,220
werden Sie in diesem Listenelement die Liste der Dinge definieren.

284
00:20:39,220 --> 00:20:45,750
Nun bietet angular einige strukturelle Direktiven, die Sie

285
00:20:45,750 --> 00:20:53,455
hier auf Ihre Tags anwenden können, mit denen Sie Ihren Inhalt erstellen können.

286
00:20:53,455 --> 00:20:58,375
Jetzt werde ich eine strukturelle Direktive namens ngFor verwenden.

287
00:20:58,375 --> 00:21:01,990
Wir werden sehen, wie wir es in dieser Vorlage verwenden.

288
00:21:01,990 --> 00:21:04,050
Später nach dieser Übung

289
00:21:04,050 --> 00:21:07,250
werde ich Ihnen kurz erläutern, was die Strukturrichtlinien sind und

290
00:21:07,250 --> 00:21:11,625
welchen Zweck sie bei der Definition Ihrer Vorlagen hier dienen.

291
00:21:11,625 --> 00:21:15,960
Also, in diesem leeren Listenelement, werde ich sagen,

292
00:21:15,960 --> 00:21:21,480
Stern, notieren Sie die Syntax, Stern ngFor.

293
00:21:22,470 --> 00:21:25,500
Dies ist also die Strukturrichtlinie,

294
00:21:25,500 --> 00:21:29,585
die NGfor-Strukturrichtlinie in eckig.

295
00:21:29,585 --> 00:21:34,690
Was diese ngFor strukturelle Direktive Ihnen erlaubt, ist

296
00:21:34,690 --> 00:21:40,855
, über ein Array von Elementen zu iterieren.

297
00:21:40,855 --> 00:21:48,805
Denken Sie daran, dass wir Gerichte als eine Reihe von Gerichten in unserem Code definiert haben.

298
00:21:48,805 --> 00:21:51,040
Jetzt, in meiner Vorlage,

299
00:21:51,040 --> 00:21:54,095
habe ich Zugriff auf dieses Geschirr Objekt.

300
00:21:54,095 --> 00:21:56,945
Also hier drin, wenn ich darüber iterieren will,

301
00:21:56,945 --> 00:21:59,160
so wie ich es spezifiziere, werde ich sagen:

302
00:21:59,160 --> 00:22:04,950
„Lassen Sie Gericht.“

303
00:22:04,950 --> 00:22:11,495
So funktioniert die Syntax für die ngFor strukturelle Direktive.

304
00:22:11,495 --> 00:22:14,020
Also, lassen Sie Gericht von Gerichten.

305
00:22:14,020 --> 00:22:21,805
Was das bedeutet, ist, dass Geschirr die Reihe von Geschirrobjekten ist.

306
00:22:21,805 --> 00:22:24,245
Wenn wir sagen lassen Gericht Gerichte auswählen,

307
00:22:24,245 --> 00:22:27,130
wird dies mir erlauben, auf jedes Element

308
00:22:27,130 --> 00:22:30,460
des Arrays zuzugreifen und dann hilft es mir, über das Array zu iterieren.

309
00:22:30,460 --> 00:22:32,085
Dies ist wie eine for-Schleife,

310
00:22:32,085 --> 00:22:36,210
wenn Sie mit for-Schleifen aus der Programmierung vertraut sind.

311
00:22:36,210 --> 00:22:40,630
Also, das verhält sich wie eine for-Schleife für Sie und dann hilft es Ihnen,

312
00:22:40,630 --> 00:22:46,855
hier alle Elemente des Geschirr-Arrays zu durchlaufen.

313
00:22:46,855 --> 00:22:51,050
Dieses Gericht wird zu einem JavaScript-Objekt, mit

314
00:22:51,050 --> 00:22:55,350
dem ich dort auf jedes Element dieses Arrays zugreifen kann.

315
00:22:55,350 --> 00:23:00,680
Nun, daraus können wir jetzt auch

316
00:23:00,680 --> 00:23:06,775
Zugriff auf die Eigenschaften jedes einzelnen Objekts in meinem Geschirr Array bekommen.

317
00:23:06,775 --> 00:23:13,335
Also, dann kann ich sie verwenden, um meine Vorlage hier zu definieren.

318
00:23:13,335 --> 00:23:16,120
Lassen Sie mich die Vorlage auslegen und dann gehen wir zurück und

319
00:23:16,120 --> 00:23:19,185
schauen, wie diese beiden hier miteinander verknüpft sind.

320
00:23:19,185 --> 00:23:21,760
Jetzt

321
00:23:21,760 --> 00:23:28,480
kann ich in meinem leeren Listenelement ein Bild mit dem Attribut als MatliStAvatar einfügen.

322
00:23:30,040 --> 00:23:38,625
Dies erlaubt mir, ein Bild und dann mit der Quelle, die hier angegeben wird, einzuschließen.

323
00:23:38,625 --> 00:23:44,275
Sehen Sie sich jetzt interessanterweise die Syntax an, die ich hier verwende.

324
00:23:44,275 --> 00:23:48,380
In doppelten Klammern werde ich dish.image sagen.

325
00:23:48,560 --> 00:23:55,985
Das bedeutet, dass es sich um eine Einweginterpolation handelt, über die wir sprechen.

326
00:23:55,985 --> 00:23:58,885
Wenn ich dies angebe,

327
00:23:58,885 --> 00:24:07,635
bedeutet dies, dass diese Quelle den Wert von dish.image erhält, der in

328
00:24:07,635 --> 00:24:10,515
meinem

329
00:24:10,515 --> 00:24:17,050
JavaScript-Objekt definiert wurde, das ich dort in meiner Type-Skript-Klasse definiert habe und das für mich verfügbar ist, um das Layout hier zu machen.

330
00:24:17,050 --> 00:24:22,510
Damit der dish.image-Wert mir und auch für dieses Bild zur Verfügung steht,

331
00:24:22,510 --> 00:24:28,255
werde ich einen alternativen Wert als dish.name angeben.

332
00:24:28,255 --> 00:24:33,770
Erinnern Sie sich, dass mein Gericht

333
00:24:33,770 --> 00:24:39,240
mir auch die Namenseigenschaft zur Verfügung hatte, so dass hier ein Bild für meine Liste definiert.

334
00:24:39,240 --> 00:24:42,460
Sie werden ziemlich bald feststellen, wie diese Liste auf

335
00:24:42,460 --> 00:24:46,010
dem Bildschirm aussieht, wenn wir diese Vorlage hier vervollständigen.

336
00:24:46,010 --> 00:24:53,140
Darüber hinaus werde ich ein h1 mit matLine-Tag verwenden.

337
00:24:53,140 --> 00:24:56,500
Auch dies ist die Verwendung

338
00:24:56,500 --> 00:25:04,900
der Listenwinkelmaterialkomponente zum Definieren meiner Vorlage hier.

339
00:25:04,900 --> 00:25:12,800
Also, ich sage h1 MatLine, so dass das mir hilft, eine Zeile hier und dann innen

340
00:25:12,800 --> 00:25:17,170
zu definieren, ich werde die doppelten Klammern verwenden und hier dish.name sagen.

341
00:25:17,170 --> 00:25:24,930
Also, das erlaubt mir, den Wert des Gerichtennamens dort zu bekommen.

342
00:25:24,930 --> 00:25:33,140
Also, das definiert eine Zeile und dann die in der nächsten Zeile werde ich p MatLine sagen.

343
00:25:33,140 --> 00:25:36,370
Also, ich werde das p-Tag hier verwenden und

344
00:25:36,370 --> 00:25:39,655
dann das p-Tag schließen und dann innerhalb des p-Tags

345
00:25:39,655 --> 00:25:48,000
werde ich eine Spanne verwenden, um dish.description zu definieren.

346
00:25:48,000 --> 00:25:52,025
Also, wenn Sie mit JavaScript-Objekten vertraut sind,

347
00:25:52,025 --> 00:25:56,180
sehen Sie jetzt, wie ich auf die Eigenschaften

348
00:25:56,180 --> 00:26:02,030
meines JavaScript-Objekts hier zugreife, dish.description hier.

349
00:26:02,030 --> 00:26:06,595
Beachten Sie, dass das

350
00:26:06,595 --> 00:26:13,630
ngFor -Attribut dies noch einmal durchläuft, erlaubt es mir, hier über ein Array von Objekten zu iterieren.

351
00:26:13,630 --> 00:26:17,700
Also, Geschirr hier ist eine Reihe von Geschirrobjekten.

352
00:26:17,700 --> 00:26:20,865
Also, wenn ich sage, lassen Gericht Gerichte,

353
00:26:20,865 --> 00:26:28,070
dieses Gericht wird mir Zugang zu jedem Element

354
00:26:28,070 --> 00:26:32,170
meiner Gerichte Array geben und ich iteriere über jedes Element des Arrays

355
00:26:32,170 --> 00:26:36,525
und dann werde ich diesen Inhalt für jeden von ihnen erstellen.

356
00:26:36,525 --> 00:26:39,205
Also, dieses leere Listenelement,

357
00:26:39,205 --> 00:26:43,500
wirkt im Wesentlichen wie eine for-Schleife aus

358
00:26:43,500 --> 00:26:47,830
Ihrer traditionellen Computersprache und dann iteriert es über

359
00:26:47,830 --> 00:26:52,890
die Liste der Gerichte und legt dann jedes von ihnen auf meinem Bildschirm.

360
00:26:52,890 --> 00:26:54,895
Also, mit dieser Änderung,

361
00:26:54,895 --> 00:27:00,145
speichern wir die Menükomponenten-Datei.

362
00:27:00,145 --> 00:27:06,800
Als nächstes gehen wir zu app.module.ts und wir müssen das MatList-Modul in dieses importieren.

363
00:27:06,800 --> 00:27:11,840
Also, wir sagen, importieren MatListModule

364
00:27:11,840 --> 00:27:20,380
aus Angular/Material/List.Sobald wir dies dort importiert haben,

365
00:27:20,380 --> 00:27:25,390
dann gehen wir nach unten und aktualisieren dann die Importe im

366
00:27:25,390 --> 00:27:30,320
Ng-Modul Dekorator und fügen

367
00:27:30,320 --> 00:27:36,435
das MatList-Modul zur Liste der Importe dort hinzu.

368
00:27:36,435 --> 00:27:42,430
Dies meine App module.ts wird jetzt aktualisiert und dann

369
00:27:42,430 --> 00:27:47,770
gehe ich auch zur styles.scss-Datei und füge dann

370
00:27:47,770 --> 00:27:53,575
die Container-Klasse hier hinzu.

371
00:27:53,575 --> 00:27:55,890
Was definiert die Container-Klasse hier?

372
00:27:55,890 --> 00:28:00,995
Die Container-Klasse ist Rand 20 Pixel

373
00:28:00,995 --> 00:28:07,830
und zeigen Flex und speichern Sie die Änderungen.

374
00:28:07,830 --> 00:28:12,210
Jetzt schauen wir uns unsere Webseite an.

375
00:28:12,210 --> 00:28:14,180
Gehen Sie auf unsere Webseite.

376
00:28:14,180 --> 00:28:15,885
Voila. Da gehst du.

377
00:28:15,885 --> 00:28:22,250
Die Speisekarte für unser Restaurant in all seiner Pracht auf dem Bildschirm gezeigt.

378
00:28:22,250 --> 00:28:25,365
Sie sehen, wie dieses Menü erstellt wurde.

379
00:28:25,365 --> 00:28:30,455
Schauen Sie sich das JavaScript-Objekt-Array an, das Sie gesehen haben.

380
00:28:30,455 --> 00:28:35,250
Sehen Sie sich an, wie jede der Eigenschaften für das JavaScript-Objektarray verwendet und

381
00:28:35,250 --> 00:28:40,490
den vier Elementen in meiner Liste zugeordnet wurde.

382
00:28:40,490 --> 00:28:44,170
Sehen Sie sich hier an, wie die entsprechenden Bilder

383
00:28:44,170 --> 00:28:48,430
mit dem MatliStavatar aufgenommen wurden.

384
00:28:48,430 --> 00:28:55,150
So entstehen hier runde Bilder und notieren Sie dann, wie der Name

385
00:28:55,150 --> 00:29:03,155
des Gerichts hier angezeigt wird und dann die Beschreibung des hier enthaltenen Gerichts.

386
00:29:03,155 --> 00:29:09,010
Wunderbar. Jetzt haben wir das Menü für unser Restaurant auf

387
00:29:09,010 --> 00:29:14,925
dem Bildschirm mit einer Menükomponente in Angular.

388
00:29:14,925 --> 00:29:17,625
Damit ist diese Übung abgeschlossen.

389
00:29:17,625 --> 00:29:21,860
In dieser Übung haben wir gelernt, wie man eine neue Komponente erstellt.

390
00:29:21,860 --> 00:29:25,165
fügen Sie es in unsere Angular-Anwendung

391
00:29:25,165 --> 00:29:28,270
hinzu, wie Sie diese Komponente in die Vorlage

392
00:29:28,270 --> 00:29:32,365
einer anderen Komponente einschließen, so dass die Hierarchie der Komponenten erstellt wird.

393
00:29:32,365 --> 00:29:39,255
Dann haben wir gesehen, wie wir das Winkelflex-Layout und auch

394
00:29:39,255 --> 00:29:42,700
die Materialkonstruktionskomponenten nutzen können, um

395
00:29:42,700 --> 00:29:47,560
die Vorlage für unsere Menükomponente zu entwerfen, um den Inhalt hier anzuzeigen.

396
00:29:47,560 --> 00:29:52,710
Wenn du mich fragst, wie erinnere ich mich an all diese Dinge.

397
00:29:52,710 --> 00:29:54,535
Nun, um ehrlich zu sein,

398
00:29:54,535 --> 00:29:59,435
man kann sich nicht an alles erinnern, aber man muss den Ansatz verstehen.

399
00:29:59,435 --> 00:30:03,035
Das ist wichtiger als zu versuchen, eines dieser Dinge auswendig zu lernen.

400
00:30:03,035 --> 00:30:06,735
Nun, wenn Sie mich fragen, wo bekomme ich die Informationen über

401
00:30:06,735 --> 00:30:12,740
die Listenkomponente aus Winkelmaterial.

402
00:30:12,740 --> 00:30:16,560
Wir können die Winkelmaterialdokumentation sortieren und dort

403
00:30:16,560 --> 00:30:21,005
haben Sie die Details darüber, wie eine Listenkomponente vorbereitet werden soll.

404
00:30:21,005 --> 00:30:29,405
Nun, wo bekommen wir die Details darüber, wie wir eine Komponente in eckig entwerfen?

405
00:30:29,405 --> 00:30:33,240
Wir haben gerade ein wenig davon untersucht und dann in dieser Übung

406
00:30:33,240 --> 00:30:41,080
lernten wir, wie man eine neue Komponente erstellt und diese dann in unserer Winkelanwendung anwenden kann.

407
00:30:41,080 --> 00:30:44,790
Also, dies ist ein guter Punkt für Sie, einen

408
00:30:44,790 --> 00:30:48,905
get Kommentar mit den Nachrichtenkomponenten Teil eins zu tun.

409
00:30:48,905 --> 00:30:50,540
In der nächsten Übung

410
00:30:50,540 --> 00:30:54,895
werden wir dies ein wenig mehr verbessern, indem wir eine andere Art

411
00:30:54,895 --> 00:31:00,920
von Winkelmaterialkomponente verwenden, um den Inhalt auf meinem Bildschirm auslegen zu können.