1
00:00:03,920 --> 00:00:10,619
Prima di andare avanti con il resto degli esercizi e gli incarichi in questo corso,

2
00:00:10,619 --> 00:00:13,245
ho pensato che questo sarebbe stato un buon momento per me per

3
00:00:13,245 --> 00:00:16,450
dare alla mia applicazione angolare una bella struttura.

4
00:00:16,450 --> 00:00:19,660
Quindi, questo è dove aggiungerò l'intestazione e il piè di pagina

5
00:00:19,660 --> 00:00:22,875
per la mia applicazione angolare in modo che il modo in cui

6
00:00:22,875 --> 00:00:29,635
l'interfaccia utente viene renderizzata sia molto più attraente di quello che è stato finora.

7
00:00:29,635 --> 00:00:34,010
Quindi, vediamo come possiamo costruire più componenti per

8
00:00:34,010 --> 00:00:38,150
occupare diverse parti dello schermo all'interno della nostra applicazione angolare.

9
00:00:38,150 --> 00:00:43,445
Quindi, qui, vedrai che la mia applicazione angolare ora consisterà in un'intestazione,

10
00:00:43,445 --> 00:00:46,830
che è un componente separato, il

11
00:00:46,830 --> 00:00:48,400
piè di pagina, che è un altro componente

12
00:00:48,400 --> 00:00:50,145
, e poi tra i due,

13
00:00:50,145 --> 00:00:54,860
avrò la parte della mia applicazione angolare che

14
00:00:54,860 --> 00:01:00,080
verrà controllata in seguito usando il router angolare.

15
00:01:00,080 --> 00:01:06,740
Quindi, vedi, sto preparando il palco per quello che verrà più avanti in questo corso.

16
00:01:06,740 --> 00:01:08,840
Quindi, lungo la strada,

17
00:01:08,840 --> 00:01:14,195
faremo anche uso di Font Awesome Icons all'interno della nostra applicazione angolare.

18
00:01:14,195 --> 00:01:16,540
Sono solo affezionato alle icone Font Awesome,

19
00:01:16,540 --> 00:01:18,890
quindi ho pensato che questo sarebbe stato un buon posto per

20
00:01:18,890 --> 00:01:23,005
introdurre queste icone nella mia applicazione angolare.

21
00:01:23,005 --> 00:01:28,715
Per procedere in avanti, cerchiamo di installare font impressionante nella nostra applicazione angolare.

22
00:01:28,715 --> 00:01:31,920
Quindi, per farlo, userò NPM per andare,

23
00:01:31,920 --> 00:01:34,320
e recuperare font-awesome per me,

24
00:01:34,320 --> 00:01:41,475
quindi NPM installa font-awesome 4.7.0 e salva.

25
00:01:41,475 --> 00:01:44,055
Quindi, lascia che sia installato font-awesome.

26
00:01:44,055 --> 00:01:48,435
Quindi, una volta che font-awesome entra nella nostra applicazione angolare,

27
00:01:48,435 --> 00:01:50,570
e poi diventa parte dei moduli nodo

28
00:01:50,570 --> 00:01:53,055
che sono inclusi nella nostra applicazione angolare,

29
00:01:53,055 --> 00:01:58,465
il passo successivo è quello di renderlo disponibile per la nostra applicazione angolare.

30
00:01:58,465 --> 00:02:03,355
Abbiamo bisogno di integrare font-awesome nella nostra applicazione angolare.

31
00:02:03,355 --> 00:02:04,710
Quindi, per farlo,

32
00:02:04,710 --> 00:02:06,510
vai alla cartella di origine

33
00:02:06,510 --> 00:02:14,280
e quindi crea un file denominato _Variables.scss nella cartella di origine.

34
00:02:14,280 --> 00:02:18,400
Nel file Variables.scss,

35
00:02:18,400 --> 00:02:27,860
aggiungi $ fa-font-path: e

36
00:02:27,860 --> 00:02:33,810
poi tra virgolette, metti.. /node_modules/font-awesome/fonts.

37
00:02:38,510 --> 00:02:45,080
Quindi, stiamo specificando il percorso del font per i nostri file fantastici font qui.

38
00:02:45,330 --> 00:02:51,245
Quindi, aprire il file Styles.scss

39
00:02:51,245 --> 00:02:53,995
e quindi nel file Styles.scss,

40
00:02:53,995 --> 00:02:56,720
aggiungeremo un paio di righe lì.

41
00:02:56,720 --> 00:03:05,335
In primo luogo, importeremo le variabili che abbiamo appena dichiarato dicendo @import,

42
00:03:05,335 --> 00:03:08,550
e tra virgolette variabili,

43
00:03:08,550 --> 00:03:14,025
quindi importeremo i file font-impressionante lì,

44
00:03:14,025 --> 00:03:15,790
poi diremo

45
00:03:16,040 --> 00:03:30,020
@import.. /node_modules/font-awesome/scss/font-awesome. Stiamo importando la

46
00:03:30,020 --> 00:03:36,540
versione SCSS di esso perché stiamo usando SCSS nella nostra applicazione angolare.

47
00:03:36,670 --> 00:03:41,850
Una volta che abbiamo modificato gli stili per il file CSS,

48
00:03:41,850 --> 00:03:43,680
salviamo le modifiche.

49
00:03:43,680 --> 00:03:46,580
A questo punto, potremmo aver bisogno di riavviare il

50
00:03:46,580 --> 00:03:50,840
nostro server che stava servendo la nostra applicazione angolare.

51
00:03:50,840 --> 00:03:53,590
Quindi, dove hai digitato il servizio NG,

52
00:03:53,590 --> 00:03:58,010
potresti voler interrompere il server che sta servendo la tua applicazione angolare e

53
00:03:58,010 --> 00:04:03,135
riavviarlo in modo che includa queste nuove modifiche che sono state apportate.

54
00:04:03,135 --> 00:04:05,280
Quindi, andando al mio terminale,

55
00:04:05,280 --> 00:04:09,110
interromperò il mio server

56
00:04:09,110 --> 00:04:15,095
e poi riavvierò il server in modo che tenga conto della modifica che ho apportato.

57
00:04:15,095 --> 00:04:18,530
Si vedrebbe lo stato attuale della

58
00:04:18,530 --> 00:04:21,770
nostra applicazione angolare guardandola nel browser.

59
00:04:21,770 --> 00:04:25,040
Quindi, questo è ciò che abbiamo nella nostra applicazione angolare.

60
00:04:25,040 --> 00:04:28,160
Voglio essere in grado di aggiungere un'intestazione e un piè di pagina a

61
00:04:28,160 --> 00:04:33,320
questa vista in modo da poter usare sia l'intestazione che il piè di pagina,

62
00:04:33,320 --> 00:04:36,680
e quindi il contenuto effettivo tra l'intestazione

63
00:04:36,680 --> 00:04:40,550
e il piè di pagina nel modo in cui costruisco la mia applicazione angolare.

64
00:04:40,550 --> 00:04:41,690
Quindi, per fare ciò,

65
00:04:41,690 --> 00:04:46,135
creerò due nuovi componenti chiamati intestazione e piè di pagina

66
00:04:46,135 --> 00:04:51,510
e lascerò che gestiscano la loro parte dello schermo che è allocata per loro.

67
00:04:51,510 --> 00:04:56,290
Andando al prompt, permettetemi di generare un nuovo componente di intestazione.

68
00:04:56,290 --> 00:04:58,950
Posso anche dire ng g,

69
00:04:58,950 --> 00:05:02,420
che è sufficiente per la CLI angolare per

70
00:05:02,420 --> 00:05:06,190
riconoscere che vuole generare un componente.

71
00:05:06,190 --> 00:05:11,310
Quindi, dico intestazione del componente ng g,

72
00:05:11,760 --> 00:05:17,370
e anche ng g footer componente.

73
00:05:17,370 --> 00:05:20,900
Quindi, ora, ho due componenti che sono disponibili per me

74
00:05:20,900 --> 00:05:25,030
da utilizzare all'interno della mia applicazione angolare.

75
00:05:25,030 --> 00:05:28,445
Come faccio a utilizzare questi due componenti?

76
00:05:28,445 --> 00:05:31,665
Andiamo al file component.html App,

77
00:05:31,665 --> 00:05:35,360
e quindi facciamo uso di questi due componenti nel modo in cui

78
00:05:35,360 --> 00:05:40,340
componiamo l'intero schermo per la nostra applicazione angolare.

79
00:05:40,340 --> 00:05:43,185
Tornando alla nostra applicazione,

80
00:05:43,185 --> 00:05:48,620
vediamo che il file dell'app module.ts

81
00:05:48,620 --> 00:05:51,680
include già l'intestazione e il componente piè di pagina

82
00:05:51,680 --> 00:05:54,965
e sono già stati inclusi nelle dichiarazioni qui.

83
00:05:54,965 --> 00:05:58,075
Quindi questo è il vantaggio di utilizzare la CLI angolare,

84
00:05:58,075 --> 00:06:01,610
si prende cura di tutte queste basi per

85
00:06:01,610 --> 00:06:05,825
te in modo da poterti concentrare sulla costruzione della tua applicazione angolare.

86
00:06:05,825 --> 00:06:09,340
Quindi, questo è il motivo per cui amo la CLI angolare

87
00:06:09,340 --> 00:06:13,490
come approccio per costruire la mia applicazione angolare.

88
00:06:13,490 --> 00:06:20,640
Quindi ora, andiamo al file HTML dei componenti dell'app.

89
00:06:20,640 --> 00:06:24,530
Quindi, qui, vedete che abbiamo incluso il menu app laggiù.

90
00:06:24,530 --> 00:06:29,430
Ho intenzione di rimuovere questa barra degli strumenti dal mio file HTML dei componenti dell'app.

91
00:06:29,430 --> 00:06:37,650
Quella barra degli strumenti diventerà parte del modello di intestazione per il mio componente intestazione.

92
00:06:37,650 --> 00:06:45,500
Quindi, invece, il mio

93
00:06:45,500 --> 00:06:54,310
file modello dei componenti dell'app conterrà solo l'intestazione e il piè di pagina nella parte inferiore.

94
00:06:56,450 --> 00:06:59,065
Quindi, vedete che ora,

95
00:06:59,065 --> 00:07:02,480
abbiamo il punto di vista dei tre componenti.

96
00:07:02,480 --> 00:07:04,370
L' intestazione, il menu

97
00:07:04,370 --> 00:07:07,160
e il piè di pagina che occupa l'intero schermo.

98
00:07:07,160 --> 00:07:10,940
Quindi, questi tre componenti ottengono quella parte dello schermo per se stessi.

99
00:07:10,940 --> 00:07:16,970
Salviamo le modifiche e diamo un'occhiata rapida alla nostra applicazione nel browser.

100
00:07:16,970 --> 00:07:19,855
Andando all'applicazione nel browser,

101
00:07:19,855 --> 00:07:22,895
ora vedi che l'intestazione ha già occupato fa

102
00:07:22,895 --> 00:07:26,090
parte dello schermo lassù, e ovviamente,

103
00:07:26,090 --> 00:07:28,400
dal momento che abbiamo appena preparato il componente,

104
00:07:28,400 --> 00:07:30,245
dice solo che l'intestazione funziona,

105
00:07:30,245 --> 00:07:31,879
e poi giù qui sotto,

106
00:07:31,879 --> 00:07:36,180
il piè di pagina ha anche preso il suo posto nel pagina dello schermo.

107
00:07:36,180 --> 00:07:41,630
Ora, andremo avanti e aggiornare i modelli sia per l'intestazione

108
00:07:41,630 --> 00:07:47,625
che per il piè di pagina in modo da poter definire bene la nostra interfaccia utente per la nostra applicazione angolare.

109
00:07:47,625 --> 00:07:50,735
Iniziamo il lavoro sul nostro piè di pagina.

110
00:07:50,735 --> 00:07:53,180
Quindi, per iniziare a piè di pagina,

111
00:07:53,180 --> 00:07:55,780
andiamo al file modello del piè di pagina,

112
00:07:55,780 --> 00:08:02,355
e poi stiamo andando a sostituire questo con il modello appena progettato del piè di pagina.

113
00:08:02,355 --> 00:08:03,920
Ora, per vostra comodità,

114
00:08:03,920 --> 00:08:07,030
vi ho fornito il codice nelle istruzioni.

115
00:08:07,030 --> 00:08:10,690
Sarà saggio copiare l'intero codice da lì

116
00:08:10,690 --> 00:08:12,155
e quindi incollarlo qui.

117
00:08:12,155 --> 00:08:15,715
Quindi, esaminare cosa fa questo piè di pagina.

118
00:08:15,715 --> 00:08:20,830
Quindi qui, vedi che ho incollato nel codice per il mio modello di piè di pagina.

119
00:08:20,830 --> 00:08:24,130
Ora, tornerò a questo codice un po 'più tardi.

120
00:08:24,130 --> 00:08:28,045
Se hai fatto il corso precedente su Bootstrap,

121
00:08:28,045 --> 00:08:33,580
vedrai che questo è il modo materiale angolare di implementare

122
00:08:33,580 --> 00:08:40,185
lo stesso tipo di struttura per il piè di pagina che abbiamo fatto nel corso Bootstrap.

123
00:08:40,185 --> 00:08:43,965
Alcune di queste cose saranno riconoscibili per te già,

124
00:08:43,965 --> 00:08:48,260
ma lasciami completare l'aggiornamento al modello di piè di pagina,

125
00:08:48,260 --> 00:08:57,085
e quindi anche aggiungeremo un po 'di codice SCSS nel mio piè di pagina component.scss file,

126
00:08:57,085 --> 00:09:02,100
e quindi dare un'occhiata a come il piè di pagina ora si forma.

127
00:09:02,100 --> 00:09:05,675
Quindi qui, ho nuovamente incollato nel codice

128
00:09:05,675 --> 00:09:09,585
dalle istruzioni di esercizio che seguono questo video,

129
00:09:09,585 --> 00:09:18,880
per mostrare le diverse classi SCSS che ho aggiunto nel mio piè di pagina.

130
00:09:18,880 --> 00:09:23,320
Quindi, ho alcune classi che ho definito qui,

131
00:09:23,320 --> 00:09:27,380
ho intenzione di farne uso per definire una parte del mio piè di pagina,

132
00:09:27,380 --> 00:09:29,570
e quindi similmente la classe piè di pagina qui,

133
00:09:29,570 --> 00:09:32,765
e ho un mix SCSS qui,

134
00:09:32,765 --> 00:09:37,165
e alcune variabili qui

135
00:09:37,165 --> 00:09:41,450
che definiscono vari colori che userò nella mia applicazione angolare.

136
00:09:41,450 --> 00:09:44,145
Quindi, salviamo le modifiche che abbiamo fatto.

137
00:09:44,145 --> 00:09:49,755
Diamo un'occhiata al piè di pagina nella sua attuale incarnazione,

138
00:09:49,755 --> 00:09:55,740
e poi torneremo e faremo una rapida visita al codice che ho incluso sia

139
00:09:55,740 --> 00:10:02,345
nel file modello dei componenti piè di pagina che nel codice SCSS qui.

140
00:10:02,345 --> 00:10:06,835
Andando alla nostra applicazione angolare nel browser, wallah,

141
00:10:06,835 --> 00:10:11,545
lì hai il nuovo piè di pagina per la nostra applicazione angolare.

142
00:10:11,545 --> 00:10:14,295
Quindi, potete vedere che ho un paio di cose qui.

143
00:10:14,295 --> 00:10:19,840
Questi sul bordo sinistro sono i vari link

144
00:10:19,840 --> 00:10:25,975
a varie pagine che faranno parte della mia applicazione Angular.

145
00:10:25,975 --> 00:10:30,620
Vedremo come facciamo, come parte dei prossimi esercizi.

146
00:10:30,620 --> 00:10:35,110
Ora, qui sto facendo uso del componente pulsante che

147
00:10:35,110 --> 00:10:39,795
fa parte del materiale angolare per definire questi collegamenti qui,

148
00:10:39,795 --> 00:10:41,870
quindi ho l'indirizzo qui,

149
00:10:41,870 --> 00:10:46,810
e poi uso di nuovo i pulsanti per definire questa sequenza

150
00:10:46,810 --> 00:10:52,110
di pulsanti per i vari collegamenti social media per il mio ristorante qui.

151
00:10:52,110 --> 00:10:55,515
Quindi, potete vedere che ho tutti questi.

152
00:10:55,515 --> 00:10:57,470
Per creare questi, uso

153
00:10:57,470 --> 00:11:01,820
il supporto materiale angolare per piccoli pulsanti di azione galleggiante qui,

154
00:11:01,820 --> 00:11:05,155
e questo dà una bella struttura per questo.

155
00:11:05,155 --> 00:11:07,860
Se hai visto la versione Bootstrap di questo,

156
00:11:07,860 --> 00:11:14,205
mi piace molto meglio della versione Bootstrap che ho creato nel corso precedente.

157
00:11:14,205 --> 00:11:19,730
Quindi, il nostro piè di pagina ora è ben al suo posto.

158
00:11:19,730 --> 00:11:22,695
Diamo un'occhiata rapidamente ad alcuni del codice nel piè di pagina.

159
00:11:22,695 --> 00:11:27,890
Ora, non lo spiegherò in un sacco di dettagli perché è quello di

160
00:11:27,890 --> 00:11:33,665
trattare più con il materiale angolare di Angular stesso,

161
00:11:33,665 --> 00:11:36,780
ma lungo la strada semplicemente guardando la struttura del codice,

162
00:11:36,780 --> 00:11:39,045
inizierai a vedere come

163
00:11:39,045 --> 00:11:45,095
questi componenti del materiale angolare possono essere usati per definire qualcosa Come questo.

164
00:11:45,095 --> 00:11:47,060
Andando al componente piè di pagina,

165
00:11:47,060 --> 00:11:55,795
vedi che ho un div esterno qui per il quale ho specificato alcuni layout angolare,

166
00:11:55,795 --> 00:11:59,280
attributi di layout flessibile qui,

167
00:11:59,280 --> 00:12:01,895
quindi dico che la riga FxLayout,

168
00:12:01,895 --> 00:12:06,075
e poi fxLayout sm e xs per essere colonna.

169
00:12:06,075 --> 00:12:10,160
Quindi, per le dimensioni dello schermo piccole ed extra piccole

170
00:12:10,160 --> 00:12:14,380
posizionerà tutto il contenuto come colonne,

171
00:12:14,380 --> 00:12:16,990
ma per le dimensioni dello schermo più grandi,

172
00:12:16,990 --> 00:12:18,300
li posizionerà come riga.

173
00:12:18,300 --> 00:12:21,545
Quindi, questo è ciò che mi dà la bella struttura per il mio piè di pagina.

174
00:12:21,545 --> 00:12:24,790
Come vedi nel div dell'interfaccia utente,

175
00:12:24,790 --> 00:12:28,810
sto posizionando tutto il centro del contenuto qui,

176
00:12:28,810 --> 00:12:31,495
e qui sotto,

177
00:12:31,495 --> 00:12:33,380
definisco il primo.

178
00:12:33,380 --> 00:12:40,415
Quindi, questa torsione matematica qui che sto usando definisce i miei collegamenti qui.

179
00:12:40,415 --> 00:12:46,235
Quindi, in questo sto usando mat come componente materiale angolare,

180
00:12:46,235 --> 00:12:49,425
e al suo interno sto usando la a con

181
00:12:49,425 --> 00:12:58,990
l'attributo componente del pulsante mat assegnato a a per creare questi pulsanti qui.

182
00:12:58,990 --> 00:13:02,255
Più tardi, tornerò e aggiungerò

183
00:13:02,255 --> 00:13:07,665
il codice effettivo per questo link negli esercizi successivi qui.

184
00:13:07,665 --> 00:13:12,940
Questo è ciò che mi aiuta a creare l'elenco dei collegamenti sul lato sinistro.

185
00:13:12,940 --> 00:13:14,920
Questo è l'indirizzo che vedete,

186
00:13:14,920 --> 00:13:17,420
questo è abbastanza semplice da guardare.

187
00:13:17,420 --> 00:13:22,080
Quindi, questo è un div per il quale sto usando FxFlex con 50,

188
00:13:22,080 --> 00:13:24,490
e l'altro con FxFlex con 40.

189
00:13:24,490 --> 00:13:29,230
Quindi, 40 significa 40 percento e 50 significa 50 percento,

190
00:13:29,230 --> 00:13:33,150
e qui sto usando FxFlex offset 20 pixel.

191
00:13:33,150 --> 00:13:37,410
Quindi, sposta questo contenuto a destra di 20 pixel.

192
00:13:37,410 --> 00:13:41,830
Quindi, ho uno spazio di 20 pixel lasciato sul lato sinistro per

193
00:13:41,830 --> 00:13:47,660
questo particolare div contenente questi collegamenti qui.

194
00:13:47,660 --> 00:13:49,400
Poi finalmente qui sotto,

195
00:13:49,400 --> 00:13:55,850
ho questo insieme di link che sto facendo uso per

196
00:13:55,850 --> 00:14:02,340
creare la barra con tutti i link dei social media lì.

197
00:14:02,340 --> 00:14:06,330
Quindi, sto usando un con il pulsante icona mat qui.

198
00:14:06,330 --> 00:14:14,850
Quindi, questo è ciò che crea i pulsanti arrotondati che vedi nel piè di pagina lì.

199
00:14:14,850 --> 00:14:16,150
Ora, per ciascuno di questi,

200
00:14:16,150 --> 00:14:18,640
sto applicando la classe corrispondente qui.

201
00:14:18,640 --> 00:14:21,745
Quindi, puoi notare che il pulsante Google Plus, pulsante Facebook,

202
00:14:21,745 --> 00:14:27,590
tutte queste classi sono definite nel mio file SCSS lì,

203
00:14:27,590 --> 00:14:31,540
dove ho specificato i colori per lo sfondo e così via per questo, in

204
00:14:31,540 --> 00:14:38,025
modo che corrisponda alla tipica combinazione di colori che questi siti di social media usano.

205
00:14:38,025 --> 00:14:43,380
Quindi, trascorri un po 'di tempo a guardare questo codice qui,

206
00:14:43,380 --> 00:14:49,435
e poi avrai rapidamente un'idea di come è stato progettato il piè di pagina.

207
00:14:49,435 --> 00:14:54,520
Allo stesso modo, andando ai componenti piè di pagina codice Sass qui,

208
00:14:54,520 --> 00:14:57,460
in modo da poter vedere che ho definito vari colori qui.

209
00:14:57,460 --> 00:15:00,970
Sto usando un mixaggio con il margine impostato qui,

210
00:15:00,970 --> 00:15:02,045
e poi per il mio piè di pagina,

211
00:15:02,045 --> 00:15:04,695
definisco il colore di sfondo in modo appropriato,

212
00:15:04,695 --> 00:15:10,150
e noto le varie classi che sto definendo qui

213
00:15:10,150 --> 00:15:12,910
un pulsante Facebook per il quale il colore e

214
00:15:12,910 --> 00:15:15,910
il colore di sfondo che ho definito per ognuno di essi.

215
00:15:15,910 --> 00:15:18,300
Quindi, che il colore corrispondente di

216
00:15:18,300 --> 00:15:22,835
quel sito di social media viene utilizzato come colore di sfondo per ciascuno di questi.

217
00:15:22,835 --> 00:15:25,255
Ora, nel corso Bootstrap precedente,

218
00:15:25,255 --> 00:15:31,200
avevo usato il Bootstrap Social per ottenere la stessa cosa.

219
00:15:31,200 --> 00:15:34,920
Questo non funziona molto bene con il materiale Angular,

220
00:15:34,920 --> 00:15:41,170
quindi è per questo che ho appena creato il mio set di occhiali Sass qui,

221
00:15:41,170 --> 00:15:46,380
e quindi aggiungere il codice che ho bisogno di creare quei pulsanti lì.

222
00:15:46,380 --> 00:15:48,840
Se è necessario aggiungere più pulsanti,

223
00:15:48,840 --> 00:15:51,490
basta creare più classi come queste corrispondenti

224
00:15:51,490 --> 00:15:54,695
ai pulsanti che si desidera aggiungere all'applicazione.

225
00:15:54,695 --> 00:15:57,355
Quindi, questo costruisce il nostro piè di pagina.

226
00:15:57,355 --> 00:16:01,995
Ora, l'intestazione è la prossima parte che stiamo andando a prendere di mira.

227
00:16:01,995 --> 00:16:04,770
Andando all'intestazione, si aprirà il

228
00:16:04,770 --> 00:16:09,320
file di modello dei componenti di intestazione e si vedrà cosa contiene.

229
00:16:09,320 --> 00:16:11,565
Stiamo andando a sostituire questo con

230
00:16:11,565 --> 00:16:16,115
il modello che ho dato per voi nelle istruzioni che seguono qui.

231
00:16:16,115 --> 00:16:19,495
Quindi, vai avanti e taglia e incolla quel codice qui,

232
00:16:19,495 --> 00:16:22,730
perché questo non ha nulla a che fare specificamente con angolare.

233
00:16:22,730 --> 00:16:26,620
Quindi, è per questo che ti sto solo permettendo di tagliare e incollare il codice direttamente da lì,

234
00:16:26,620 --> 00:16:29,060
risparmiando un po 'di tempo per noi.

235
00:16:29,060 --> 00:16:35,300
Puoi vedere che ora ho sostituito il modello di intestazioni con qualche codice qui.

236
00:16:35,300 --> 00:16:37,230
Allo stesso modo, mentre ci

237
00:16:37,230 --> 00:16:43,100
siamo, aggiungeremo anche un codice SCSS per il mio file Header.components.scss qui,

238
00:16:43,100 --> 00:16:46,550
basta andare e copiare il codice dalle istruzioni.

239
00:16:46,550 --> 00:16:48,845
Allo stesso modo, mentre ci

240
00:16:48,845 --> 00:16:55,810
siamo, aggiungeremo in alcune altre classi SCSS al mio file styles.scss principale.

241
00:16:55,810 --> 00:16:58,480
Quindi, in questo file styles.scss principale,

242
00:16:58,480 --> 00:17:03,850
aggiungerò sottocolori e un paio di altre classi in questo.

243
00:17:03,850 --> 00:17:09,650
Quindi, incolla il codice dalle istruzioni che ti ho dato.

244
00:17:09,650 --> 00:17:14,425
Quindi, l'aggiornamento al file Styles.scss è ora completo,

245
00:17:14,425 --> 00:17:18,165
quindi ho aggiunto alcuni colori qui e mescolato lì,

246
00:17:18,165 --> 00:17:23,230
e poi in fondo ho aggiunto alcune altre classi qui che

247
00:17:23,230 --> 00:17:28,975
mi aiutano quando sto progettando i miei modelli per la mia applicazione angolare.

248
00:17:28,975 --> 00:17:30,680
Quindi, tutte queste modifiche,

249
00:17:30,680 --> 00:17:32,120
salviamo le modifiche, diamo

250
00:17:32,120 --> 00:17:36,435
una rapida occhiata a come appare la mia intestazione ora nell'applicazione,

251
00:17:36,435 --> 00:17:41,735
e poi torneremo e rivisiteremo rapidamente il codice che abbiamo appena incluso qui.

252
00:17:41,735 --> 00:17:45,775
Tornando alla mia applicazione Angular nel browser,

253
00:17:45,775 --> 00:17:51,820
ora vedi la barra degli strumenti riappare nell'intestazione qui,

254
00:17:51,820 --> 00:17:56,980
insieme a alcuni collegamenti

255
00:17:56,980 --> 00:18:03,260
lì e poi un'immagine che rappresenta il logo per il mio ristorante

256
00:18:03,260 --> 00:18:12,095
, e poi qui, hai qualcosa che usiamo il file jumbotron nel corso precedente.

257
00:18:12,095 --> 00:18:15,890
Userò solo una classe chiamata jumbotron per creare questo

258
00:18:15,890 --> 00:18:20,015
anche nell'applicazione Angular,

259
00:18:20,015 --> 00:18:24,545
quindi qui sul lato sinistro ho le informazioni del mio ristorante e

260
00:18:24,545 --> 00:18:30,280
il logo del ristorante e mi sono lasciato un po 'di spazio qui per aggiungere qualcosa in futuro.

261
00:18:30,280 --> 00:18:36,610
Quindi, qui vedi la mia applicazione ora prendendo forma con un'intestazione,

262
00:18:36,610 --> 00:18:38,745
con alcuni collegamenti lì dentro.

263
00:18:38,745 --> 00:18:41,070
Ora, faremo uso di questi collegamenti nei

264
00:18:41,070 --> 00:18:46,145
prossimi esercizi per impostare la mia applicazione angolare,

265
00:18:46,145 --> 00:18:52,220
e poi il menu seduto in mezzo e poi giù qui sotto il mio piè di pagina.

266
00:18:52,220 --> 00:18:55,100
Andando al mio file modello di componenti di intestazione,

267
00:18:55,100 --> 00:19:00,830
ora puoi vedere come ho creato la barra degli strumenti con i pulsanti aggiuntivi qui.

268
00:19:00,830 --> 00:19:03,740
Quindi, ti ricordi che avevamo la barra degli strumenti

269
00:19:03,740 --> 00:19:08,035
già in uso nel file del modello dei componenti dell'app, l'

270
00:19:08,035 --> 00:19:16,845
ho tagliata da lì e invece uso la barra degli strumenti nel modello delle intestazioni qui.

271
00:19:16,845 --> 00:19:18,915
Ora, all'interno di questa barra degli strumenti,

272
00:19:18,915 --> 00:19:26,260
ho incluso alcuni collegamenti con la classe pulsante applicata ad esso e questo è ciò che

273
00:19:26,260 --> 00:19:34,745
mi permette di creare quei collegamenti nella barra degli strumenti come menu per la mia applicazione web.

274
00:19:34,745 --> 00:19:40,855
Qui sotto, ho creato un div con il contenitore di classe e jumbotron.

275
00:19:40,855 --> 00:19:46,650
Questo è il motivo per cui ho aggiunto le classi contenitore e jumbotron nel mio file SCSS, in

276
00:19:46,650 --> 00:19:50,480
modo che io possa farne uso all'interno dei miei modelli qui.

277
00:19:50,480 --> 00:19:51,910
Quindi, per il quale ancora una

278
00:19:51,910 --> 00:20:01,025
volta, applico e alcuni attributi di layout flessibile qui per aiutarmi a progettare lo schermo lì.

279
00:20:01,025 --> 00:20:06,500
Quindi puoi vedere come ho usato un paio di div qui con

280
00:20:06,500 --> 00:20:13,815
l'attributo FxFlex applicato di conseguenza per creare l'interfaccia utente,

281
00:20:13,815 --> 00:20:16,385
per la mia applicazione qui.

282
00:20:16,385 --> 00:20:22,400
Quindi, trascorri un po 'di tempo qui per dare un'occhiata a questo codice qui per

283
00:20:22,400 --> 00:20:29,130
capire rapidamente come è stato creato il mio layout per il mio modello di intestazione.

284
00:20:29,130 --> 00:20:30,620
Non è così complicato,

285
00:20:30,620 --> 00:20:32,825
una volta completato il corso Bootstrap,

286
00:20:32,825 --> 00:20:35,619
questo non è così difficile da capire.

287
00:20:35,619 --> 00:20:39,520
Lungo la strada, stai anche imparando il layout flessibile angolare e poi

288
00:20:39,520 --> 00:20:44,105
anche i componenti del materiale angolare qui.

289
00:20:44,105 --> 00:20:48,619
Andando al file SCSS per il componente di intestazione,

290
00:20:48,619 --> 00:20:52,300
puoi vedere che ho aggiunto alcuni colori qui e poi un mix

291
00:20:52,300 --> 00:20:56,100
e poi aggiunto anche in una classe jumbotron qui.

292
00:20:56,100 --> 00:20:58,275
Ora, la classe contenitore non è qui,

293
00:20:58,275 --> 00:21:01,315
la classe contenitore è nel file di stili principale.

294
00:21:01,315 --> 00:21:03,600
Perché la classe contenitore è qualcosa che

295
00:21:03,600 --> 00:21:06,010
userò per molti dei modelli lì.

296
00:21:06,010 --> 00:21:11,800
Quindi, ecco perché, ho aggiunto nella classe contenitore al file Styles.scss

297
00:21:11,800 --> 00:21:18,020
che è il file comune per la mia intera applicazione angolare.

298
00:21:18,020 --> 00:21:21,375
Quindi, lì ho aggiunto alcuni colori aggiuntivi qui,

299
00:21:21,375 --> 00:21:24,670
e ho anche creato un mix qui,

300
00:21:24,670 --> 00:21:26,759
e poi ho aggiunto nel contenitore,

301
00:21:26,759 --> 00:21:29,980
il primario di sfondo e i colori di accento di sfondo,

302
00:21:29,980 --> 00:21:33,640
e poi sto usando anche un'altra classe chiamata distanziatore flexes,

303
00:21:33,640 --> 00:21:37,575
che ho intenzione di utilizzare in uno dei gli esercizi successivi.

304
00:21:37,575 --> 00:21:41,400
Tutti questi passaggi sono in preparazione per ciò che

305
00:21:41,400 --> 00:21:45,150
verrà nei prossimi esercizi.

306
00:21:45,150 --> 00:21:51,920
La mia applicazione Angular ha ora preso una buona forma in termini di come l'interfaccia utente è disposta,

307
00:21:51,920 --> 00:21:58,155
in modo che ora posso iniziare a introdurre molte più nuove funzionalità per angolare.

308
00:21:58,155 --> 00:22:02,005
Pagando un'altra visita alla mia applicazione Angular nel browser,

309
00:22:02,005 --> 00:22:08,450
fammi vedere come questa applicazione appare in diverse dimensioni dello schermo.

310
00:22:08,450 --> 00:22:11,430
Quindi, questa è la dimensione standard dello schermo del desktop,

311
00:22:11,430 --> 00:22:17,020
quindi passiamo a una dimensione dello schermo più piccola e poi vediamo come appare l'applicazione.

312
00:22:17,020 --> 00:22:21,690
Quindi, questa è una dimensione dello schermo di iPhone 6 Plus,

313
00:22:21,690 --> 00:22:28,865
in modo da poter vedere come il layout è diverso per le dimensioni dello schermo più piccole.

314
00:22:28,865 --> 00:22:35,115
Quindi, la mia intestazione è proprio lì e il mio menu in basso e il piè di pagina qui,

315
00:22:35,115 --> 00:22:38,955
nota come le diverse parti del piè di pagina sono state

316
00:22:38,955 --> 00:22:43,485
disposte in modo diverso per le dimensioni dello schermo extra piccole.

317
00:22:43,485 --> 00:22:49,950
Questa è la stessa applicazione in modalità orizzontale o iPhone 6 Plus,

318
00:22:49,950 --> 00:22:58,205
quindi puoi vedere che la mia intestazione è disposta in questo modo e il menu lì e il piè di pagina.

319
00:22:58,205 --> 00:23:04,230
Quindi, questo ti mostra che ho sfruttato il layout flessibile angolare

320
00:23:04,230 --> 00:23:10,510
per essere in grado di creare layout diversi per diverse dimensioni dello schermo.

321
00:23:10,510 --> 00:23:14,395
Quindi, ancora una volta, se hai seguito il corso Bootstrap in precedenza,

322
00:23:14,395 --> 00:23:19,420
inizierai a vedere come il design reattivo con

323
00:23:19,420 --> 00:23:25,950
il layout flessibile angolare può essere utilizzato anche per ottenere risultati simili.

324
00:23:25,950 --> 00:23:29,790
Quindi, con questo, completiamo questo esercizio.

325
00:23:29,790 --> 00:23:35,140
In questo esercizio, abbiamo preparato la nostra applicazione Angular e

326
00:23:35,140 --> 00:23:40,645
l'abbiamo preparata per il resto degli esercizi di questo corso.

327
00:23:40,645 --> 00:23:47,300
Questo è anche un buon momento per fare un commit git con l'intestazione del messaggio e i piè di pagina.