1
00:00:03,950 --> 00:00:06,915
In der vorherigen Übung

2
00:00:06,915 --> 00:00:12,510
haben wir unsere erste grundlegende Angular-Anwendung ausgearbeitet.

3
00:00:12,510 --> 00:00:16,430
Wie ich bereits erwähnt habe, werden wir an dieser Angular-Anwendung arbeiten und

4
00:00:16,430 --> 00:00:20,350
sie während des gesamten Kurses weiter entwickeln.

5
00:00:20,350 --> 00:00:24,230
Nun, bevor wir mit der Arbeit an unserer Angular-Anwendung beginnen,

6
00:00:24,230 --> 00:00:29,509
lassen Sie uns unsere Angular-Anwendung so konfigurieren, dass wir einige zusätzliche Module verwenden,

7
00:00:29,509 --> 00:00:34,035
die es uns ermöglichen, die Vorlagen für unsere Angular-Anwendung zu entwerfen.

8
00:00:34,035 --> 00:00:40,810
Wir werden das Angular Material Modul für die Gestaltung der UI-Layouts verwenden.

9
00:00:40,810 --> 00:00:47,420
Das Modul Angular Material bietet uns eine Reihe interessanter Layout-Komponenten

10
00:00:47,420 --> 00:00:54,500
, die wir bei der Gestaltung unserer Angular-Komponenten-Vorlagen nutzen können.

11
00:00:54,500 --> 00:01:01,915
Darüber hinaus werden wir das Flex-Layout verwenden, das auf dem CSS-Flex-Layout basiert,

12
00:01:01,915 --> 00:01:08,015
was es uns ermöglicht, responsive Design innerhalb unserer Angular-Anwendung durchzuführen.

13
00:01:08,015 --> 00:01:09,520
In dieser Übung

14
00:01:09,520 --> 00:01:11,330
werden wir diese Konfigurationen durchführen.

15
00:01:11,330 --> 00:01:17,460
Auf dem Weg lernen wir unsere ersten kurzen Kenntnisse der Komponenten kennen,

16
00:01:17,460 --> 00:01:23,980
noch bevor wir die Komponenten in der nächsten Lektion genauer untersuchen.

17
00:01:23,980 --> 00:01:31,810
Um zu beginnen, beginnen wir unsere Reise mit einem kurzen Besuch der Datei app.component.ts.

18
00:01:31,810 --> 00:01:33,769
Dies ist die Datei, die

19
00:01:33,769 --> 00:01:38,390
die Root-Komponente unterstützt, die Teil unserer Angular-Anwendung ist.

20
00:01:38,390 --> 00:01:40,765
Nun, wenn man sich diese Root-Komponente anschaut,

21
00:01:40,765 --> 00:01:45,090
gibt es ein paar Dinge, die Ihnen auch ohne viel Erklärung sehr klar werden.

22
00:01:45,090 --> 00:01:49,715
Das erste, worauf ich Sie aufmerksam machen möchte, ist diese Importerklärung.

23
00:01:49,715 --> 00:01:56,300
Wie Sie sehen können, importiert dies die Komponentenklasse aus der Angular-Kernbibliothek.

24
00:01:56,300 --> 00:02:01,185
Danach bereiten wir unsere AppComponent-Klasse hier vor

25
00:02:01,185 --> 00:02:03,280
und exportieren diese Klasse.

26
00:02:03,280 --> 00:02:07,160
Also, innerhalb dieser AppComponent-Klasse, die wir deklariert

27
00:02:07,160 --> 00:02:12,080
haben, haben wir eine Variable, die wir hier als title deklariert haben,

28
00:02:12,080 --> 00:02:15,330
die derzeit als String zugewiesen ist. Wenn Sie

29
00:02:15,330 --> 00:02:17,910
nun einen kurzen Blick auf diese Variable werfen,

30
00:02:17,910 --> 00:02:20,360
beginnen Sie sich sofort zu fragen,

31
00:02:20,360 --> 00:02:24,740
wie dies mit dem zusammenhängt, was wir im Browser gesehen haben,

32
00:02:24,740 --> 00:02:29,585
als Sie sahen, dass unsere Angular-Anwendung im Browser angezeigt

33
00:02:29,585 --> 00:02:33,740
wurde, zeigte die Angular-Anwendung genau diese Wörter im Browser an.

34
00:02:33,740 --> 00:02:38,630
In der Tat spielt diese Variable eine wichtige Rolle,

35
00:02:38,630 --> 00:02:44,250
um die Ansicht zu erhalten, die Sie in unserem Browser gesehen haben.

36
00:02:44,250 --> 00:02:46,730
Nun sehen Sie auch, dass

37
00:02:46,730 --> 00:02:53,790
diese Komponentenklasse hier mit einem Dekorator angehängt wird.

38
00:02:53,790 --> 00:02:58,395
Also wieder, dies ist ein weiterer Dekorator, dem Sie in Angular begegnen werden.

39
00:02:58,395 --> 00:03:01,590
Also, das, wie wir sehen, ist ein Komponenten-Dekorator.

40
00:03:01,590 --> 00:03:08,240
Der Komponenten-Dekorator nimmt intern ein JavaScript-Objekt als Parameter hier,

41
00:03:08,240 --> 00:03:14,700
und die erste Eigenschaft, die Sie hier sehen als selector: app-root.

42
00:03:14,700 --> 00:03:19,100
Nun, wenn Sie sich erinnern, als wir uns die Datei index.HTML angesehen haben,

43
00:03:19,100 --> 00:03:23,275
haben wir gesehen, dass wir dort ein Element namens app-root aufgenommen haben.

44
00:03:23,275 --> 00:03:26,865
Jetzt beginnen Sie zu sehen, woher diese App-Root entsteht.

45
00:03:26,865 --> 00:03:31,250
Dies ist also der Selektor für die Komponente, die wir hier deklarieren,

46
00:03:31,250 --> 00:03:36,020
was innerhalb unserer Template-Klasse verwendet wird, um anzugeben, wo

47
00:03:36,020 --> 00:03:41,960
die Ansicht, die dieser Komponente entspricht, im Browser angezeigt werden soll.

48
00:03:41,960 --> 00:03:47,845
Die zweite Eigenschaft, die Sie hier definieren, ist die TemplateURL.

49
00:03:47,845 --> 00:03:50,890
Dies verweist auf eine Datei,

50
00:03:50,890 --> 00:03:53,030
eine HTML-Datei, wie Sie sehen können,

51
00:03:53,030 --> 00:03:57,945
die die Vorlage enthält, die dieser bestimmten Komponente entspricht.

52
00:03:57,945 --> 00:04:02,335
Die Vorlage, die die Ansicht für diese Komponente definiert.

53
00:04:02,335 --> 00:04:07,565
Die dritte Eigenschaft, die Sie hier definieren, wie Sie sehen können, sagt StyleURLs,

54
00:04:07,565 --> 00:04:14,450
die, wie Sie hier bemerken, der Datei app.component.scss zugewiesen ist.

55
00:04:14,450 --> 00:04:19,130
Diese Datei sollte also den gesamten scss-Code enthalten, der für das

56
00:04:19,130 --> 00:04:24,310
CSS-Styling für unsere Komponenten-Vorlage verwendet werden kann.

57
00:04:24,310 --> 00:04:29,260
Dies ist also ein kurzer Besuch der Datei app.component.ts.

58
00:04:29,260 --> 00:04:33,365
Gehen wir nun zur Datei App.component.html,

59
00:04:33,365 --> 00:04:36,905
und werfen Sie einen kurzen Blick auf die Vorlage.

60
00:04:36,905 --> 00:04:40,480
Gehen Sie in die App.component.html Datei,

61
00:04:40,480 --> 00:04:43,635
sehen Sie, dass diese app.component-Datei,

62
00:04:43,635 --> 00:04:51,384
der HTML-Code hier enthält nur ein h1-Tag mit etwas hier mit einem doppelten Klammern.

63
00:04:51,384 --> 00:04:58,310
Nun, offensichtlich ist dies nicht etwas, das Sie aus Ihrem Wissen über HTML,

64
00:04:58,310 --> 00:05:01,755
CSS oder JavaScript, das Sie zuvor gesehen haben, gewohnt sind.

65
00:05:01,755 --> 00:05:04,325
Dies ist Angular-Syntax.

66
00:05:04,325 --> 00:05:07,055
Das nennen wir als Interpolation.

67
00:05:07,055 --> 00:05:12,350
Dies verwendet die unidirektionale Datenbindung des Angular.

68
00:05:12,350 --> 00:05:16,775
Ich werfe Ihnen in diesem Moment ein paar Begriffe zu.

69
00:05:16,775 --> 00:05:20,690
Halten Sie diese Begriffe fest, werden wir zurückkommen, um diese Begriffe

70
00:05:20,690 --> 00:05:25,185
in den verbleibenden Lektionen dieses Kurses genauer zu betrachten.

71
00:05:25,185 --> 00:05:28,140
Das erste, was ich erwähnt habe, ist die Interpolation,

72
00:05:28,140 --> 00:05:33,290
die zweite, die ich erwähnte, ist eine unidirektionale Datenbindung.

73
00:05:33,680 --> 00:05:42,200
Außerdem sehen Sie sofort, dass dies die Variable ist, die Sie in der

74
00:05:42,200 --> 00:05:48,560
Begleitdatei TypeScript gesehen haben, die den TypeScript-Code definiert, der der App-Komponente entspricht.

75
00:05:48,560 --> 00:05:51,640
Also, sobald Sie hier etwas wie dieses angeben,

76
00:05:51,640 --> 00:05:58,970
besteht die Implikation darin, dass was auch immer der Wert für diesen Titel

77
00:05:58,970 --> 00:06:08,170
hier ersetzt wird und als innerer HTML-Code für dieses h1-Tag hier verwendet wird.

78
00:06:08,170 --> 00:06:11,600
Das ist der Zweck, das hier einzubeziehen.

79
00:06:11,600 --> 00:06:15,140
Wir werden nun einige der

80
00:06:15,140 --> 00:06:22,410
anderen Angular Relation Module installieren, die es uns ermöglichen, Vorlagen zu entwerfen.

81
00:06:22,410 --> 00:06:25,985
Dann kommen wir zurück zu dieser App.component.html Datei.

82
00:06:25,985 --> 00:06:31,375
Dann entwerfen Sie diese Vorlage ein wenig später in dieser Übung neu.

83
00:06:31,375 --> 00:06:38,330
Um uns dabei zu helfen, responsive Ansichten innerhalb unserer Angular-Anwendung

84
00:06:38,330 --> 00:06:40,340
zu entwerfen, werden wir die Hilfe von ein paar

85
00:06:40,340 --> 00:06:45,360
verwandten Modulen für Angular nehmen, die als Angular Material Modul bezeichnet werden.

86
00:06:45,360 --> 00:06:49,705
Das Angular Material Modul stellt uns eine Reihe von Komponenten zur Verfügung.

87
00:06:49,705 --> 00:06:53,795
Layout-Komponenten, die wir bei der Gestaltung

88
00:06:53,795 --> 00:06:59,595
unserer neuen Vorlagen für unsere Angular-Komponenten verwenden können.

89
00:06:59,595 --> 00:07:06,290
Das Angular Material Modul, wenn Sie dies vergleichen möchten, ist etwas wie das, was Bootstrap

90
00:07:06,290 --> 00:07:14,055
uns für die Gestaltung unserer Webseiten zur Verfügung gestellt hat, die wir im vorherigen Kurs untersucht haben.

91
00:07:14,055 --> 00:07:19,850
Außerdem werde ich ein anderes Modul verwenden, das als Angular Flex-Layout-Modul bezeichnet wird.

92
00:07:19,850 --> 00:07:26,195
Das Flex-Layout-Modul bietet Unterstützung für die Verwendung von

93
00:07:26,195 --> 00:07:33,440
CSS-Flex-Layout innerhalb unserer Angular-Vorlagen für unsere Angular-Komponenten.

94
00:07:33,440 --> 00:07:36,620
Nun, diese beiden Module müssen explizit

95
00:07:36,620 --> 00:07:40,195
installiert und dann in unsere Angular-Anwendung importiert werden,

96
00:07:40,195 --> 00:07:43,530
das ist, was wir im nächsten Schritt tun werden.

97
00:07:43,530 --> 00:07:45,645
Aber bevor wir vorwärts gehen,

98
00:07:45,645 --> 00:07:48,910
ist eine Frage, über die Sie sich vielleicht fragen,

99
00:07:48,910 --> 00:07:58,350
warum nicht Bootstrap für das Design der Vorlagen für unsere Angular-Anwendung verwenden?

100
00:07:58,350 --> 00:08:05,220
In der Tat können Sie Bootstrap auch verwenden, um die Vorlagen für unsere Angular-Anwendung zu entwerfen.

101
00:08:05,220 --> 00:08:07,310
Sie können jedoch nur

102
00:08:07,310 --> 00:08:12,850
den CSS-Komponentententeil von Bootstrap innerhalb Ihrer Angular-Anwendung verwenden.

103
00:08:12,850 --> 00:08:16,800
Die jQuery-basierten Komponenten.

104
00:08:16,800 --> 00:08:21,709
Die JavaScript-Komponenten können nicht explizit verwendet werden, es könnten einige Konflikte

105
00:08:21,709 --> 00:08:27,870
zwischen den jQuery-basierten Komponenten von Bootstrap und dem Angular-Code selbst geben.

106
00:08:27,870 --> 00:08:33,800
Daher ist es am besten, die JavaScript-Komponenten von Bootstrap

107
00:08:33,800 --> 00:08:40,925
zu verwenden, falls Sie Bootstrap als Weg zum Entwerfen Ihrer Angular-Vorlagen verwenden.

108
00:08:40,925 --> 00:08:42,980
Aber auf der anderen Seite

109
00:08:42,980 --> 00:08:47,000
dachte ich auch, dass dies uns eine gute Gelegenheit bieten würde, zu lernen, ein

110
00:08:47,000 --> 00:08:54,350
anderes UI-Layout-Framework zu bekommen, das das Angular Material Framework ist.

111
00:08:54,350 --> 00:08:58,640
Das ist der Grund, warum ich in diesem

112
00:08:58,640 --> 00:09:03,745
speziellen Kurs das Angular-Materialframework und das Angular-Flex-Layout verwendet habe.

113
00:09:03,745 --> 00:09:07,540
Nun, während wir den Rest dieses Kurses durchlaufen,

114
00:09:07,540 --> 00:09:10,450
werde ich nicht explizit erklären, wie

115
00:09:10,450 --> 00:09:14,980
die Winkelmaterial-Komponenten verwendet werden oder wie man das Winkel-Flex-Layout verwendet.

116
00:09:14,980 --> 00:09:20,615
Stattdessen werden wir sie lernen, indem wir uns Beispiele ansehen.

117
00:09:20,615 --> 00:09:22,620
Wir werden diese beiden,

118
00:09:22,620 --> 00:09:29,135
sowohl die besten Angular Material Komponenten als auch die Angular Flex-Layout-Unterstützung, verwenden,

119
00:09:29,135 --> 00:09:36,715
wenn wir unsere Vorlagen für unsere Winkelkomponenten in diesem speziellen Kurs entwerfen.

120
00:09:36,715 --> 00:09:41,495
Also, durch den Prozess der Verwendung dieser Komponenten,

121
00:09:41,495 --> 00:09:44,025
werden Sie auch auf dem Weg,

122
00:09:44,025 --> 00:09:47,650
lernen, wie Sie sowohl Winkelmaterial als auch

123
00:09:47,650 --> 00:09:51,495
Winkel-Flex-Layout in Ihrer Winkel-Anwendung verwenden.

124
00:09:51,495 --> 00:09:54,685
Ich dachte, wenn Sie die Übungen machen,

125
00:09:54,685 --> 00:09:57,060
würden Sie viel mehr über Winkelmaterial lernen.

126
00:09:57,060 --> 00:10:01,505
Um nun die konzeptionellen Aspekte zu erklären, warum

127
00:10:01,505 --> 00:10:07,440
Angular Material Komponenten so funktionieren, wie sie funktionieren oder wie Grid funktioniert

128
00:10:07,440 --> 00:10:09,915
oder wie ein responsive Design funktioniert,

129
00:10:09,915 --> 00:10:14,150
haben wir bereits einige davon im vorherigen Kurs auf Bootstrap untersucht.

130
00:10:14,150 --> 00:10:17,935
So werden uns auch die gleichen Konzepte helfen.

131
00:10:17,935 --> 00:10:23,260
Stattdessen werden wir uns die Mechanik der Verwendung von Winkelmaterial und

132
00:10:23,260 --> 00:10:30,385
Winkel-Flex-Layout innerhalb unserer Winkel-Anwendung in diesem speziellen Kurs ansehen.

133
00:10:30,385 --> 00:10:33,005
Um mit einem Winkelmaterial zu beginnen, müssen Sie

134
00:10:33,005 --> 00:10:37,655
natürlich das erste, was Sie tun müssen, das Winkelmaterial-Modul installieren. Geben

135
00:10:37,655 --> 00:10:46,230
Sie also an der Eingabeaufforderung npm install —save @angular /material ein.

136
00:10:48,950 --> 00:10:51,240
Also, wie Sie sehen können,

137
00:10:51,240 --> 00:10:55,390
geben wir alle Angular Relation Module mit dem @angular an,

138
00:10:55,390 --> 00:10:58,650
so dass Sie auch das Gleiche für das Flex-Layout sehen werden.

139
00:10:58,650 --> 00:11:03,980
Wir installieren die Version 6.4.7 des Angular Material Moduls.

140
00:11:03,980 --> 00:11:09,440
Darüber hinaus erfordert das Materialmodul die Installation von CDK.

141
00:11:09,440 --> 00:11:12,730
Also, wir werden das auch installieren, indem wir

142
00:11:12,730 --> 00:11:21,100
npm install @angular /cdk @6 .4.7 —save tun

143
00:11:21,100 --> 00:11:25,035
und das zusammen mit Angular Material installieren.

144
00:11:25,035 --> 00:11:31,495
Also, Angular Material nutzt die Angular cdk für seine Komponenten.

145
00:11:31,495 --> 00:11:35,595
Wenn Sie Angular Material verwenden,

146
00:11:35,595 --> 00:11:43,035
müssen Sie außerdem das Angular Animations Modul in Ihre Angular-Anwendung importieren.

147
00:11:43,035 --> 00:11:46,445
Beginnend mit der Angular Version vier

148
00:11:46,445 --> 00:11:49,740
wurde die Angular Animationsunterstützung

149
00:11:49,740 --> 00:11:53,695
aus den Kernmodulen in ein eigenes separates Modul extrahiert.

150
00:11:53,695 --> 00:11:56,130
Wenn Sie also

151
00:11:56,130 --> 00:11:58,900
Animationen in Ihrer Angular-Anwendung verwenden müssen,

152
00:11:58,900 --> 00:12:04,370
müssen Sie das Angular Animations Modul explizit installieren.

153
00:12:04,370 --> 00:12:07,275
Also, lasst uns weitermachen und das auch installieren.

154
00:12:07,275 --> 00:12:08,325
Sie werden also sagen,

155
00:12:08,325 --> 00:12:18,940
npm install —save @angular /animations @6 .1.7.

156
00:12:20,040 --> 00:12:23,290
Ein anderes Modul, das ich

157
00:12:23,290 --> 00:12:33,130
zusammen installieren werde, heißt HammerJS.

158
00:12:33,130 --> 00:12:36,940
Das HammerJS-Modul wird von Angular verwendet,

159
00:12:36,940 --> 00:12:40,700
um einige Gesten innerhalb Ihrer Angular-Anwendung zu unterstützen.

160
00:12:40,700 --> 00:12:45,750
Also, das ist der Grund, warum wir HammerJS auch in unserer Anwendung installieren,

161
00:12:45,750 --> 00:12:51,830
und die aktuelle Version von HammerJS, die wir verwenden, ist 2.0.8.

162
00:12:51,830 --> 00:12:56,050
Nun haben wir jetzt alles installiert, was wir brauchen,

163
00:12:56,050 --> 00:13:01,185
damit das Winkelmaterialmodul innerhalb unserer Angular Anwendung verwendet werden kann.

164
00:13:01,185 --> 00:13:04,605
Als nächstes werde ich fortfahren, um

165
00:13:04,605 --> 00:13:09,415
das Angular Flex-Layout in meiner Angular-Anwendung zu installieren.

166
00:13:09,415 --> 00:13:11,460
Also, um das zu tun, poppe ich die Eingabeaufforderung

167
00:13:11,460 --> 00:13:19,000
npm install —save @angular/flex-layout

168
00:13:19,000 --> 00:13:22,970
und wir installieren die neueste Version davon.

169
00:13:24,760 --> 00:13:31,720
Nun, da wir alle Teile, die wir für unsere Angular-Anwendung benötigen, installiert haben,

170
00:13:31,720 --> 00:13:36,290
lassen Sie uns fortfahren und dann unsere Angular-Anwendung konfigurieren, um

171
00:13:36,290 --> 00:13:41,025
diese neuen Module zu nutzen, die wir in unserer Angular-Anwendung installiert haben.

172
00:13:41,025 --> 00:13:46,205
Das erste, was wir tun werden, ist zu index.HTML Datei gehen,

173
00:13:46,205 --> 00:13:51,975
und dann werden wir die Datei index.HTML konfigurieren, um die Winkelmaterial-Symbole zu verwenden.

174
00:13:51,975 --> 00:13:55,800
Also, um die Winkelmaterial-Symbole einzuschließen, so dass sie

175
00:13:55,800 --> 00:13:59,580
in den Vorlagen Ihrer Angular-Anwendung verwendet werden können, also

176
00:13:59,580 --> 00:14:04,020
lassen Sie mich direkt dort in den Kopf von index.HTML gehen,

177
00:14:04,020 --> 00:14:11,905
und erstellen Sie dann einen neuen Link mit

178
00:14:11,905 --> 00:14:47,075
href=“ https://fonts.googleapis.com/icon?family=Material+Icons "und das ist ein Stil Blatt.

179
00:14:47,075 --> 00:14:52,110
Damit kann ich nun die Winkelmaterial-Symbole in

180
00:14:52,110 --> 00:14:58,865
meiner Angular-Anwendung überall dort verwenden, wo ich dies innerhalb der Vorlagen tue.

181
00:14:58,865 --> 00:15:04,530
Der nächste Schritt besteht darin, zur App module.ts zu gehen und

182
00:15:04,530 --> 00:15:09,825
dann die drei Module zu importieren, die wir gerade installiert haben.

183
00:15:09,825 --> 00:15:14,345
Also, das erste, das ich importieren werde, wird als

184
00:15:14,345 --> 00:15:29,460
BrowserAnimationsModule aufgerufen, das ich aus

185
00:15:38,170 --> 00:15:47,230
@angular /platform-browser/animationen importieren werde. Also, jetzt ist

186
00:15:47,230 --> 00:15:54,115
das nächste, das ich importieren werde, das MaterialToolbarModule.

187
00:15:54,115 --> 00:16:00,370
Dies importiert also das @angular /material/toolbar-Modul

188
00:16:00,370 --> 00:16:06,100
, das innerhalb unserer Angular-Anwendungsvorlagen verwendet werden kann.

189
00:16:06,100 --> 00:16:14,305
Also, Angular Material, und importieren Sie auch

190
00:16:14,305 --> 00:16:26,720
das FlexLayoutModule aus @angular /flex-layout.

191
00:16:27,470 --> 00:16:34,050
Also, sobald wir alle diese Module importiert haben, dann ist eine zusätzliche Änderung, die ich

192
00:16:34,050 --> 00:16:40,035
tun muss, - oh lassen Sie mich auch Hammer.JS importieren, während ich genau dort bin.

193
00:16:40,035 --> 00:16:43,100
Also, lassen Sie mich

194
00:16:45,260 --> 00:16:51,585
Hammer.JS in meine Anwendung importieren.

195
00:16:51,585 --> 00:16:53,830
Und sobald ich dabei bin,

196
00:16:53,830 --> 00:16:58,400
ist die andere Änderung, die ich tun muss, auch

197
00:16:58,400 --> 00:17:04,165
diese Module in die Eingänge des NG-Modul-Dekorators hier aufzunehmen.

198
00:17:04,165 --> 00:17:06,845
Also, ich gehe dorthin und sage Browsermodul,

199
00:17:06,845 --> 00:17:13,440
Browseranimationsmodul und dann nach dem HTTP-Modul

200
00:17:13,440 --> 00:17:21,009
werde ich das Material-Symbolar-Modul und auch das

201
00:17:21,009 --> 00:17:29,350
Flex-Layout-Modul als Teil der Eingaben innerhalb des NG-Moduls Dekorator für mein App-Modul importieren.

202
00:17:29,350 --> 00:17:36,215
Damit sind alle meine Konfigurationen, um das Material-Symbolar-Modul und

203
00:17:36,215 --> 00:17:38,975
das Winkel-Flex-Layout-Modul zu verwenden und zusammen mit

204
00:17:38,975 --> 00:17:44,680
dem Animationsmodul in eckig abgeschlossen.

205
00:17:44,680 --> 00:17:50,270
Nun gehen wir in die Komponentenvorlage ein und nutzen

206
00:17:50,270 --> 00:17:54,570
unsere erste Winkelmaterialkomponente bei der Gestaltung des Layouts

207
00:17:54,570 --> 00:18:00,110
für unsere App-Komponente.

208
00:18:00,750 --> 00:18:06,020
Wenn ich zur App-Komponenten-Vorlagendatei

209
00:18:06,020 --> 00:18:09,460
gehe, werde ich dies jetzt durch

210
00:18:09,460 --> 00:18:17,895
eine eckige Materialkomponente ersetzen, die

211
00:18:17,895 --> 00:18:21,480
als mat-Symbolleiste bezeichnet wird.

212
00:18:21,480 --> 00:18:24,645
Die Mat-Symbolleiste ermöglicht es mir,

213
00:18:24,645 --> 00:18:29,410
eine Symbolleiste zu entwerfen, die ich in meiner Winkelanwendung verwenden kann.

214
00:18:29,410 --> 00:18:35,805
Symbolleiste, die in der Regel oben auf der Seite in Ihrer Anwendung angezeigt wird.

215
00:18:35,805 --> 00:18:41,395
Also, für diese Symbolleiste werde ich die Farbe als primär angeben.

216
00:18:41,395 --> 00:18:44,145
Wir werden sehen, was das bedeutet, in kurzer Zeit.

217
00:18:44,145 --> 00:18:50,245
Und auch wir werden diese MD-Symbolleiste hier schließen.

218
00:18:50,245 --> 00:18:56,230
Jetzt in diesem werde ich eine Spanne mit

219
00:18:56,230 --> 00:19:05,790
dem Namen meines Restaurants verwenden, für das ich diese Website entwerfe.

220
00:19:05,790 --> 00:19:08,150
Also, Ristorante Con Fusion.

221
00:19:08,150 --> 00:19:12,650
Jetzt sehen Sie, warum ich diesen Ordner als „Verwirrung“ bezeichnet habe.

222
00:19:12,650 --> 00:19:19,765
Also, was ist das Update, das wir tun müssen, um die App-Komponente HTML-Datei.

223
00:19:19,765 --> 00:19:29,315
Während wir dabei sind, werden wir auch ein paar SCSS Updates für meine Styles.scss Datei enthalten.

224
00:19:29,315 --> 00:19:32,470
Also, wenn Sie hier in Ihren Code gehen,

225
00:19:32,470 --> 00:19:37,000
finden Sie diese Styles.scss-Datei hier.

226
00:19:37,000 --> 00:19:40,450
Hier können Sie also alle globalen Stile in

227
00:19:40,450 --> 00:19:44,810
diese Datei aufnehmen, und dies wird für alle Komponenten verfügbar sein, die verwendet werden sollen.

228
00:19:44,810 --> 00:19:51,970
Jede Komponente verfügt über eigene SCSS-Dateien, in denen Sie

229
00:19:51,970 --> 00:19:54,620
Anpassungen auf Komponentenebene oder

230
00:19:54,620 --> 00:20:00,280
SCSS-Code auf Komponentenebene für die Verwendung in dieser bestimmten Komponente einschließen können.

231
00:20:00,280 --> 00:20:03,090
Wir werden beide Ansätze innerhalb

232
00:20:03,090 --> 00:20:07,980
dieser Winkelanwendung verwenden, die wir in diesem Kurs entwickeln.

233
00:20:07,980 --> 00:20:13,530
Aber im Moment werde ich die Haupt

234
00:20:13,530 --> 00:20:20,270
Styles.scss-Datei mit etwas Code aktualisieren, der für meine ganze eckige Anwendung nützlich sein wird.

235
00:20:20,270 --> 00:20:22,185
Das erste, was ich tun werde,

236
00:20:22,185 --> 00:20:28,160
ist, ein vorgebautes Thema zu importieren, das über eckiges Material verfügbar ist.

237
00:20:28,160 --> 00:20:33,380
Dieses vorgefertigte Thema in eckigem Material bietet uns eine Möglichkeit,

238
00:20:33,380 --> 00:20:36,000
bestimmte Farben zu spezifizieren und die Art und Weise, wie einige Dinge

239
00:20:36,000 --> 00:20:39,265
in meinen eckigen Materialkomponenten angeordnet sind.

240
00:20:39,265 --> 00:20:44,800
Die Farben, die durch den vorgefertigten Rahmen unsere Primärfarbe,

241
00:20:44,800 --> 00:20:49,050
die Akzentfarbe und die Warnfarbe verfügbar sein wird.

242
00:20:49,050 --> 00:20:53,000
Jetzt wird das spezifische Thema, das ich verwenden werde, Deep Purple genannt.

243
00:20:53,000 --> 00:20:56,870
Also, in diesem Fall wird die Primärfarbe tief Purple sein.

244
00:20:56,870 --> 00:21:01,860
Die Akzentfarbe ist bernsteinfarben und die Warnfarbe wird in diesem Fall rot sein.

245
00:21:01,860 --> 00:21:07,880
Jetzt können Sie Ihre eigenen eckigen Materialthemen erstellen, die

246
00:21:07,880 --> 00:21:10,970
Sie in Ihrer Anwendung verwenden können, aber ich werde

247
00:21:10,970 --> 00:21:14,385
das als eine Übung für Sie selbst überlassen.

248
00:21:14,385 --> 00:21:17,930
Im Moment werde ich in meiner eckigen Anwendung eines

249
00:21:17,930 --> 00:21:21,510
der vorgefertigten Dinge verwenden, die tief lila Bernstein genannt werden.

250
00:21:21,510 --> 00:21:25,575
Also, um das in die Styles.scss-Datei zu gehen,

251
00:21:25,575 --> 00:21:28,870
werde ich

252
00:21:32,190 --> 00:21:38,080
eckiges Material

253
00:21:38,080 --> 00:21:48,640
vorgefertigte Themen tief lila amber.CSS importieren.

254
00:21:48,640 --> 00:21:54,015
Also, dieses eine vorgefertigte Thema werde ich innerhalb meiner eckigen Anwendung verwenden.

255
00:21:54,015 --> 00:21:58,335
Sie werden ziemlich bald sehen, wie dieses vorgefertigte Thema in

256
00:21:58,335 --> 00:22:03,060
der Winkelanwendung in den Vorlagen funktioniert, die wir für unsere Winkelanwendung entwickelt haben.

257
00:22:03,060 --> 00:22:08,360
Darüber hinaus werde ich einige Eigenschaften für

258
00:22:08,360 --> 00:22:16,530
meinen Körper der Seite index.HTML konfigurieren, so dass ich das Padding als Null,

259
00:22:16,530 --> 00:22:23,230
Marge als Null angeben werde, und dann

260
00:22:23,230 --> 00:22:30,360
ist die Schriftfamilie, die ich verwenden werde, rubato oder sans serif in meiner Anwendung.

261
00:22:30,360 --> 00:22:34,320
Sie können wählen, was Sie wollen in Ihren Winkelanwendungen verwenden.

262
00:22:34,320 --> 00:22:38,095
Ich habe mich dafür entschieden, diese beiden in meiner Winkelanwendung zu verwenden.

263
00:22:38,095 --> 00:22:40,130
Speichern wir die Änderungen,

264
00:22:40,130 --> 00:22:46,495
und lassen Sie uns gehen und werfen einen kurzen Blick auf unsere eckige Anwendung im Browser.

265
00:22:46,495 --> 00:22:48,040
Bevor Sie dies tun,

266
00:22:48,040 --> 00:22:53,080
stellen Sie sicher, dass Ihr NG serve in

267
00:22:53,080 --> 00:22:58,940
einem der Terminalfenster Ihres Computers ausgeführt wird.

268
00:22:58,940 --> 00:23:04,870
Der Entwicklungsserver sollte kontinuierlich ausgeführt werden, damit er automatisch

269
00:23:04,870 --> 00:23:07,040
Dekompilierung durchführt und dann

270
00:23:07,040 --> 00:23:11,975
die aktualisierte Version der Winkelanwendung in das Browserfenster lädt. Wenn Sie

271
00:23:11,975 --> 00:23:14,290
zum Browser gehen,

272
00:23:14,290 --> 00:23:17,925
sehen Sie jetzt die Änderungen, die wir an

273
00:23:17,925 --> 00:23:24,090
der Winkelanwendung vorgenommen haben, spiegeln sich in der Ansicht in

274
00:23:24,090 --> 00:23:30,085
meinem Browser wider, so dass Sie sehen können, dass wir jetzt eine Symbolleiste an der Spitze mit den

275
00:23:30,085 --> 00:23:37,095
Formulierungen haben, die wir in der App-Komponenten-Vorlagendatei dort aufgenommen haben.

276
00:23:37,095 --> 00:23:41,290
Und Sie können die Farbe sehen, die auf die Symbolleiste angewendet wurde.

277
00:23:41,290 --> 00:23:42,580
Also die Farbe, Primärfarbe,

278
00:23:42,580 --> 00:23:46,180
also ist dies die tiefviolette Farbe, die auf die Symbolleiste angewendet wird.

279
00:23:46,180 --> 00:23:52,000
Nun wird das Thema, das wir definiert haben, entweder eine tiefe lila oder bernsteinfarbene Farbe hinzufügen,

280
00:23:52,000 --> 00:23:56,590
je nachdem, was von den spezifischen Winkelmaterialkomponenten verwendet wird

281
00:23:56,590 --> 00:24:01,750
, die wir in unseren Winkelapplikationsvorlagen verwenden.

282
00:24:01,750 --> 00:24:05,285
Damit schließen wir diese Übung ab.

283
00:24:05,285 --> 00:24:09,470
In dieser Übung haben wir unsere Winkelanwendung so konfiguriert, dass das

284
00:24:09,470 --> 00:24:13,880
Winkelmaterial und das Winkelflex-Layout verwendet werden.

285
00:24:13,880 --> 00:24:16,410
Wir haben auch

286
00:24:16,410 --> 00:24:22,150
unsere erste Winkelmaterialkomponente in der App-Komponenten-Vorlagendatei verwendet.

287
00:24:22,150 --> 00:24:29,605
Und wir haben das eingebaute Thema aus eckigem Material für unsere eckige Anwendung verwendet.

288
00:24:29,605 --> 00:24:34,530
Speichern Sie alle Änderungen und dann ist dies ein guter Zeitpunkt für Sie,

289
00:24:34,530 --> 00:24:39,880
ein Git-Commit mit der Nachricht zu machen, die angular konfiguriert.