1
00:00:03,920 --> 00:00:10,619
Bevor wir mit den restlichen Übungen und den Aufgaben in diesem Kurs vorangehen,

2
00:00:10,619 --> 00:00:13,245
dachte ich, dies wäre ein guter Zeitpunkt für mich,

3
00:00:13,245 --> 00:00:16,450
meiner Winkelanwendung eine schöne Struktur zu geben.

4
00:00:16,450 --> 00:00:19,660
Also, hier werde ich in der Kopf- und Fußzeile

5
00:00:19,660 --> 00:00:22,875
für meine eckige Anwendung hinzufügen, so dass die Art und Weise, wie

6
00:00:22,875 --> 00:00:29,635
die Benutzeroberfläche gerendert wird, viel attraktiver ist als das, was es bisher war.

7
00:00:29,635 --> 00:00:34,010
Also, lassen Sie uns sehen, wie wir mehrere Komponenten aufbauen können, um

8
00:00:34,010 --> 00:00:38,150
verschiedene Teile des Bildschirms innerhalb unserer Winkelanwendung zu besetzen.

9
00:00:38,150 --> 00:00:43,445
Also, hier werden Sie sehen, dass meine Winkelanwendung jetzt aus einem Header besteht

10
00:00:43,445 --> 00:00:46,830
, der eine separate Komponente ist, der Fußzeile

11
00:00:46,830 --> 00:00:48,400
, die eine andere Komponente ist

12
00:00:48,400 --> 00:00:50,145
, und dann zwischen

13
00:00:50,145 --> 00:00:54,860
den beiden, werde ich den Teil meiner Winkelanwendung haben,

14
00:00:54,860 --> 00:01:00,080
der später mit der Winkelfräser.

15
00:01:00,080 --> 00:01:06,740
Also, sehen Sie, ich richte die Bühne für das, was später in diesem Kurs kommen wird.

16
00:01:06,740 --> 00:01:08,840
Auf dem Weg

17
00:01:08,840 --> 00:01:14,195
werden wir auch Font Awesome Icons innerhalb unserer eckigen Anwendung verwenden.

18
00:01:14,195 --> 00:01:16,540
Ich mag nur die Font Awesome Icons,

19
00:01:16,540 --> 00:01:18,890
also dachte ich, dies wäre ein guter Ort, um

20
00:01:18,890 --> 00:01:23,005
diese Symbole in meine eckige Anwendung einzuführen.

21
00:01:23,005 --> 00:01:28,715
Um vorwärts fortzufahren, lassen Sie uns Schriftart awesome in unsere eckige Anwendung installieren.

22
00:01:28,715 --> 00:01:31,920
Also, um das zu tun, werde ich NPM verwenden, um zu gehen

23
00:01:31,920 --> 00:01:34,320
und font-awesome für mich holen,

24
00:01:34,320 --> 00:01:41,475
also installiere NPM font-awesome 4.7.0 und speichere.

25
00:01:41,475 --> 00:01:44,055
Dann lassen Sie font-awesome installiert werden.

26
00:01:44,055 --> 00:01:48,435
Also, sobald font-awesome in unsere eckige Anwendung gelangt

27
00:01:48,435 --> 00:01:50,570
und dann Teil der Knotenmodule wird, die

28
00:01:50,570 --> 00:01:53,055
in unserer Winkelanwendung enthalten sind, besteht

29
00:01:53,055 --> 00:01:58,465
der nächste Schritt darin, es für unsere Winkelanwendung verfügbar zu machen.

30
00:01:58,465 --> 00:02:03,355
Wir müssen font-awesome in unsere eckige Anwendung integrieren.

31
00:02:03,355 --> 00:02:04,710
Um dies zu tun,

32
00:02:04,710 --> 00:02:06,510
gehen Sie zum Quellordner,

33
00:02:06,510 --> 00:02:18,400
und erstellen Sie dann eine Datei mit dem Namen _Variables.scss im Quellordner.

34
00:02:18,400 --> 00:02:27,860
Fügen Sie in der Datei Variables.scss $ fa-font-path: hinzu und

35
00:02:27,860 --> 00:02:33,810
setzen Sie dann in Anführungszeichen.. /node_modules/font-awesome/fonts.

36
00:02:38,510 --> 00:02:45,080
Also, wir geben hier den Schriftartpfad für unsere Schriftart fantastische Dateien an.

37
00:02:45,330 --> 00:02:51,245
Öffnen Sie dann die Datei Styles.scss,

38
00:02:51,245 --> 00:02:53,995
und dann

39
00:02:53,995 --> 00:02:56,720
fügen wir in der Datei Styles.scss ein paar Zeilen hinzu.

40
00:02:56,720 --> 00:03:05,335
Zuerst werden wir die Variablen importieren, die wir gerade erklärt haben, indem wir @import sagen,

41
00:03:05,335 --> 00:03:08,550
und in Anführungszeichen Variablen,

42
00:03:08,550 --> 00:03:14,025
dann werden wir die font-awesome Dateien dort importieren,

43
00:03:14,025 --> 00:03:15,790
dann sagen wir

44
00:03:16,040 --> 00:03:30,020
@import.. /node_modules/font-awesome/scss/font-awesome. Wir importieren die

45
00:03:30,020 --> 00:03:36,540
SCSS Version davon, weil wir SCSS in unserer eckigen Anwendung verwenden.

46
00:03:36,670 --> 00:03:41,850
Sobald wir die Stile für die CSS-Datei geändert haben,

47
00:03:41,850 --> 00:03:43,680
speichern wir die Änderungen.

48
00:03:43,680 --> 00:03:46,580
An diesem Punkt müssen wir möglicherweise

49
00:03:46,580 --> 00:03:50,840
unseren Server neu starten, der unsere Winkelanwendung bereitete.

50
00:03:50,840 --> 00:03:53,590
Also, wo Sie den NG-Dienst eingegeben

51
00:03:53,590 --> 00:03:58,010
haben, möchten Sie möglicherweise den Server stoppen, der Ihre Winkelanwendung bereitstellt, und

52
00:03:58,010 --> 00:04:03,135
starten Sie ihn neu, so dass er diese neuen Änderungen enthält, die vorgenommen wurden.

53
00:04:03,135 --> 00:04:05,280
Also, wenn ich zu meinem Terminal

54
00:04:05,280 --> 00:04:09,110
gehe,

55
00:04:09,110 --> 00:04:15,095
werde ich meinen Server stoppen und dann den Server neu starten, damit er die Änderung berücksichtigt, die ich vorgenommen habe.

56
00:04:15,095 --> 00:04:18,530
Sie würden den aktuellen Zustand

57
00:04:18,530 --> 00:04:21,770
unserer Winkelanwendung sehen, indem Sie sie im Browser betrachten.

58
00:04:21,770 --> 00:04:25,040
Also, das ist, was wir in unserer Winkelanwendung haben.

59
00:04:25,040 --> 00:04:28,160
Ich möchte in der Lage sein,

60
00:04:28,160 --> 00:04:33,320
dieser Ansicht eine Kopf- und Fußzeile hinzuzufügen, damit ich sowohl die Kopf- und Fußzeile als auch

61
00:04:33,320 --> 00:04:36,680
dann den tatsächlichen Inhalt zwischen der Kopf- und der

62
00:04:36,680 --> 00:04:40,550
Fußzeile in der Art und Weise verwenden kann, wie ich meine Winkelanwendung konstruiere.

63
00:04:40,550 --> 00:04:41,690
Um dies zu tun,

64
00:04:41,690 --> 00:04:46,135
werde ich zwei neue Komponenten namens Kopf- und Fußzeile erstellen und

65
00:04:46,135 --> 00:04:51,510
ihnen erlauben, ihren Teil des Bildschirms zu verwalten, der ihnen zugewiesen ist.

66
00:04:51,510 --> 00:04:56,290
Gehen Sie zur Eingabeaufforderung, lassen Sie mich eine neue Header-Komponente generieren.

67
00:04:56,290 --> 00:04:58,950
Ich kann sogar sagen ng g,

68
00:04:58,950 --> 00:05:02,420
das ist genug, um eckige CLI zu

69
00:05:02,420 --> 00:05:06,190
erkennen, dass es eine Komponente generieren will.

70
00:05:06,190 --> 00:05:11,310
Also, ich sage ng g Komponenten-Header,

71
00:05:11,760 --> 00:05:17,370
und auch ng g Komponenten-Fußzeile.

72
00:05:17,370 --> 00:05:20,900
Also, jetzt habe ich zwei Komponenten, die für mich verfügbar sind

73
00:05:20,900 --> 00:05:25,030
, um in meiner Winkelanwendung zu verwenden.

74
00:05:25,030 --> 00:05:28,445
Wie werde ich diese beiden Komponenten nutzen?

75
00:05:28,445 --> 00:05:31,665
Gehen wir zur App component.html Datei,

76
00:05:31,665 --> 00:05:35,360
und nutzen Sie dann diese beiden Komponenten in der Art und Weise, wie wir

77
00:05:35,360 --> 00:05:40,340
den gesamten Bildschirm für unsere Winkelanwendung zusammenstellen.

78
00:05:40,340 --> 00:05:43,185
Zurück zu unserer Anwendung

79
00:05:43,185 --> 00:05:48,620
sehen wir, dass die app module.ts Datei

80
00:05:48,620 --> 00:05:51,680
bereits die Kopf- und Fußzeilenkomponente enthält

81
00:05:51,680 --> 00:05:54,965
und sie bereits in die Deklarationen hier aufgenommen wurden.

82
00:05:54,965 --> 00:05:58,075
Dies ist also der Vorteil der Verwendung der eckigen CLI,

83
00:05:58,075 --> 00:06:01,610
es kümmert sich um all diese Grundlagen für

84
00:06:01,610 --> 00:06:05,825
Sie, so dass Sie sich darauf konzentrieren können, nur Ihre Winkelanwendung zu erstellen.

85
00:06:05,825 --> 00:06:09,340
Also, das ist der Grund, warum ich die eckige CLI

86
00:06:09,340 --> 00:06:13,490
als Ansatz zum Erstellen meiner Winkelanwendung liebe.

87
00:06:13,490 --> 00:06:20,640
Also jetzt, lassen Sie uns auf die App-Komponenten HTML-Datei gehen.

88
00:06:20,640 --> 00:06:24,530
Also, hier sehen Sie, dass wir das App-Menü dort unten aufgenommen haben.

89
00:06:24,530 --> 00:06:29,430
Ich werde diese Symbolleiste aus meiner App-Komponenten-HTML-Datei entfernen.

90
00:06:29,430 --> 00:06:37,650
Diese Symbolleiste wird Teil der Header-Vorlage für meine Header-Komponente.

91
00:06:37,650 --> 00:06:45,500
Stattdessen

92
00:06:45,500 --> 00:06:54,310
enthält meine App-Komponenten-Vorlagendatei nur die Kopfzeile und die Fußzeile am unteren Rand.

93
00:06:56,450 --> 00:06:59,065
Sie sehen also, dass

94
00:06:59,065 --> 00:07:02,480
wir jetzt die Ansichten der drei Komponenten haben.

95
00:07:02,480 --> 00:07:04,370
Die Kopfzeile, das Menü

96
00:07:04,370 --> 00:07:07,160
und die Fußzeile, die den gesamten Bildschirm einnehmen.

97
00:07:07,160 --> 00:07:10,940
Also, diese drei Komponenten bekommen diesen Teil des Bildschirms für sich selbst.

98
00:07:10,940 --> 00:07:16,970
Lassen Sie uns die Änderungen speichern und werfen Sie einen kurzen Blick auf unsere Anwendung im Browser. Wenn Sie

99
00:07:16,970 --> 00:07:19,855
zur Anwendung im Browser gehen,

100
00:07:19,855 --> 00:07:22,895
sehen Sie jetzt, dass der Header bereits besetzt hat, es ist

101
00:07:22,895 --> 00:07:26,090
Teil des Bildschirms dort oben, und offensichtlich,

102
00:07:26,090 --> 00:07:28,400
da wir gerade die Komponente vorbereitet haben,

103
00:07:28,400 --> 00:07:30,245
sagt es nur Header funktioniert

104
00:07:30,245 --> 00:07:31,879
, und dann unten unten

105
00:07:31,879 --> 00:07:36,180
hat die Fußzeile auch ihren Platz in der -Bildschirmseite.

106
00:07:36,180 --> 00:07:41,630
Jetzt werden wir fortfahren und die Vorlagen sowohl für die Kopf- als auch für die Fußzeile aktualisieren

107
00:07:41,630 --> 00:07:47,625
, so dass wir unsere Benutzeroberfläche für unsere Winkelanwendung gut definieren können.

108
00:07:47,625 --> 00:07:50,735
Beginnen wir mit der Arbeit an unserer Fußzeile.

109
00:07:50,735 --> 00:07:53,180
Um mit der Fußzeile zu beginnen,

110
00:07:53,180 --> 00:07:55,780
gehen wir zur Vorlagendatei der Fußzeile,

111
00:07:55,780 --> 00:08:02,355
und dann werden wir dies durch die neu entworfene Vorlage der Fußzeile ersetzen.

112
00:08:02,355 --> 00:08:03,920
Nun, zu Ihrer Bequemlichkeit,

113
00:08:03,920 --> 00:08:07,030
habe ich den Code für Sie in der Anleitung zur Verfügung gestellt.

114
00:08:07,030 --> 00:08:10,690
Es ist ratsam, den gesamten Code von dort zu kopieren

115
00:08:10,690 --> 00:08:12,155
und ihn dann hier einzufügen.

116
00:08:12,155 --> 00:08:15,715
Überprüfen Sie dann, was diese Fußzeile tut.

117
00:08:15,715 --> 00:08:20,830
Hier sehen Sie, dass ich den Code für meine Fußzeilenvorlage eingefügt habe.

118
00:08:20,830 --> 00:08:24,130
Nun, ich werde ein wenig später zu diesem Code zurückkommen.

119
00:08:24,130 --> 00:08:28,045
Wenn Sie den vorherigen Kurs auf Bootstrap gemacht haben,

120
00:08:28,045 --> 00:08:33,580
würden Sie sehen, dass dies der eckige Materialweg ist, um

121
00:08:33,580 --> 00:08:40,185
die gleiche Art von Struktur für die Fußzeile zu implementieren, die wir im Bootstrap-Kurs gemacht haben.

122
00:08:40,185 --> 00:08:43,965
Einige dieser Dinge werden für Sie bereits erkennbar sein,

123
00:08:43,965 --> 00:08:48,260
aber lassen Sie mich das Update der Fußzeilenvorlage abschließen,

124
00:08:48,260 --> 00:08:57,085
und dann werden wir auch ein paar SCSS-Code in meine Footer Component.scss-Datei hinzufügen

125
00:08:57,085 --> 00:09:02,100
und dann einen Blick darauf werfen, wie die Fußzeile jetzt formt.

126
00:09:02,100 --> 00:09:05,675
Hier habe ich wieder den Code

127
00:09:05,675 --> 00:09:09,585
aus den Übungsanweisungen eingefügt, die diesem Video folgen,

128
00:09:09,585 --> 00:09:18,880
um die verschiedenen SCSS-Klassen zu zeigen, die ich in meiner Fußzeile hinzugefügt habe.

129
00:09:18,880 --> 00:09:23,320
Also, ich habe ein paar Klassen, die ich hier definiert habe,

130
00:09:23,320 --> 00:09:27,380
ich werde sie verwenden, um einen Teil meiner Fußzeile zu definieren,

131
00:09:27,380 --> 00:09:29,570
und dann ähnlich Fußzeilenklasse hier,

132
00:09:29,570 --> 00:09:32,765
und ich habe hier eine SCSS-Mischung

133
00:09:32,765 --> 00:09:37,165
und einige Variablen, die

134
00:09:37,165 --> 00:09:41,450
verschiedene Farben definieren, die ich in meiner Winkelanwendung verwenden werde.

135
00:09:41,450 --> 00:09:44,145
Lassen Sie uns also die Änderungen speichern, die wir vorgenommen haben.

136
00:09:44,145 --> 00:09:49,755
Werfen wir einen Blick auf die Fußzeile in seiner aktuellen Inkarnation,

137
00:09:49,755 --> 00:09:55,740
und dann kommen wir zurück und besuchen den Code, den ich sowohl

138
00:09:55,740 --> 00:10:02,345
in die Fußzeilenkomponenten-Vorlagendatei als auch den SCSS-Code hier aufgenommen habe.

139
00:10:02,345 --> 00:10:06,835
Gehen Sie zu unserer eckigen Anwendung im Browser, wallah,

140
00:10:06,835 --> 00:10:11,545
dort haben Sie die neue Fußzeile für unsere eckige Anwendung.

141
00:10:11,545 --> 00:10:14,295
Sie können also sehen, dass ich hier ein paar Dinge habe.

142
00:10:14,295 --> 00:10:19,840
Diese am linken Rand sind die verschiedenen Links

143
00:10:19,840 --> 00:10:25,975
zu verschiedenen Seiten, die Teil meiner Angular-Anwendung sein werden.

144
00:10:25,975 --> 00:10:30,620
Wir werden sehen, wie wir das im Rahmen der nächsten Übungen machen.

145
00:10:30,620 --> 00:10:35,110
Nun, hier benutze ich die Tastenkomponente, die

146
00:10:35,110 --> 00:10:39,795
Teil von Angular Material ist, um diese Links hier zu definieren,

147
00:10:39,795 --> 00:10:41,870
dann habe ich die Adresse hier,

148
00:10:41,870 --> 00:10:46,810
und dann benutze ich auch wieder Tasten, um diese Reihenfolge

149
00:10:46,810 --> 00:10:52,110
von Schaltflächen für die verschiedenen Social Media Links für mein Restaurant hier zu definieren.

150
00:10:52,110 --> 00:10:55,515
Sie können also sehen, dass ich all diese habe. Um

151
00:10:55,515 --> 00:10:57,470
diese zu erstellen, verwende ich

152
00:10:57,470 --> 00:11:01,820
hier die Angular Materialunterstützung für kleine schwebende Aktionstasten,

153
00:11:01,820 --> 00:11:05,155
und das gibt eine schöne Struktur dafür.

154
00:11:05,155 --> 00:11:07,860
Wenn Sie die Bootstrap-Version davon gesehen haben,

155
00:11:07,860 --> 00:11:14,205
gefällt mir das viel besser als die Bootstrap-Version, die ich im vorherigen Kurs erstellt habe.

156
00:11:14,205 --> 00:11:19,730
Also, unsere Fußzeile ist jetzt gut an Ort und Stelle.

157
00:11:19,730 --> 00:11:22,695
Schauen wir uns schnell einen Teil des Codes in der Fußzeile an.

158
00:11:22,695 --> 00:11:27,890
Nun, ich werde das nicht in einer ganzen Menge Detail erklären, weil es sich um

159
00:11:27,890 --> 00:11:33,665
mehr mit dem Angular Material als Angular selbst handelt,

160
00:11:33,665 --> 00:11:36,780
aber auf dem Weg, indem Sie nur die Struktur des Codes betrachten,

161
00:11:36,780 --> 00:11:39,045
werden Sie beginnen zu sehen, wie

162
00:11:39,045 --> 00:11:45,095
diese Winkelmaterial-Komponenten verwendet werden können, um etwas zu definieren wie diese. Wenn Sie

163
00:11:45,095 --> 00:11:47,060
zur Fußzeilenkomponente gehen,

164
00:11:47,060 --> 00:11:55,795
sehen Sie, dass ich hier ein äußeres div habe, für das ich

165
00:11:55,795 --> 00:11:59,280
hier einige eckige Layout, Flex-Layout-Attribute angegeben habe,

166
00:11:59,280 --> 00:12:01,895
also sage ich, dass FxLayout-Zeile

167
00:12:01,895 --> 00:12:06,075
und dann FxLayout sm und xs Spalte sein.

168
00:12:06,075 --> 00:12:10,160
Also, für kleine und extra kleine Bildschirmgrößen

169
00:12:10,160 --> 00:12:14,380
wird den gesamten Inhalt als Spalten zu positionieren,

170
00:12:14,380 --> 00:12:16,990
aber für die größeren Bildschirmgrößen

171
00:12:16,990 --> 00:12:18,300
wird es sie als Zeile positionieren.

172
00:12:18,300 --> 00:12:21,545
Also, das ist, was mir die schöne Struktur für meine Fußzeile gibt.

173
00:12:21,545 --> 00:12:24,790
Wie Sie im UI-Div sehen,

174
00:12:24,790 --> 00:12:28,810
positioniere ich das gesamte Content-Center-Center hier,

175
00:12:28,810 --> 00:12:31,495
und unten

176
00:12:31,495 --> 00:12:33,380
definiere ich das erste.

177
00:12:33,380 --> 00:12:40,415
Also, dieser mathematische Twist hier, den ich verwende, definiert meine Links hier.

178
00:12:40,415 --> 00:12:46,235
Also, in diesem verwende ich Matte als Winkel-Materialkomponente,

179
00:12:46,235 --> 00:12:49,425
und im Inneren verwende ich das A mit dem

180
00:12:49,425 --> 00:12:58,990
Mattenknopf-Komponenten-Attribut, das einem zugewiesen ist, um diese Schaltflächen hier zu erstellen.

181
00:12:58,990 --> 00:13:02,255
Später komme ich zurück und füge

182
00:13:02,255 --> 00:13:07,665
den eigentlichen Code für diese Links in den nachfolgenden Übungen hier hinzu.

183
00:13:07,665 --> 00:13:12,940
Dies hilft mir, die Liste der Links auf der linken Seite zu erstellen.

184
00:13:12,940 --> 00:13:14,920
Dies ist die Adresse, die Sie sehen,

185
00:13:14,920 --> 00:13:17,420
das ist ziemlich einfach zu betrachten.

186
00:13:17,420 --> 00:13:22,080
Also, das ist ein div, für das ich FxFlex mit 50 verwende,

187
00:13:22,080 --> 00:13:24,490
und das andere mit FxFlex mit 40.

188
00:13:24,490 --> 00:13:29,230
Also, 40 bedeutet 40 Prozent und 50 bedeutet 50 Prozent,

189
00:13:29,230 --> 00:13:33,150
und hier verwende ich FxFlex-Offset 20 Pixel.

190
00:13:33,150 --> 00:13:37,410
Es verschiebt diesen Inhalt also um 20 Pixel nach rechts.

191
00:13:37,410 --> 00:13:41,830
Also, ich habe einen 20-Pixel-Raum auf der linken Seite für

192
00:13:41,830 --> 00:13:47,660
dieses spezielle div, das diese Links hier enthält.

193
00:13:47,660 --> 00:13:49,400
Dann endlich unten hier,

194
00:13:49,400 --> 00:13:55,850
ich habe diese Reihe von Links, die ich verwende, um

195
00:13:55,850 --> 00:14:02,340
die Bar mit allen Social-Media-Links dort zu erstellen.

196
00:14:02,340 --> 00:14:06,330
Also, ich benutze eine mit dem Matten-Symbol-Button hier.

197
00:14:06,330 --> 00:14:14,850
Also, das ist es, was die abgerundeten Schaltflächen erstellt, die Sie in der Fußzeile sehen.

198
00:14:14,850 --> 00:14:16,150
Jetzt wende

199
00:14:16,150 --> 00:14:18,640
ich für jeden von diesen hier die entsprechende Klasse an.

200
00:14:18,640 --> 00:14:21,745
So können Sie feststellen, dass Schaltfläche Google Plus, Button Facebook,

201
00:14:21,745 --> 00:14:27,590
alle diese Klassen sind in meiner SCSS-Datei definiert,

202
00:14:27,590 --> 00:14:31,540
wo ich die Farben für den Hintergrund angegeben habe und so weiter dafür,

203
00:14:31,540 --> 00:14:38,025
so dass es dem typischen Farbschema entspricht, das diese Social-Media-Websites verwenden.

204
00:14:38,025 --> 00:14:43,380
Also, verbringen Sie ein wenig Zeit, um diesen Code hier zu betrachten,

205
00:14:43,380 --> 00:14:49,435
und dann werden Sie schnell ein Gefühl davon bekommen, wie die Fußzeile entworfen wurde.

206
00:14:49,435 --> 00:14:54,520
In ähnlicher Weise gehen Sie zu den Fußzeilenkomponenten Sass Code hier,

207
00:14:54,520 --> 00:14:57,460
so dass Sie sehen können, dass ich verschiedene Farben hier definiert habe.

208
00:14:57,460 --> 00:15:00,970
Ich benutze eine Mischung mit dem hier eingerichteten Rand,

209
00:15:00,970 --> 00:15:02,045
und dann für meine Fußzeile

210
00:15:02,045 --> 00:15:04,695
definiere ich die Hintergrundfarbe entsprechend,

211
00:15:04,695 --> 00:15:10,150
und merke die verschiedenen Klassen, die ich hier

212
00:15:10,150 --> 00:15:12,910
eine Schaltfläche Facebook definiere, für die die Farbe und

213
00:15:12,910 --> 00:15:15,910
die Hintergrundfarbe ich für jeden von ihnen definiert habe.

214
00:15:15,910 --> 00:15:18,300
Also, dass die entsprechende Farbe

215
00:15:18,300 --> 00:15:22,835
dieser Social-Media-Website wird als Hintergrundfarbe für jeden dieser verwendet.

216
00:15:22,835 --> 00:15:25,255
Nun, im Bootstrap-Kurs früher,

217
00:15:25,255 --> 00:15:31,200
hatte ich den Bootstrap Social benutzt, um dasselbe zu erreichen.

218
00:15:31,200 --> 00:15:34,920
Das funktioniert nicht sehr gut mit dem Angular-Material,

219
00:15:34,920 --> 00:15:41,170
deshalb habe ich hier gerade meine eigenen Sass-Brillen erstellt

220
00:15:41,170 --> 00:15:46,380
und dann den Code hinzugefügt, den ich brauche, um diese Schaltflächen dort zu erstellen.

221
00:15:46,380 --> 00:15:48,840
Wenn Sie weitere Schaltflächen hinzufügen müssen,

222
00:15:48,840 --> 00:15:51,490
erstellen Sie einfach mehr Klassen wie diese

223
00:15:51,490 --> 00:15:54,695
den Schaltflächen entsprechen, die Sie Ihrer Anwendung hinzufügen möchten.

224
00:15:54,695 --> 00:15:57,355
Das baut also unsere Fußzeile auf.

225
00:15:57,355 --> 00:16:01,995
Nun, der Header ist der nächste Teil, den wir anvisieren werden.

226
00:16:01,995 --> 00:16:04,770
Gehen Sie in den Header, öffnet die

227
00:16:04,770 --> 00:16:09,320
Header-Komponenten-Vorlagendatei und Sie sehen, was es enthält.

228
00:16:09,320 --> 00:16:11,565
Wir werden dies durch

229
00:16:11,565 --> 00:16:16,115
die Vorlage ersetzen, die ich für Sie in den Anweisungen gegeben habe, die hier folgen.

230
00:16:16,115 --> 00:16:19,495
Also, gehen Sie einfach voran und schneiden und fügen Sie diesen Code hier ein,

231
00:16:19,495 --> 00:16:22,730
denn dies hat nichts speziell mit eckig zu tun.

232
00:16:22,730 --> 00:16:26,620
Deshalb erlaube ich Ihnen nur, den Code direkt von dort auszuschneiden und einzufügen,

233
00:16:26,620 --> 00:16:29,060
spart uns etwas Zeit.

234
00:16:29,060 --> 00:16:35,300
Sie können sehen, dass ich jetzt die Header-Vorlage durch Code ersetzt habe.

235
00:16:35,300 --> 00:16:37,230
Ähnlich, während wir dabei sind,

236
00:16:37,230 --> 00:16:43,100
werden wir auch einige SCSS-Code für meine Header.components.scss-Datei hier hinzufügen,

237
00:16:43,100 --> 00:16:46,550
gehen Sie einfach und kopieren Sie den Code aus den Anweisungen.

238
00:16:46,550 --> 00:16:48,845
In ähnlicher Weise

239
00:16:48,845 --> 00:16:55,810
werden wir, während wir dabei sind, einige weitere SCSS-Klassen zu meiner Hauptdatei styles.scss hinzufügen.

240
00:16:55,810 --> 00:16:58,480
Also, in diese Haupt-styles.scss-Datei

241
00:16:58,480 --> 00:17:03,850
werde ich in Unterfarben und ein paar weitere Klassen hinzufügen.

242
00:17:03,850 --> 00:17:09,650
Also, lassen Sie uns den Code aus den Anweisungen einfügen, die ich Ihnen gegeben habe.

243
00:17:09,650 --> 00:17:14,425
Also, das Update auf die Styles.scss-Datei ist jetzt abgeschlossen,

244
00:17:14,425 --> 00:17:18,165
also habe ich hier einige Farben hinzugefügt und dort gemischt,

245
00:17:18,165 --> 00:17:23,230
und dann habe ich unten ein paar weitere Klassen hier hinzugefügt, die

246
00:17:23,230 --> 00:17:28,975
mir helfen, wenn ich meine Vorlagen für meine Winkelanwendung entwerfe.

247
00:17:28,975 --> 00:17:30,680
Also, all diese Änderungen,

248
00:17:30,680 --> 00:17:32,120
lassen Sie uns die Änderungen speichern,

249
00:17:32,120 --> 00:17:36,435
werfen Sie einen kurzen Blick darauf, wie mein Header jetzt in der Anwendung aussieht,

250
00:17:36,435 --> 00:17:41,735
und dann kommen wir zurück und besuchen schnell den Code, den wir gerade hier aufgenommen haben.

251
00:17:41,735 --> 00:17:45,775
Wenn Sie zu meiner Angular-Anwendung im Browser zurückkehren,

252
00:17:45,775 --> 00:17:51,820
sehen Sie jetzt die Symbolleiste wieder in der Kopfzeile hier erscheint,

253
00:17:51,820 --> 00:17:56,980
zusammen mit ein paar Links

254
00:17:56,980 --> 00:18:03,260
darin und dann ein Bild, das das Logo für mein Restaurant darstellt,

255
00:18:03,260 --> 00:18:12,095
und dann haben Sie hier etwas, das wir die Jumbotron-Datei im vorherigen Kurs verwenden.

256
00:18:12,095 --> 00:18:15,890
Ich werde nur eine Klasse namens Jumbotron verwenden, um dies

257
00:18:15,890 --> 00:18:20,015
auch in der Angular-Anwendung zu erstellen,

258
00:18:20,015 --> 00:18:24,545
also hier auf der linken Seite habe ich die Informationen meines Restaurants und

259
00:18:24,545 --> 00:18:30,280
das Logo des Restaurants und ließ mir hier etwas Platz für das Hinzufügen von etwas in der Zukunft.

260
00:18:30,280 --> 00:18:36,610
Also, hier sehen Sie, dass meine Anwendung jetzt Gestalt annimmt mit einem Header,

261
00:18:36,610 --> 00:18:38,745
mit einigen Links darin.

262
00:18:38,745 --> 00:18:41,070
Jetzt werden wir diese Links in

263
00:18:41,070 --> 00:18:46,145
den nächsten Übungen verwenden, um meine Angular-Anwendung einzurichten,

264
00:18:46,145 --> 00:18:52,220
und dann das Menü dazwischen und dann unten unten hier meine Fußzeile. Wenn Sie

265
00:18:52,220 --> 00:18:55,100
zu meiner Header-Komponenten-Vorlagendatei gehen,

266
00:18:55,100 --> 00:19:00,830
können Sie jetzt sehen, wie ich die Symbolleiste mit den zusätzlichen Schaltflächen hier erstellt habe.

267
00:19:00,830 --> 00:19:03,740
Sie erinnern sich also, dass wir die Symbolleiste

268
00:19:03,740 --> 00:19:08,035
bereits in der App-Komponenten-Vorlagendatei verwendet

269
00:19:08,035 --> 00:19:16,845
haben, ich habe sie von dort geschnitten und stattdessen die Symbolleiste in die Header-Vorlage hier verwendet.

270
00:19:16,845 --> 00:19:18,915
Nun, in dieser Symbolleiste,

271
00:19:18,915 --> 00:19:26,260
habe ich einige Links mit der Button-Klasse hinzugefügt, die darauf angewendet wird, und das

272
00:19:26,260 --> 00:19:34,745
ermöglicht es mir, diese Links in der Symbolleiste als Menü für meine Webanwendung zu erstellen.

273
00:19:34,745 --> 00:19:40,855
Unten habe ich ein div mit dem Klassencontainer und Jumbotron erstellt.

274
00:19:40,855 --> 00:19:46,650
Das ist der Grund, warum ich die Container- und Jumbotron-Klassen in meine SCSS-Datei hinzugefügt habe,

275
00:19:46,650 --> 00:19:50,480
damit ich sie in meinen Vorlagen hier verwenden kann.

276
00:19:50,480 --> 00:19:51,910
Also, für die

277
00:19:51,910 --> 00:20:01,025
ich wieder anwende und einige Flex-Layout-Attribute hier, um mir zu helfen, den Bildschirm dort zu entwerfen.

278
00:20:01,025 --> 00:20:06,500
Dann können Sie sehen, wie ich hier ein paar divs mit

279
00:20:06,500 --> 00:20:13,815
dem FxFlex-Attribut verwendet habe, um die Benutzeroberfläche

280
00:20:13,815 --> 00:20:16,385
für meine Anwendung hier zu erstellen.

281
00:20:16,385 --> 00:20:22,400
Also, verbringen Sie ein wenig Zeit hier, um einen kurzen Blick auf diesen Code hier zu werfen, um

282
00:20:22,400 --> 00:20:29,130
schnell zu verstehen, wie mein Layout für meine Header-Vorlage erstellt wurde.

283
00:20:29,130 --> 00:20:30,620
Es ist nicht so kompliziert,

284
00:20:30,620 --> 00:20:32,825
wenn Sie den Bootstrap-Kurs abgeschlossen haben,

285
00:20:32,825 --> 00:20:35,619
ist das nicht so schwer zu verstehen.

286
00:20:35,619 --> 00:20:39,520
Auf dem Weg lernt man auch das Winkelflex-Layout und dann

287
00:20:39,520 --> 00:20:44,105
auch die Winkelmaterialkomponenten hier. Wenn Sie

288
00:20:44,105 --> 00:20:48,619
zur SCSS-Datei für die Header-Komponente gehen,

289
00:20:48,619 --> 00:20:52,300
können Sie sehen, dass ich hier einige Farben hinzugefügt und dann einen Mix

290
00:20:52,300 --> 00:20:56,100
in und dann auch eine Jumbotron-Klasse hier hinzugefügt habe.

291
00:20:56,100 --> 00:20:58,275
Nun ist die Container-Klasse nicht hier,

292
00:20:58,275 --> 00:21:01,315
die Container-Klasse befindet sich in der Haupt-Style-Datei.

293
00:21:01,315 --> 00:21:03,600
Weil die Container-Klasse etwas ist, das ich

294
00:21:03,600 --> 00:21:06,010
für viele der Vorlagen dort verwenden werde.

295
00:21:06,010 --> 00:21:11,800
Deshalb habe ich die Container-Klasse der Styles.scss-Datei hinzugefügt

296
00:21:11,800 --> 00:21:18,020
, die die gemeinsame Datei für meine gesamte Winkelanwendung ist.

297
00:21:18,020 --> 00:21:21,375
Also, da habe ich hier einige zusätzliche Farben hinzugefügt,

298
00:21:21,375 --> 00:21:24,670
und auch ich habe hier eine Mischung erstellt

299
00:21:24,670 --> 00:21:26,759
und dann in den Container,

300
00:21:26,759 --> 00:21:29,980
die primären Hintergrund- und die Hintergrundakzentfarben hinzugefügt,

301
00:21:29,980 --> 00:21:33,640
und dann verwende ich auch eine andere Klasse namens Flexes Spacer,

302
00:21:33,640 --> 00:21:37,575
die ich in einem von die späteren Übungen.

303
00:21:37,575 --> 00:21:41,400
All diese Schritte sind in Vorbereitung auf das, was

304
00:21:41,400 --> 00:21:45,150
in den nächsten Übungen kommen wird.

305
00:21:45,150 --> 00:21:51,920
Meine Angular-Anwendung hat jetzt eine gute Form in Bezug auf die Art und Weise angenommen, wie die Benutzeroberfläche ausgelegt ist,

306
00:21:51,920 --> 00:21:58,155
so dass ich jetzt beginnen kann, viel mehr neue Funktionen für eckig einzuführen. Wenn Sie

307
00:21:58,155 --> 00:22:02,005
noch einen Besuch in meiner Angular-Anwendung im Browser tätigen,

308
00:22:02,005 --> 00:22:08,450
lassen Sie mich sehen, wie diese Anwendung in verschiedenen Bildschirmgrößen aussieht.

309
00:22:08,450 --> 00:22:11,430
Dies ist also die Standard-Desktop-Bildschirmgröße,

310
00:22:11,430 --> 00:22:17,020
also lassen Sie uns zu einer kleineren Bildschirmgröße wechseln und dann sehen, wie die Anwendung aussieht.

311
00:22:17,020 --> 00:22:21,690
Also, dies ist eine iPhone 6 Plus Bildschirmgröße,

312
00:22:21,690 --> 00:22:28,865
so dass Sie sehen können, wie das Layout für die kleinere Bildschirmgröße unterschiedlich ist.

313
00:22:28,865 --> 00:22:35,115
Also, meine Kopfzeile ist genau da oben und mein Menü unten und die Fußzeile hier,

314
00:22:35,115 --> 00:22:38,955
merke, wie die verschiedenen Teile der Fußzeile

315
00:22:38,955 --> 00:22:43,485
für die extra kleine Bildschirmgröße unterschiedlich angelegt wurden.

316
00:22:43,485 --> 00:22:49,950
Dies ist die gleiche Anwendung im Querformat oder ein iPhone 6 Plus,

317
00:22:49,950 --> 00:22:58,205
so dass Sie sehen können, dass mein Header so ausgelegt ist und das Menü dort und die Fußzeile.

318
00:22:58,205 --> 00:23:04,230
Das zeigt Ihnen also, dass ich das eckige Flex-Layout genutzt habe,

319
00:23:04,230 --> 00:23:10,510
um verschiedene Layouts für verschiedene Bildschirmgrößen erstellen zu können.

320
00:23:10,510 --> 00:23:14,395
Also, wieder, wenn Sie den Bootstrap-Kurs früher besucht haben,

321
00:23:14,395 --> 00:23:19,420
werden Sie beginnen zu sehen, wie das responsive Design mit

322
00:23:19,420 --> 00:23:25,950
dem eckigen Flex-Layout auch verwendet werden kann, um ähnliche Ergebnisse zu erzielen.

323
00:23:25,950 --> 00:23:29,790
Damit schließen wir diese Übung ab.

324
00:23:29,790 --> 00:23:35,140
In dieser Übung haben wir unsere Angular-Anwendung vorbereitet und

325
00:23:35,140 --> 00:23:40,645
für die restlichen Übungen in diesem Kurs vorbereitet.

326
00:23:40,645 --> 00:23:47,300
Dies ist auch ein guter Zeitpunkt für Sie, ein Git-Commit mit den Nachrichtenkopf- und -fußzeilen zu machen.