1
00:00:00,000 --> 00:00:06,150
Ora passeremo al

2
00:00:06,150 --> 00:00:09,045
nostro prossimo esercizio in cui creeremo

3
00:00:09,045 --> 00:00:13,275
un nuovo componente e aggiungerlo alla nostra applicazione angolare.

4
00:00:13,275 --> 00:00:17,430
Quindi, faremo uso di quel componente per controllare una parte

5
00:00:17,430 --> 00:00:22,380
dello schermo che abbiamo progettato per la nostra applicazione angolare.

6
00:00:22,380 --> 00:00:27,380
Lo schermo per la nostra applicazione Angular è piuttosto noioso al momento.

7
00:00:27,380 --> 00:00:32,240
Tutto ciò che abbiamo è una barra degli strumenti in alto e poi uno

8
00:00:32,240 --> 00:00:35,595
schermo bianco qui, ma che ci dà anche idee.

9
00:00:35,595 --> 00:00:39,560
Ora possiamo prendere contenuti aggiuntivi e poi

10
00:00:39,560 --> 00:00:43,970
metterlo in questa parte dello schermo qui. Come facciamo a farlo?

11
00:00:43,970 --> 00:00:46,850
Possiamo creare un nuovo componente e poi

12
00:00:46,850 --> 00:00:49,460
consegnare questa parte dello schermo a quel componente e dire,

13
00:00:49,460 --> 00:00:53,450
«Ti occupi di rendere ciò che vuoi in quella parte dello schermo.»

14
00:00:53,450 --> 00:00:58,055
Quindi, quella vista sarà controllata dal nuovo componente.

15
00:00:58,055 --> 00:01:03,345
Come facciamo a farlo? Passiamo ora all'esercizio.

16
00:01:03,345 --> 00:01:06,610
Per iniziare con l'esercizio,

17
00:01:06,610 --> 00:01:10,620
vai alle istruzioni per l'esercizio che seguono questo particolare video.

18
00:01:10,620 --> 00:01:12,555
Quindi nelle istruzioni per l'esercizio,

19
00:01:12,555 --> 00:01:15,680
vedrai alcune risorse di esercizio,

20
00:01:15,680 --> 00:01:18,290
che è un file zip a tua disposizione.

21
00:01:18,290 --> 00:01:23,085
Scarica quel file zip sul tuo computer

22
00:01:23,085 --> 00:01:28,320
e questo ti darà un file images.zip.

23
00:01:28,320 --> 00:01:36,340
Quindi, basta salvarlo come file images.zip nella cartella download,

24
00:01:36,340 --> 00:01:42,200
decomprimerlo, e quindi questo vi darà

25
00:01:42,200 --> 00:01:46,700
una cartella di immagini contenente un insieme di immagini che faremo uso nella nostra applicazione.

26
00:01:46,700 --> 00:01:51,379
Decomprimere il file images.zip appena scaricato

27
00:01:51,379 --> 00:01:56,415
e spostare il file images.zip nel progetto,

28
00:01:56,415 --> 00:01:58,130
e all'interno del progetto,

29
00:01:58,130 --> 00:02:02,695
nella cartella fonti e risorse qui.

30
00:02:02,695 --> 00:02:08,645
Quindi, ancora una volta, sposta la cartella delle immagini che ottieni

31
00:02:08,645 --> 00:02:15,110
decompripendo il file images.zip e quindi sposta quella cartella delle immagini nella tua applicazione,

32
00:02:15,110 --> 00:02:17,465
quindi, all'interno dell'applicazione,

33
00:02:17,465 --> 00:02:22,670
sotto le fonti e le risorse sottocartella.

34
00:02:22,670 --> 00:02:26,975
Queste immagini fornite qui saranno

35
00:02:26,975 --> 00:02:31,690
disponibili per l'uso all'interno dell'applicazione Angular.

36
00:02:31,690 --> 00:02:37,310
Ora, ci accingiamo a fare uso della CLI angolare per

37
00:02:37,310 --> 00:02:43,025
generare automaticamente un componente per noi e aggiungerlo alla nostra applicazione angolare.

38
00:02:43,025 --> 00:02:45,750
Quindi, nel terminale,

39
00:02:45,750 --> 00:02:50,420
vai alla cartella contenente la tua applicazione Angular e digita

40
00:02:50,420 --> 00:02:56,960
ng genera il menu dei componenti.

41
00:02:56,960 --> 00:03:00,570
Quindi, chiameremo questo componente come il MenuComponent.

42
00:03:00,570 --> 00:03:03,980
Questo MenuComponent conterrà il menu per

43
00:03:03,980 --> 00:03:08,390
il ristorante per cui stiamo preparando la nostra applicazione Angular.

44
00:03:08,390 --> 00:03:10,460
Quindi, quando digiti questo,

45
00:03:10,460 --> 00:03:11,975
questo genererà automaticamente

46
00:03:11,975 --> 00:03:16,350
il MenuComponent e quindi lo aggiungerà alla tua applicazione Angular.

47
00:03:16,350 --> 00:03:19,970
Questo MenuComponent verrà creato e aggiunto

48
00:03:19,970 --> 00:03:27,300
nella cartella origine/app/menu dell'applicazione.

49
00:03:27,300 --> 00:03:33,050
Quindi, creerà un set di file nella cartella del menu.

50
00:03:33,050 --> 00:03:35,550
Quindi, si può vedere che crea un file SCSS,

51
00:03:35,550 --> 00:03:38,310
un file HTML, e il file ts,

52
00:03:38,310 --> 00:03:40,630
e poi qualcosa chiamato il file spettrale ts.

53
00:03:40,630 --> 00:03:42,495
Ci torneremo più tardi.

54
00:03:42,495 --> 00:03:48,140
Quindi, inoltre, aggiornerà il file del modulo dell'app.

55
00:03:48,140 --> 00:03:52,920
Quindi, andiamo a dare un'occhiata a cosa è successo quando hai

56
00:03:52,920 --> 00:03:58,415
creato questo MenuComponent e lo hai aggiunto alla tua applicazione Angular.

57
00:03:58,415 --> 00:04:01,040
Andiamo dall'Editore.

58
00:04:01,040 --> 00:04:03,930
Venendo al nostro Editor,

59
00:04:03,930 --> 00:04:05,245
ora noterai che,

60
00:04:05,245 --> 00:04:06,650
nella cartella app,

61
00:04:06,650 --> 00:04:09,380
c'è una nuova cartella chiamata menu lì,

62
00:04:09,380 --> 00:04:16,210
e questa cartella menu contiene tutti i file relativi MenuComponent qui.

63
00:04:16,210 --> 00:04:22,385
L' Angolare CLI segue la guida di stile standard Angular.

64
00:04:22,385 --> 00:04:25,715
La guida di stile suggerisce che ogni componente dovrebbe essere

65
00:04:25,715 --> 00:04:29,765
inserito nella propria cartella come si vede qui,

66
00:04:29,765 --> 00:04:34,220
e mi piace praticamente questo perché sono molto ossessivo nel

67
00:04:34,220 --> 00:04:38,840
mantenerlo gerarchia pulita per le mie cartelle dell'applicazione qui.

68
00:04:38,840 --> 00:04:41,825
Quindi, questo funziona molto bene per me.

69
00:04:41,825 --> 00:04:44,545
Ad alcune persone piace una gerarchia piatta,

70
00:04:44,545 --> 00:04:46,570
ma mi confondo con quella parte.

71
00:04:46,570 --> 00:04:51,455
Quindi, preferisco memorizzare ogni componente nella propria cartella.

72
00:04:51,455 --> 00:04:53,480
Quindi, funziona bene per me.

73
00:04:53,480 --> 00:04:58,430
Ora, se apri il file module.ts dell'

74
00:04:58,430 --> 00:05:02,390
app, noterai che il file module.ts dell'app è stato aggiornato

75
00:05:02,390 --> 00:05:06,810
includendo un'altra importazione nel file.ts dell'app.

76
00:05:06,810 --> 00:05:09,435
Quindi, si vede che, insieme con AppComponent,

77
00:05:09,435 --> 00:05:15,235
il MenuComponent è stato aggiunto automaticamente come importazione al modulo app.

78
00:05:15,235 --> 00:05:17,570
Quindi, questo significa che il MenuComponent è ora

79
00:05:17,570 --> 00:05:20,470
disponibile per l'applicazione Angular da utilizzare.

80
00:05:20,470 --> 00:05:26,590
Inoltre, se si controlla la proprietà delle dichiarazioni all'interno del decoratore ngModule,

81
00:05:26,590 --> 00:05:29,160
si vedrà che nella proprietà delle dichiarazioni,

82
00:05:29,160 --> 00:05:31,465
oltre a AppComponent,

83
00:05:31,465 --> 00:05:34,120
si avrà anche il MenuComponent incluso.

84
00:05:34,120 --> 00:05:37,270
Questo è il motivo per cui amo Angular CLI,

85
00:05:37,270 --> 00:05:40,035
perché semplifica tutto questo ha funzionato per me.

86
00:05:40,035 --> 00:05:41,945
Se dovessi farlo a mano,

87
00:05:41,945 --> 00:05:48,710
dovrò andare manualmente nell'app module.ts e quindi digitare tutto questo codice lì,

88
00:05:48,710 --> 00:05:53,830
e c'è un'alta probabilità che finisca per commettere errori lì.

89
00:05:53,830 --> 00:05:57,800
Quindi, ci stiamo risparmiando un sacco di problemi usando la CLI angolare.

90
00:05:57,800 --> 00:05:59,720
Quindi, ecco perché mi sono innamorato di

91
00:05:59,720 --> 00:06:04,455
Angular CLI per la creazione delle mie applicazioni Angular.

92
00:06:04,455 --> 00:06:07,965
Quindi, con questo, abbiamo impostato

93
00:06:07,965 --> 00:06:11,570
il nostro MenuComponent per essere disponibile per la nostra applicazione angolare.

94
00:06:11,570 --> 00:06:14,505
Ora, dove ho intenzione di utilizzare il MenuComponent?

95
00:06:14,505 --> 00:06:21,460
Ho intenzione di fare uso del MenuComponent all'interno del mio modello AppComponents.

96
00:06:21,460 --> 00:06:25,275
Quindi, andrò al modello AppComponents e quindi

97
00:06:25,275 --> 00:06:29,810
includerò il MenuComponent qui nel mio AppComponent.

98
00:06:29,810 --> 00:06:37,795
Quindi, questo essenzialmente consegnerà quella parte dello schermo al mio MenuComponent.

99
00:06:37,795 --> 00:06:38,980
Come facciamo a farlo?

100
00:06:38,980 --> 00:06:44,300
Per fare ciò, daremo prima una rapida occhiata al file MenuComponent.ts.

101
00:06:44,300 --> 00:06:47,425
Quindi, quando apri il file MenuComponent.ts,

102
00:06:47,425 --> 00:06:54,225
vedrai che il selettore per il MenuComponent è stato definito come app-menu.

103
00:06:54,225 --> 00:07:02,615
Quindi, questo è il nome del selettore standard che la CLI angolare fornisce per i tuoi componenti.

104
00:07:02,615 --> 00:07:04,840
Puoi cambiarlo se vuoi,

105
00:07:04,840 --> 00:07:07,970
ma qualunque selettore tu specifichi qui,

106
00:07:07,970 --> 00:07:15,670
formerebbe i tag che usi per includerlo nel tuo file modello.

107
00:07:15,670 --> 00:07:20,195
Quindi, tornando a AppComponent.html

108
00:07:20,195 --> 00:07:23,795
, ora, se voglio includere il file del menu qui,

109
00:07:23,795 --> 00:07:24,930
quindi dirò solo,

110
00:07:24,930 --> 00:07:31,775
tag menu app e voilà,

111
00:07:31,775 --> 00:07:35,360
quella parte dello schermo viene ora consegnata al mio MenuComponent,

112
00:07:35,360 --> 00:07:40,640
e tocca a MenuComponent decidere cosa vuole inserire lì.

113
00:07:40,640 --> 00:07:42,420
Quindi, qualunque cosa sia definita,

114
00:07:42,420 --> 00:07:49,535
il modello MenuComponents verrà inserito qui.

115
00:07:49,535 --> 00:07:53,630
Quindi, ora, tutto ciò che ci rimane è quello di andare a preparare

116
00:07:53,630 --> 00:07:58,695
il nostro MenuComponent per mostrare le informazioni appropriate per noi.

117
00:07:58,695 --> 00:08:00,885
Salviamo le modifiche,

118
00:08:00,885 --> 00:08:04,825
quindi passeremo al

119
00:08:04,825 --> 00:08:11,715
passaggio successivo in cui creeremo il menu per il nostro ristorante utilizzando il MenuComponent.

120
00:08:11,715 --> 00:08:14,845
Prima di farlo,

121
00:08:14,845 --> 00:08:17,625
quello che ho intenzione di fare è,

122
00:08:17,625 --> 00:08:19,830
andare alla cartella dell'app qui,

123
00:08:19,830 --> 00:08:22,090
e poi nella cartella dell'app,

124
00:08:22,090 --> 00:08:29,660
creerò una nuova sottocartella e chiamarla come sottocartella condivisa.

125
00:08:29,660 --> 00:08:34,015
Ora, tutti i file che ho intenzione di condividere tra vari componenti,

126
00:08:34,015 --> 00:08:37,040
ho intenzione di metterlo nella cartella condivisa qui.

127
00:08:37,040 --> 00:08:39,160
Ora, all'interno della cartella condivisa,

128
00:08:39,160 --> 00:08:45,895
creerò un nuovo file chiamato dish.ts.

129
00:08:45,895 --> 00:08:51,650
All' interno di questo piatto.ts, ho intenzione di creare una classe per definire

130
00:08:51,650 --> 00:08:59,050
un piatto e renderlo disponibile per i componenti rimanenti da utilizzare.

131
00:08:59,050 --> 00:09:02,555
Quindi, per definire una classe TypeScript qui,

132
00:09:02,555 --> 00:09:04,240
dirò esportazione,

133
00:09:04,240 --> 00:09:07,525
quindi sto esportando questa classe TypeScript qui,

134
00:09:07,525 --> 00:09:13,550
classe di esportazione, e poi nominerò la classe come piatto.

135
00:09:13,550 --> 00:09:16,230
All' interno di questa classe di piatti,

136
00:09:16,230 --> 00:09:20,175
ora posso definire varie proprietà.

137
00:09:20,175 --> 00:09:21,550
Quindi, per la classe piatto,

138
00:09:21,550 --> 00:09:23,050
definirò una proprietà,

139
00:09:23,050 --> 00:09:27,425
che è un ID, che definisco come una stringa.

140
00:09:27,425 --> 00:09:31,330
Ora, nota, se vieni dal mondo JavaScript,

141
00:09:31,330 --> 00:09:35,975
in JavaScript, non è necessario specificare il tipo di qualsiasi variabile.

142
00:09:35,975 --> 00:09:43,380
TypeScript porta in questa funzione per voi di specificare il tipo per ogni variabile.

143
00:09:43,380 --> 00:09:46,405
Quindi, se si specifica nome, colonna e stringa,

144
00:09:46,405 --> 00:09:51,785
ciò significa che la variabile name sarà sempre del tipo di stringa.

145
00:09:51,785 --> 00:09:55,595
Quindi, se provi ad assegnare un intero al nome, il

146
00:09:55,595 --> 00:09:58,400
compilatore TypeScript lo

147
00:09:58,400 --> 00:10:01,850
catturerà automaticamente e quindi ti dirà che c'è un errore.

148
00:10:01,850 --> 00:10:04,855
Questo è il motivo, usando TypeScript,

149
00:10:04,855 --> 00:10:08,155
puoi ridurre il numero di errori che potresti causare.

150
00:10:08,155 --> 00:10:11,850
JavaScript tradizionalmente non esegue questo

151
00:10:11,850 --> 00:10:16,790
controllo degli errori perché non ha alcun concetto di tipi di dati.

152
00:10:16,790 --> 00:10:22,025
Ma se vieni da un linguaggio di programmazione tradizionale come C ++ o Java,

153
00:10:22,025 --> 00:10:24,945
hai molta familiarità con i tipi di

154
00:10:24,945 --> 00:10:28,565
dati, i tipi di dati primitivi e

155
00:10:28,565 --> 00:10:33,290
altri tipi di dati che sono già definiti nel linguaggio.

156
00:10:33,290 --> 00:10:41,315
TypeScript porta quella funzione a JavaScript o meglio come parte di TypeScript,

157
00:10:41,315 --> 00:10:47,865
e questo consente di definire variabili e allegare tipi a tali variabili,

158
00:10:47,865 --> 00:10:49,950
da cui il nome TypeScript.

159
00:10:49,950 --> 00:10:51,500
Quindi, per il piatto,

160
00:10:51,500 --> 00:10:53,970
ho intenzione di creare una proprietà del nome.

161
00:10:53,970 --> 00:10:57,870
Quindi creerò una proprietà dell'immagine,

162
00:10:57,870 --> 00:10:59,640
che è anche una stringa.

163
00:10:59,640 --> 00:11:03,710
Questa stringa di immagine sarà una stringa che punta

164
00:11:03,710 --> 00:11:08,635
all'URL dell'immagine che userò per questo particolare piatto.

165
00:11:08,635 --> 00:11:18,230
Quindi definirò una categoria per questo piatto come anche un'altra stringa descritta come booleano,

166
00:11:18,230 --> 00:11:21,130
etichetta come una stringa.

167
00:11:21,150 --> 00:11:31,810
Prezzo come stringa e quindi descrizione come stringa.

168
00:11:31,810 --> 00:11:37,695
Quindi, queste sono proprietà che associo alla classe di piatti.

169
00:11:37,695 --> 00:11:43,440
Quindi, questo definirà vari piatti nel mio menu del mio ristorante,

170
00:11:43,440 --> 00:11:48,060
e per ogni piatto ho bisogno di specificare tutte queste varie proprietà.

171
00:11:48,060 --> 00:11:49,325
Ora, perche' dovrei averne bisogno?

172
00:11:49,325 --> 00:11:54,400
Questo mi aiuterà a costruire il menu per il mio ristorante, come vedrai presto.

173
00:11:54,400 --> 00:12:02,890
Quindi, con questo, completiamo la definizione della mia classe lì.

174
00:12:02,890 --> 00:12:06,940
Salviamo le modifiche al file dish.ts.

175
00:12:06,940 --> 00:12:11,300
Ora, questo file dish.ts sta esportando una classe.

176
00:12:11,300 --> 00:12:15,820
Ora, posso importare questa classe in uno qualsiasi dei

177
00:12:15,820 --> 00:12:22,485
file di script del tipo di componente della mia applicazione.

178
00:12:22,485 --> 00:12:28,550
Successivamente, passerò al mio file menu.component.ts.

179
00:12:28,550 --> 00:12:34,484
All' interno del file menu.component.ts oltre a importare il componente,

180
00:12:34,484 --> 00:12:38,420
vedrò anche che stai importando un OnInit lì.

181
00:12:38,420 --> 00:12:41,885
Verremo alla parte OnInit in uno degli esercizi successivi.

182
00:12:41,885 --> 00:12:45,475
Ti spiegherò cosa fa in un esercizio successivo.

183
00:12:45,475 --> 00:12:53,820
Importeremo anche la nuova classe che abbiamo creato chiamata classe Dish.

184
00:12:53,820 --> 00:12:56,160
Perché importiamo questa classe di piatti?

185
00:12:56,160 --> 00:13:03,180
In modo che possiamo usarlo come tipo per una variabile che sto definendo qui.

186
00:13:03,180 --> 00:13:04,850
Allora, dov'e' questa classe di piatti?

187
00:13:04,850 --> 00:13:13,955
È in.. Cartella /condivisa/piatto.

188
00:13:13,955 --> 00:13:17,890
Quindi, questo è nella cartella piatti condivisa qui sopra.

189
00:13:17,890 --> 00:13:22,460
Poi vedrete che abbiamo definito il componente menu qui.

190
00:13:22,460 --> 00:13:23,640
Quindi, puoi vedere che dice,

191
00:13:23,640 --> 00:13:27,950
«Esporta componente menu classe» e poi dice, «Implementa su di esso».

192
00:13:27,950 --> 00:13:30,630
Torneremo a questo tra un po' più tardi.

193
00:13:30,630 --> 00:13:37,130
Vedi anche che c'è un costruttore e c'è un altro metodo qui chiamato ngOnit.

194
00:13:37,130 --> 00:13:40,170
Useremo questi in alcuni degli esercizi successivi.

195
00:13:40,170 --> 00:13:42,970
Quindi, lasciamolo lì come tale e

196
00:13:42,970 --> 00:13:46,565
torneremo a capire cosa sia in breve tempo.

197
00:13:46,565 --> 00:13:48,940
Inoltre, si noti che per questo componente,

198
00:13:48,940 --> 00:13:52,040
il modello è definito nel componente del menu HTML punto,

199
00:13:52,040 --> 00:13:56,070
e gli URL di stile definiti lì.

200
00:13:56,070 --> 00:14:02,170
Ora, inoltre, nella mia classe di componenti del menu,

201
00:14:02,170 --> 00:14:07,100
includerò una nuova variabile chiamata come

202
00:14:07,100 --> 00:14:14,660
piatti che sarebbe una matrice del tipo di piatto.

203
00:14:14,660 --> 00:14:21,540
Ok? Quindi includerò semplicemente il set di

204
00:14:21,540 --> 00:14:29,955
piatti nella variabile dei miei piatti che ho definito qui.

205
00:14:29,955 --> 00:14:35,040
Ora, digitare tutta la cosa a mano mi ci vorrà un sacco di tempo.

206
00:14:35,040 --> 00:14:39,060
Quindi, invece, quello che ti suggerirei di fare è semplicemente andare a copiare

207
00:14:39,060 --> 00:14:45,780
il contenuto direttamente dalle istruzioni che seguono questo video.

208
00:14:45,780 --> 00:14:47,350
Quindi e' quello che faro'.

209
00:14:47,350 --> 00:14:50,810
Allora torna indietro e incollalo qui.

210
00:14:50,810 --> 00:14:55,720
Ora potete vedere che ho tagliato e incollato le informazioni per

211
00:14:55,720 --> 00:15:00,120
tutti i miei piatti dalle istruzioni qui dentro.

212
00:15:00,120 --> 00:15:07,045
Quindi, questo completa l'array di tutti i piatti che sono definiti nelle mie istruzioni.

213
00:15:07,045 --> 00:15:11,035
Quindi, questo è il modo più semplice per ottenere queste informazioni.

214
00:15:11,035 --> 00:15:13,525
Quindi, basta tagliarlo e incollarlo da lì.

215
00:15:13,525 --> 00:15:16,800
Ora, si noti che per questo piatto,

216
00:15:16,800 --> 00:15:20,885
ognuno di loro è un oggetto JavaScript qui.

217
00:15:20,885 --> 00:15:25,240
Quindi, che può essere mappato nella classe di script di tipo corrispondente lì.

218
00:15:25,240 --> 00:15:28,700
Quindi, puoi vedere che ogni oggetto JavaScript ha proprietà lì

219
00:15:28,700 --> 00:15:35,245
e queste proprietà corrispondono esattamente alle proprietà che ho definito per la mia classe di piatti.

220
00:15:35,245 --> 00:15:37,080
Quindi, una volta definito questo,

221
00:15:37,080 --> 00:15:39,430
allora questi piatti diventeranno ora una serie di

222
00:15:39,430 --> 00:15:42,020
piatti e questo diventerà ora disponibile per

223
00:15:42,020 --> 00:15:48,420
me da usare quando definisco il mio modello HTML per il mio menu.

224
00:15:48,420 --> 00:15:53,715
Salviamo le modifiche che abbiamo fatto finora e poi

225
00:15:53,715 --> 00:15:59,410
apriremo il file menu.component.html.

226
00:15:59,410 --> 00:16:02,580
Quindi, andremo al file menu.component.html.

227
00:16:02,580 --> 00:16:06,280
Vedrai che nel file menu.component.html,

228
00:16:06,280 --> 00:16:11,390
attualmente hai solo una P con menu funziona qui.

229
00:16:11,390 --> 00:16:17,390
Quindi, se l'hai incollato lì e poi vedi l'applicazione funzionante,

230
00:16:17,390 --> 00:16:20,500
avresti visto solo questo menu funziona sullo schermo.

231
00:16:20,500 --> 00:16:25,640
Ho intenzione di sostituire questo con il mio codice modello qui.

232
00:16:25,640 --> 00:16:31,230
Questo è dove prenderò l'aiuto del layout flessibile angolare per aiutarmi

233
00:16:31,230 --> 00:16:37,125
a stendere bene il mio contenuto nel mio schermo.

234
00:16:37,125 --> 00:16:38,885
Quindi, per

235
00:16:38,885 --> 00:16:41,490
iniziare, inizierò con un div,

236
00:16:41,490 --> 00:16:46,480
a cui applicherò una classe chiamata contenitore.

237
00:16:46,480 --> 00:16:49,710
Ho intenzione di definire la classe contenitore utilizzando del

238
00:16:49,710 --> 00:16:55,360
codice CSS un po 'più tardi in questo esercizio.

239
00:16:55,360 --> 00:16:57,715
Quindi, applicherò il contenitore della classe qui.

240
00:16:57,715 --> 00:17:04,640
Ho intenzione di definire anche una proprietà chiamata fxlayout.

241
00:17:04,640 --> 00:17:07,545
Un attributo chiamato fxlayout.

242
00:17:07,545 --> 00:17:10,205
Ora, questo fxlayout è un attributo

243
00:17:10,205 --> 00:17:15,015
che il layout flessibile angolare mi consente di applicare a un div.

244
00:17:15,015 --> 00:17:20,295
Questo specifica se i vari contenuti

245
00:17:20,295 --> 00:17:25,440
che includo all'interno di quei div devono essere disposti orizzontalmente o verticalmente.

246
00:17:25,440 --> 00:17:28,755
Quindi, ho intenzione di specificare che questa è una colonna.

247
00:17:28,755 --> 00:17:32,675
Quindi, qualunque contenuto includa all'interno di questo div,

248
00:17:32,675 --> 00:17:36,105
sarà disposto verticalmente uno sotto l'altro sul mio schermo.

249
00:17:36,105 --> 00:17:43,855
Se hai visto il modo della griglia di lavorare con i contenuti in Bootstrap,

250
00:17:43,855 --> 00:17:47,100
vedresti che questo mi dice essenzialmente che ho intenzione di

251
00:17:47,100 --> 00:17:50,970
deporre tutto in una singola colonna laggiù.

252
00:17:50,970 --> 00:17:55,700
Non confondere questa colonna con la colonna di Bootstrap dalla griglia di Bootstrap.

253
00:17:55,700 --> 00:17:57,185
Sono due cose diverse.

254
00:17:57,185 --> 00:18:01,290
Qui, l'attributo è fxlayout e specifico la colonna.

255
00:18:01,290 --> 00:18:03,240
Posso anche specificarlo come riga,

256
00:18:03,240 --> 00:18:07,470
il che significa che il contenuto sarà disposto orizzontalmente.

257
00:18:07,470 --> 00:18:14,590
Ora anche, un altro attributo che ho intenzione di specificare per questo è fxLayoutGap,

258
00:18:14,590 --> 00:18:18,705
che specificherò come 10 pixel.

259
00:18:18,705 --> 00:18:23,330
Quindi, ciò che significa è che qualunque contenuto includo qui

260
00:18:23,330 --> 00:18:27,690
sarà separato l'uno dall'altro da uno spazio di 10 pixel tra ciascuno di essi.

261
00:18:27,690 --> 00:18:33,745
Dalla conoscenza di Bootstraps, vedi cos'è un cutoff qui.

262
00:18:33,745 --> 00:18:38,050
Questo definisce una separazione di cutoff tra

263
00:18:38,050 --> 00:18:42,925
due parti di contenuto nel mio modello di applicazione.

264
00:18:42,925 --> 00:18:46,945
Quindi, con questo, chiuderemo il div qui.

265
00:18:46,945 --> 00:18:49,080
Ora, all'interno di questo div,

266
00:18:49,080 --> 00:18:57,735
definirò il contenuto effettivo che andrà nel mio file menu.component.html.

267
00:18:57,735 --> 00:19:04,035
Ora, qui, ho intenzione di fare uso di un altro componente che il

268
00:19:04,035 --> 00:19:10,745
design del materiale mi fornisce chiamato come componente lista mat.

269
00:19:10,745 --> 00:19:14,470
Quindi, questo componente mi consente di creare un elenco di

270
00:19:14,470 --> 00:19:19,215
elementi che includo nel mio modello qui.

271
00:19:19,215 --> 00:19:25,360
Quindi, questo è un componente di lista materiale angolare.

272
00:19:25,360 --> 00:19:30,980
Da Bootstrap, si nota che in Bootstrap avevamo l'oggetto multimediale.

273
00:19:30,980 --> 00:19:36,430
Quindi, l'elenco mat è come l'oggetto multimediale in un certo senso da Bootstrap.

274
00:19:36,430 --> 00:19:39,470
Ora a questo, ho intenzione di applicare una classe,

275
00:19:39,470 --> 00:19:42,095
un attributo chiamato come FxFlex.

276
00:19:42,095 --> 00:19:49,990
Ora, ciò che significa è che tutta questa cosa sarà trattata come un'unità o un pezzo di

277
00:19:49,990 --> 00:19:58,180
contenuto che saranno disposti dal mio layout flessibile qui.

278
00:19:58,180 --> 00:20:01,100
Quindi, se hai familiarità con il layout flessibile CSS.

279
00:20:01,100 --> 00:20:05,505
Quindi, questo è un pezzo di contenuto che verrà disposto dal mio layout flessibile CSS.

280
00:20:05,505 --> 00:20:09,420
Quindi, applica FxFlex qui,

281
00:20:09,420 --> 00:20:16,610
e poi dentro qui definirò mat-list-item.

282
00:20:16,610 --> 00:20:18,380
Quindi, questa è una voce della lista qui.

283
00:20:18,380 --> 00:20:22,250
Quindi, dalla tua conoscenza HTML,

284
00:20:22,250 --> 00:20:28,090
se il tag LI che usi in HTML è simile a questo qui.

285
00:20:28,090 --> 00:20:31,240
Quindi, questa è una voce della lista di mg qui.

286
00:20:31,240 --> 00:20:34,705
Quindi, ovviamente, all'interno di questa voce della lista,

287
00:20:34,705 --> 00:20:39,220
stai per definire l'elenco delle cose.

288
00:20:39,220 --> 00:20:45,750
Ora, angolare fornisce alcune direttive strutturali che puoi applicare

289
00:20:45,750 --> 00:20:53,455
ai tuoi tag qui che ti permettono di creare il tuo contenuto.

290
00:20:53,455 --> 00:20:58,375
Ora, ho intenzione di utilizzare una direttiva strutturale chiamata NgFor.

291
00:20:58,375 --> 00:21:01,990
Vedremo come lo usiamo in questo modello.

292
00:21:01,990 --> 00:21:04,050
Poi, dopo questo esercizio,

293
00:21:04,050 --> 00:21:07,250
vi spiegherò brevemente quali sono le direttive strutturali e

294
00:21:07,250 --> 00:21:11,625
qual è lo scopo che servono per definire i vostri modelli qui.

295
00:21:11,625 --> 00:21:15,960
Quindi, all'interno di questa voce di lista vuota, ho intenzione di dire,

296
00:21:15,960 --> 00:21:21,480
stella, nota la sintassi, stella ngFor.

297
00:21:22,470 --> 00:21:25,500
Quindi, questa è la direttiva strutturale,

298
00:21:25,500 --> 00:21:29,585
la direttiva strutturale NGfor in angolare.

299
00:21:29,585 --> 00:21:34,690
Ciò che questa direttiva strutturale ngFor consente di

300
00:21:34,690 --> 00:21:40,855
fare è iterare su una serie di elementi.

301
00:21:40,855 --> 00:21:48,805
Ricorda che abbiamo definito i piatti come una serie di oggetti piatti nel nostro codice.

302
00:21:48,805 --> 00:21:51,040
Ora, nel mio modello,

303
00:21:51,040 --> 00:21:54,095
avrò accesso a quell'oggetto piatti.

304
00:21:54,095 --> 00:21:56,945
Quindi qui, se voglio iterare su di esso,

305
00:21:56,945 --> 00:21:59,160
il modo in cui lo specifico è dirò,

306
00:21:59,160 --> 00:22:04,950
«Lascia piatto di piatti».

307
00:22:04,950 --> 00:22:11,495
Ecco come funziona la sintassi per la direttiva strutturale ngFor.

308
00:22:11,495 --> 00:22:14,020
Quindi, lasciare piatto di piatti.

309
00:22:14,020 --> 00:22:21,805
Ciò significa che i piatti sono la matrice di oggetti piatti.

310
00:22:21,805 --> 00:22:24,245
Quando selezioniamo diciamo let piatto di piatti,

311
00:22:24,245 --> 00:22:27,130
questo mi permetterà di accedere a ogni elemento

312
00:22:27,130 --> 00:22:30,460
della matrice e quindi mi aiuta a scorrere sull'array.

313
00:22:30,460 --> 00:22:32,085
Questo è come un ciclo for,

314
00:22:32,085 --> 00:22:36,210
se si ha familiarità con i cicli for dalla programmazione.

315
00:22:36,210 --> 00:22:40,630
Quindi, questo agisce come un ciclo for per te e quindi ti aiuta a scorrere

316
00:22:40,630 --> 00:22:46,855
su tutti gli elementi della matrice di piatti qui.

317
00:22:46,855 --> 00:22:51,050
Questo piatto diventa un oggetto JavaScript che mi permette di

318
00:22:51,050 --> 00:22:55,350
accedere a ogni elemento di quell'array lì.

319
00:22:55,350 --> 00:23:00,680
Ora, da questo, possiamo anche ottenere

320
00:23:00,680 --> 00:23:06,775
l'accesso alle proprietà di ogni singolo oggetto all'interno del mio array di piatti.

321
00:23:06,775 --> 00:23:13,335
Quindi, posso farne uso per definire il mio modello qui.

322
00:23:13,335 --> 00:23:16,120
Lasciami stendere il modello e poi torneremo indietro e

323
00:23:16,120 --> 00:23:19,185
guarderemo come questi due sono correlati qui.

324
00:23:19,185 --> 00:23:21,760
Ora, all'interno della mia voce di lista vuota,

325
00:23:21,760 --> 00:23:28,480
posso includere un'immagine con l'attributo come matlistAvatar.

326
00:23:30,040 --> 00:23:38,625
Quindi, questo mi permette di includere un'immagine e quindi con la fonte specificata qui.

327
00:23:38,625 --> 00:23:44,275
Ora è interessante, guarda la sintassi che sto usando qui.

328
00:23:44,275 --> 00:23:48,380
All' interno di doppie parentesi graffe, ho intenzione di dire dish.image.

329
00:23:48,560 --> 00:23:55,985
Ciò significa che si tratta di un'interpolazione unidirezionale di cui stiamo parlando.

330
00:23:55,985 --> 00:23:58,885
Qui, quando lo specifico,

331
00:23:58,885 --> 00:24:07,635
ciò significa che questa fonte otterrà il valore di dish.image che ha definito nel

332
00:24:07,635 --> 00:24:10,515
mio oggetto JavaScript che ho definito nella

333
00:24:10,515 --> 00:24:17,050
mia classe di script di tipo lì e che è disponibile per me per fare il layout qui.

334
00:24:17,050 --> 00:24:22,510
Quindi, che il valore dish.image sarà disponibile per me e anche per questa immagine,

335
00:24:22,510 --> 00:24:28,255
specificherò un valore alternativo come dish.name.

336
00:24:28,255 --> 00:24:33,770
Ricordiamo che il mio piatto aveva anche la proprietà name disponibile per

337
00:24:33,770 --> 00:24:39,240
me in modo che definisca un'immagine per la mia lista qui.

338
00:24:39,240 --> 00:24:42,460
Presto ti renderai conto di come questo elenco appare

339
00:24:42,460 --> 00:24:46,010
sullo schermo quando completiamo questo modello qui.

340
00:24:46,010 --> 00:24:53,140
Inoltre, ho intenzione di utilizzare un h1 con tag MatLine.

341
00:24:53,140 --> 00:24:56,500
Ancora una volta, questo è l'uso

342
00:24:56,500 --> 00:25:04,900
della lista componente materiale angolare per definire il mio modello qui.

343
00:25:04,900 --> 00:25:12,800
Quindi, dico h1 MatLine quindi questo mi aiuta a definire una linea qui e poi dentro lì,

344
00:25:12,800 --> 00:25:17,170
ho intenzione di usare le doppie parentesi graffe e dire dish.name qui.

345
00:25:17,170 --> 00:25:24,930
Quindi, questo mi permette di ottenere il valore del nome del piatto lì.

346
00:25:24,930 --> 00:25:33,140
Quindi, questo definisce una riga e poi la nella riga successiva ho intenzione di dire p MatLine.

347
00:25:33,140 --> 00:25:36,370
Quindi, userò il tag p qui e poi

348
00:25:36,370 --> 00:25:39,655
chiuderò il tag p e poi all'interno del tag p,

349
00:25:39,655 --> 00:25:48,000
userò uno span per definire dish.description.

350
00:25:48,000 --> 00:25:52,025
Quindi, se hai familiarità con gli oggetti JavaScript,

351
00:25:52,025 --> 00:25:56,180
ora vedi come sto accedendo alle proprietà del

352
00:25:56,180 --> 00:26:02,030
mio oggetto JavaScript qui, dish.description qui.

353
00:26:02,030 --> 00:26:06,595
Per nota, eseguendo questa ancora una volta

354
00:26:06,595 --> 00:26:13,630
l'attributo ngFor mi consente di scorrere su una serie di oggetti qui.

355
00:26:13,630 --> 00:26:17,700
Quindi, i piatti qui sono una serie di oggetti piatti.

356
00:26:17,700 --> 00:26:20,865
Quindi, quando dico lasciare piatto di piatti,

357
00:26:20,865 --> 00:26:28,070
questo piatto mi darà accesso a ogni elemento del

358
00:26:28,070 --> 00:26:32,170
mio array piatti e iterare su ogni elemento della matrice

359
00:26:32,170 --> 00:26:36,525
e poi creerò questo contenuto per ciascuno di essi.

360
00:26:36,525 --> 00:26:39,205
Quindi, questa voce di elenco vuoto,

361
00:26:39,205 --> 00:26:43,500
agisce essenzialmente come un ciclo for dal

362
00:26:43,500 --> 00:26:47,830
tuo linguaggio tradizionale del computer e quindi scorre

363
00:26:47,830 --> 00:26:52,890
sull'elenco dei piatti e quindi distribuisce ognuno di essi sul mio schermo.

364
00:26:52,890 --> 00:26:54,895
Quindi, con questa modifica,

365
00:26:54,895 --> 00:27:00,145
salviamo il file componente del menu.

366
00:27:00,145 --> 00:27:06,800
Successivamente, andiamo a app.module.ts e abbiamo bisogno di importare il modulo MatList in questo.

367
00:27:06,800 --> 00:27:11,840
Quindi, diciamo, importa MatlistModule

368
00:27:11,840 --> 00:27:20,380
da Angular/Material/List.Una volta che abbiamo importato questo lì,

369
00:27:20,380 --> 00:27:25,390
allora scendiamo e quindi aggiorniamo le importazioni nel

370
00:27:25,390 --> 00:27:30,320
decoratore del modulo Ng e aggiungiamo

371
00:27:30,320 --> 00:27:36,435
il modulo MatList all'elenco delle importazioni lì.

372
00:27:36,435 --> 00:27:42,430
Questo mio module.ts app è ora aggiornato e poi anche,

373
00:27:42,430 --> 00:27:47,770
andrò al file styles.scss e quindi aggiungo

374
00:27:47,770 --> 00:27:53,575
qui la classe contenitore.

375
00:27:53,575 --> 00:27:55,890
Cosa definisce la classe contenitore qui?

376
00:27:55,890 --> 00:28:00,995
La classe contenitore è margine 20

377
00:28:00,995 --> 00:28:07,830
pixel e visualizza flex e salva le modifiche.

378
00:28:07,830 --> 00:28:12,210
Ora, andiamo a dare un'occhiata alla nostra pagina web.

379
00:28:12,210 --> 00:28:14,180
Andando alla nostra pagina web.

380
00:28:14,180 --> 00:28:15,885
Voilà. Ecco a te.

381
00:28:15,885 --> 00:28:22,250
Il menu per il nostro ristorante mostrato in tutto il suo splendore sullo schermo.

382
00:28:22,250 --> 00:28:25,365
Si vede come è stato creato questo menu.

383
00:28:25,365 --> 00:28:30,455
Guarda l'array di oggetti JavaScript che hai visto.

384
00:28:30,455 --> 00:28:35,250
Guarda come ciascuna delle proprietà per l'array di oggetti JavaScript è stata utilizzata e

385
00:28:35,250 --> 00:28:40,490
mappata ai quattro elementi del mio elenco.

386
00:28:40,490 --> 00:28:44,170
Guarda come le immagini corrispondenti sono state incluse qui

387
00:28:44,170 --> 00:28:48,430
usando MatlistAvatar qui.

388
00:28:48,430 --> 00:28:55,150
Quindi, questo crea immagini rotonde qui e poi nota come il nome del

389
00:28:55,150 --> 00:29:03,155
piatto viene visualizzato qui e poi la descrizione del piatto incluso qui.

390
00:29:03,155 --> 00:29:09,010
Meraviglioso Ora, abbiamo il menu per il nostro ristorante

391
00:29:09,010 --> 00:29:14,925
sullo schermo utilizzando un componente di menu in Angular.

392
00:29:14,925 --> 00:29:17,625
Questo completa questo esercizio.

393
00:29:17,625 --> 00:29:21,860
In questo esercizio abbiamo imparato a creare un nuovo componente.

394
00:29:21,860 --> 00:29:25,165
aggiungerlo nella nostra applicazione angolare,

395
00:29:25,165 --> 00:29:28,270
come includere quel componente nel modello di

396
00:29:28,270 --> 00:29:32,365
un altro componente in modo che crei la gerarchia dei componenti.

397
00:29:32,365 --> 00:29:39,255
Poi abbiamo visto come possiamo fare uso del layout flessibile angolare e anche dei

398
00:29:39,255 --> 00:29:42,700
componenti di progettazione del materiale per progettare

399
00:29:42,700 --> 00:29:47,560
il modello per il nostro componente menu per visualizzare il contenuto qui.

400
00:29:47,560 --> 00:29:52,710
Ora, se mi chiedi come faccio a ricordare tutte queste cose.

401
00:29:52,710 --> 00:29:54,535
Beh, ad essere

402
00:29:54,535 --> 00:29:59,435
onesti, non puoi ricordare tutto, ma devi capire l'approccio.

403
00:29:59,435 --> 00:30:03,035
Questo è più importante che cercare di memorizzare una di queste cose.

404
00:30:03,035 --> 00:30:06,735
Ora, se mi chiedi dove ottengo le informazioni sul

405
00:30:06,735 --> 00:30:12,740
componente della lista dal materiale angolare.

406
00:30:12,740 --> 00:30:16,560
Siamo in grado di ordinare la documentazione materiale angolare e lì

407
00:30:16,560 --> 00:30:21,005
avrete i dettagli su come un componente lista dovrebbe essere preparato.

408
00:30:21,005 --> 00:30:29,405
Ora, dove otteniamo i dettagli su come progettiamo un componente in angolare?

409
00:30:29,405 --> 00:30:33,240
Abbiamo appena esaminato un po 'di questo e poi in questo esercizio,

410
00:30:33,240 --> 00:30:41,080
abbiamo imparato come creare un nuovo componente e poi applicarlo nella nostra applicazione angolare.

411
00:30:41,080 --> 00:30:44,790
Quindi, questo è un buon punto per fare un

412
00:30:44,790 --> 00:30:48,905
commento get con i componenti del messaggio parte uno.

413
00:30:48,905 --> 00:30:50,540
Nel prossimo esercizio,

414
00:30:50,540 --> 00:30:54,895
miglioreremo un po 'di più utilizzando un altro tipo

415
00:30:54,895 --> 00:31:00,920
di componente materiale angolare per la stesura del contenuto sul mio schermo.