1
00:00:00,000 --> 00:00:08,745
Ora che abbiamo una comprensione delle applicazioni a pagina singola,

2
00:00:08,745 --> 00:00:10,660
continueremo a lavorare sulla

3
00:00:10,660 --> 00:00:14,490
nostra applicazione angolare che abbiamo lavorato negli esercizi

4
00:00:14,490 --> 00:00:16,980
finora e

5
00:00:16,980 --> 00:00:21,535
svilupparla nell'applicazione a pagina singola utilizzando il supporto del modulo router angolare.

6
00:00:21,535 --> 00:00:25,110
Abbiamo già incluso più componenti come parte della

7
00:00:25,110 --> 00:00:28,770
nostra applicazione angolare nell'esercizio precedente e abbiamo già

8
00:00:28,770 --> 00:00:32,625
configurato per la nostra applicazione angolare per essere in grado di instradare

9
00:00:32,625 --> 00:00:37,410
tra due componenti diversi.

10
00:00:37,410 --> 00:00:40,970
Ora, integreremo di più nella nostra applicazione angolare e

11
00:00:40,970 --> 00:00:44,960
la svilupperemo nell'applicazione angolare a tutti gli effetti insieme

12
00:00:44,960 --> 00:00:49,040
alla navigazione tra le varie viste

13
00:00:49,040 --> 00:00:53,790
rese dai vari componenti della nostra applicazione.

14
00:00:53,800 --> 00:00:58,275
Continuando con la nostra applicazione così com'è ora,

15
00:00:58,275 --> 00:01:05,990
abbiamo la casa di essere renderizzata quando si naviga alla nostra applicazione in

16
00:01:05,990 --> 00:01:09,740
questo momento e poi il modello Home

17
00:01:09,740 --> 00:01:13,740
è stato mostrato tra l'intestazione e il piè di pagina e poi quando si va al

18
00:01:13,740 --> 00:01:19,920
menu, il menu viene visualizzato tra l'intestazione e il piè di pagina nella vista qui.

19
00:01:19,920 --> 00:01:25,490
Ora, ovviamente, dobbiamo integrare gli altri componenti che abbiamo

20
00:01:25,490 --> 00:01:28,700
incluso nella nostra applicazione angolare

21
00:01:28,700 --> 00:01:32,715
per sviluppare questo come un'applicazione angolare a tutti gli effetti.

22
00:01:32,715 --> 00:01:36,135
In questo esercizio integreremo ContactComponent,

23
00:01:36,135 --> 00:01:38,914
aggiorneremo il modello per ContactComponent,

24
00:01:38,914 --> 00:01:43,190
aggiorneremo anche il modello per HomeComponent e faremo

25
00:01:43,190 --> 00:01:48,600
un passo avanti verso la nostra applicazione angolare a pagina singola.

26
00:01:48,600 --> 00:01:52,585
Iniziamo con il ContactComponent.

27
00:01:52,585 --> 00:01:56,630
Per iniziare, prima copia il modello per

28
00:01:56,630 --> 00:02:01,070
il ContactComponent che ti ho dato nelle istruzioni dell'esercizio e quindi

29
00:02:01,070 --> 00:02:06,660
incollalo nel file contactcomponent.html in modo che

30
00:02:06,660 --> 00:02:13,580
elimineremo la vista effettiva del nostro ContactComponent in un po 'più dettagliato qui.

31
00:02:13,580 --> 00:02:18,680
Ora, puoi vedere che ho tagliato e incollato il codice per

32
00:02:18,680 --> 00:02:24,550
il file modello dalle istruzioni nel mio ContactComponent.

33
00:02:24,550 --> 00:02:27,650
Completeremo l'integrazione

34
00:02:27,650 --> 00:02:30,665
del ContactComponent nella nostra applicazione e poi vedremo

35
00:02:30,665 --> 00:02:33,590
come appare il ContactComponent e poi torneremo

36
00:02:33,590 --> 00:02:36,940
e guarderemo rapidamente questo codice un po 'più tardi.

37
00:02:36,940 --> 00:02:41,660
Ora, per integrare il ContactComponent nella nostra applicazione angolare,

38
00:02:41,660 --> 00:02:46,910
abbiamo bisogno di includere un percorso per il ContactComponent nei nostri percorsi.

39
00:02:46,910 --> 00:02:52,270
Quindi, andando al file routes.ts subito dopo il menu,

40
00:02:52,270 --> 00:03:01,520
includerò un altro percorso per il contactComponent userò

41
00:03:01,520 --> 00:03:05,480
l'URL come contattarci e

42
00:03:05,480 --> 00:03:15,375
il componente corrispondente è ContactComponent qui.

43
00:03:15,375 --> 00:03:19,815
Così, con questo, abbiamo ora integrato il nostro ContactComponent

44
00:03:19,815 --> 00:03:24,725
nella nostra applicazione e cerchiamo di salvare le modifiche a

45
00:03:24,725 --> 00:03:30,935
questo e poi avremo anche bisogno di aggiornare il componente intestazione e aggiornare

46
00:03:30,935 --> 00:03:37,540
il un link nel componente intestazione per aiutarci a navigare al ContactComponent.

47
00:03:37,540 --> 00:03:43,680
Quindi, ho intenzione di copiare questo dal menu un link nella

48
00:03:43,680 --> 00:03:48,710
barra degli strumenti del mio componente di intestazione lì e poi copiarlo

49
00:03:48,710 --> 00:03:53,960
nel ContactComponent e quindi aggiornarlo come contattaci.

50
00:03:53,960 --> 00:03:57,680
Salviamo le modifiche a tutti i file e

51
00:03:57,680 --> 00:04:02,469
quindi diamo un'occhiata all'applicazione risultante.

52
00:04:02,469 --> 00:04:05,725
Andando all'applicazione nel nostro browser,

53
00:04:05,725 --> 00:04:08,570
se ora navighiamo al ContactComponent,

54
00:04:08,570 --> 00:04:12,680
possiamo vedere che i dettagli del ContactComponent sono visualizzati

55
00:04:12,680 --> 00:04:16,790
qui tra l'intestazione e il piè di pagina come ci aspettiamo.

56
00:04:16,790 --> 00:04:18,590
Quindi, all'interno del ContactComponent,

57
00:04:18,590 --> 00:04:22,370
abbiamo il titolo Contattaci

58
00:04:22,370 --> 00:04:26,390
lì e poi alcune informazioni sulla posizione in cui ho visualizzato l'indirizzo.

59
00:04:26,390 --> 00:04:28,490
Quindi, questo è simile all'indirizzo che

60
00:04:28,490 --> 00:04:30,740
abbiamo nel piè di pagina quindi non ho intenzione di spiegare che in

61
00:04:30,740 --> 00:04:36,050
dettaglio allora abbiamo un'altra parte qui dove includiamo la Mappa della nostra posizione.

62
00:04:36,050 --> 00:04:37,490
Non abbiamo intenzione di farlo al momento,

63
00:04:37,490 --> 00:04:41,990
stiamo andando a lasciare come vuoto e poi anche vedere che ho

64
00:04:41,990 --> 00:04:48,150
tre pulsanti che ho incluso qui per Call, Skype, ed Email.

65
00:04:48,150 --> 00:04:52,354
Questi tre pulsanti sono attivati nella nostra applicazione

66
00:04:52,354 --> 00:04:57,910
e sto usando il tappetino sollevato pulsante per rendere questi tre pulsanti.

67
00:04:57,910 --> 00:05:00,980
Quindi, puoi vedere che questi pulsanti sembrano diversi

68
00:05:00,980 --> 00:05:05,080
dagli altri pulsanti che hai incluso nella tua applicazione lì.

69
00:05:05,080 --> 00:05:10,870
Quindi, questo è un componente pulsante sollevato dal nostro materiale angolare lì.

70
00:05:10,870 --> 00:05:14,195
Quindi, dopo aver visto il ContactComponent e

71
00:05:14,195 --> 00:05:17,675
il fatto che siamo in grado di navigare al ContactComponent.

72
00:05:17,675 --> 00:05:20,560
Ora, dagli altri componenti,

73
00:05:20,560 --> 00:05:22,730
diamo una rapida occhiata al

74
00:05:22,730 --> 00:05:29,250
codice HTML che abbiamo incluso per il modello per il nostro ContactComponent.

75
00:05:29,250 --> 00:05:33,335
Andando a contactcomponent.html, vedrai che abbiamo

76
00:05:33,335 --> 00:05:38,720
il titolo per questa pagina incluso usando questo div

77
00:05:38,720 --> 00:05:42,965
qui e il secondo div dentro qui con FxFlex

78
00:05:42,965 --> 00:05:48,020
include le informazioni sulla posizione e quindi questo all'interno di queste informazioni sulla posizione,

79
00:05:48,020 --> 00:05:51,260
sto ancora definendo un altro div che mi permetterà per

80
00:05:51,260 --> 00:05:55,480
includere più viste in questo altro div qui.

81
00:05:55,480 --> 00:05:57,290
Quindi, all'interno di questo, sto definendo

82
00:05:57,290 --> 00:06:00,410
un altro div con la colonna di layout degli effetti e la riga del livello degli effetti.

83
00:06:00,410 --> 00:06:09,675
Quindi, questo è un modo nidificato di definire le mie viste CSS Flex qui.

84
00:06:09,675 --> 00:06:11,270
Quindi, all'interno di questo,

85
00:06:11,270 --> 00:06:14,990
sto usando una vista Flex div con FxFlex 50 quindi

86
00:06:14,990 --> 00:06:18,900
occupa una metà e poi FxFlex offset di 20 pixel.

87
00:06:18,900 --> 00:06:26,300
Quindi, questa vista CSS sarà spostata a destra di 20 pixel quindi ho

88
00:06:26,300 --> 00:06:29,300
qualche margine lì e poi abbiamo

89
00:06:29,300 --> 00:06:33,800
l'indirizzo incluso qui e poi giù qui sotto,

90
00:06:33,800 --> 00:06:36,080
puoi vedere che all'interno di un altro div,

91
00:06:36,080 --> 00:06:42,690
ho un tag con il pulsante sollevato mat ad esso associato.

92
00:06:42,690 --> 00:06:45,740
Questo è ciò che causa i pulsanti sollevati che

93
00:06:45,740 --> 00:06:49,140
abbiamo nella parte inferiore della pagina Contatti lì.

94
00:06:49,140 --> 00:06:51,050
Quindi, tre di loro qui.

95
00:06:51,050 --> 00:06:52,730
Uno per il numero di telefono.

96
00:06:52,730 --> 00:07:00,425
Uno per Skype e uno per l'e-mail qui e nota anche che sto facendo uso

97
00:07:00,425 --> 00:07:04,010
delle icone Font Awesome per ciascuno di essi e poi la

98
00:07:04,010 --> 00:07:08,350
mappa della tua posizione in un altro div qui.

99
00:07:08,350 --> 00:07:13,690
Quindi, entrambi racchiudono all'interno di questo div esterno che è racchiuso di nuovo all'interno del div.

100
00:07:13,690 --> 00:07:20,555
Quindi, modo nidificato di definire i layout flessibili per le nostre diverse parti qui.

101
00:07:20,555 --> 00:07:23,465
Quindi, questo è tutto per il ContactComponent.

102
00:07:23,465 --> 00:07:29,329
Ora lo abbiamo integrato nella nostra applicazione a pagina singola.

103
00:07:29,329 --> 00:07:32,445
Ora, andiamo al DishService.

104
00:07:32,445 --> 00:07:36,440
Ora, nel DishService insieme al metodo

105
00:07:36,440 --> 00:07:39,005
GetDises, introdurrò altri due metodi.

106
00:07:39,005 --> 00:07:42,350
Un metodo chiamato getDish,

107
00:07:42,350 --> 00:07:50,950
un piatto specifico e quindi identificherò il piatto con un id specificato qui.

108
00:07:50,950 --> 00:07:52,460
Quindi, l'id

109
00:07:52,460 --> 00:08:01,885
sarebbe e che specificherebbe darmi il piatto con l'id corrispondente a questo numero.

110
00:08:01,885 --> 00:08:04,640
Quindi questo sarà un altro metodo che aggiungerò

111
00:08:04,640 --> 00:08:09,870
e aggiungerò anche un altro metodo chiamato getFeaturedDish.

112
00:08:13,750 --> 00:08:17,495
Quindi, questo piatto in primo piano utilizzerà

113
00:08:17,495 --> 00:08:22,460
la proprietà in primo piano che abbiamo aggiunto

114
00:08:22,460 --> 00:08:27,995
e quindi restituirà il piatto per il quale la funzione è impostata su true.

115
00:08:27,995 --> 00:08:33,330
Quindi, questo è il modo in cui puoi selezionare un piatto specifico e poi renderlo disponibile.

116
00:08:33,330 --> 00:08:37,970
Ora, il motivo per cui ho quel flag in primo piano è che quando la funzione è impostata su true,

117
00:08:37,970 --> 00:08:41,680
quel particolare piatto verrà reso su homeComponent.

118
00:08:41,680 --> 00:08:44,455
Ora, come selezioniamo questi piatti?

119
00:08:44,455 --> 00:08:47,185
Quindi, aggiungiamo il codice per questo.

120
00:08:47,185 --> 00:08:49,050
Quindi, per il GetDish,

121
00:08:49,050 --> 00:08:57,650
ho bisogno di restituire qualcosa dalla costante dei piatti che ho già lì.

122
00:08:57,650 --> 00:08:59,600
Quindi, dalla costante dei piatti,

123
00:08:59,600 --> 00:09:05,525
userò il modo di JavaScript di fare il filtraggio di un array.

124
00:09:05,525 --> 00:09:09,470
Quindi, il filtraggio di un array mi aiuterà a selezionare

125
00:09:09,470 --> 00:09:13,565
solo quegli elementi dall'array che

126
00:09:13,565 --> 00:09:16,985
corrispondono a un particolare criterio che verranno specificati

127
00:09:16,985 --> 00:09:21,530
all'interno del filtro qui e poi tra loro restituirò solo il primo.

128
00:09:21,530 --> 00:09:25,050
Ora, si dà il caso che quando specifichi un id,

129
00:09:25,050 --> 00:09:28,960
selezionerà solo un elemento ma poi diventerà un array.

130
00:09:28,960 --> 00:09:33,150
Quindi, da quell'array, ho bisogno di estrarre quell'elemento in quell'array.

131
00:09:33,150 --> 00:09:37,320
Quindi, è per questo che sto usando tra parentesi graffe zero lì.

132
00:09:37,320 --> 00:09:41,010
Quindi, questo mi aiuterà a identificarmi.

133
00:09:41,010 --> 00:09:43,005
Quindi, come faccio a filtrare i miei piatti?

134
00:09:43,005 --> 00:09:47,140
Quindi, per ogni piatto nella mia lista di piatti,

135
00:09:47,140 --> 00:09:49,729
quindi questo è dove userò

136
00:09:49,729 --> 00:09:55,610
un'altra funzionalità di dattiloscritto chiamata come funzioni di freccia.

137
00:09:55,610 --> 00:10:01,575
La funzione freccia è un modo abbreviato di scrivere una funzione.

138
00:10:01,575 --> 00:10:04,090
Quindi, se sei abituato a scrivere funzioni,

139
00:10:04,090 --> 00:10:06,100
invece di scrivere la funzione elaboratamente dicendo

140
00:10:06,100 --> 00:10:09,850
funzione e poi tra parentesi piatto e così via,

141
00:10:09,850 --> 00:10:13,900
posso semplicemente scriverlo nei casi in cui la funzione è molto semplice,

142
00:10:13,900 --> 00:10:17,195
è molto facile scrivere questo come una funzione freccia qui.

143
00:10:17,195 --> 00:10:27,305
Quindi, qui, specificherò dicendo che l'id del piatto è uguale all'id.

144
00:10:27,305 --> 00:10:33,245
Quindi, quello che sto specificando qui è filtrare l'array di piatti ed estrarre

145
00:10:33,245 --> 00:10:40,360
solo quegli elementi dalla matrice per cui l'id del piatto.

146
00:10:40,360 --> 00:10:44,570
Quindi, ogni elemento qui viene identificato da questo parametro piatto qui.

147
00:10:44,570 --> 00:10:47,090
Quindi, per il quale l'id del piatto corrisponde all'

148
00:10:47,090 --> 00:10:50,360
id che è stato fornito come parametro per il piatto.

149
00:10:50,360 --> 00:10:53,810
Quindi, in questo modo estrarrai quel piatto specifico da

150
00:10:53,810 --> 00:10:59,400
questo array e poi restituirai quel piatto da questo metodo getDish.

151
00:10:59,710 --> 00:11:04,240
Le funzioni freccia mi hanno aiutato a scrivere codice in un modo più semplice.

152
00:11:04,240 --> 00:11:06,724
Se non ti piacciono le funzioni di freccia

153
00:11:06,724 --> 00:11:09,710
, puoi scriverle nel modo più convenzionale dicendo

154
00:11:09,710 --> 00:11:16,870
«function dish», e poi da questo restituirai dish.id triple uguale a id,

155
00:11:16,870 --> 00:11:19,005
quindi questo restituirà un booleano.

156
00:11:19,005 --> 00:11:22,960
Quando il filtro incontra un vero dentro qui,

157
00:11:22,960 --> 00:11:27,115
quegli elementi dai piatti saranno selezionati nella matrice.

158
00:11:27,115 --> 00:11:31,980
Quindi, questo è dove la tua conoscenza JavaScript viene a tuo vantaggio.

159
00:11:31,980 --> 00:11:34,060
Quindi, è necessario sapere come

160
00:11:34,060 --> 00:11:38,085
funziona un filtro JavaScript per aiutarti a capire come questo viene fatto.

161
00:11:38,085 --> 00:11:41,390
Ok, ora allo stesso modo per il piatto in primo piano,

162
00:11:41,390 --> 00:11:47,365
userò un metodo simile per estrarre dal mio

163
00:11:47,365 --> 00:11:51,620
array piatti usando un filtro qui, ma il filtro che

164
00:11:51,620 --> 00:11:57,000
definirò qui sarebbe di nuovo una funzione freccia qui.

165
00:11:58,410 --> 00:12:03,260
Ti abituerai alle funzioni di freccia e poi una volta che ci si abitua a loro,

166
00:12:03,260 --> 00:12:06,370
allora ti renderai conto di quanto siano semplici troppo a destra.

167
00:12:06,370 --> 00:12:11,380
Quindi, qui il modo per selezionarmi

168
00:12:11,380 --> 00:12:20,445
è la proprietà dish.featured perché questa dish.feature è già un booleano lì.

169
00:12:20,445 --> 00:12:25,720
Quindi, questo mi aiuterà a restituire il piatto in evidenza.

170
00:12:25,720 --> 00:12:27,355
Quindi, per qualunque sia il piatto,

171
00:12:27,355 --> 00:12:29,120
la caratteristica del piatto è vera.

172
00:12:29,120 --> 00:12:31,710
Quel piatto particolare sarà filtrato fuori

173
00:12:31,710 --> 00:12:35,330
dalla matrice di piatti e poi ci sarà solo un giorno.

174
00:12:35,330 --> 00:12:38,280
Ad ogni modo, dovresti

175
00:12:38,280 --> 00:12:42,210
assicurarti di questo in modo da impostare funzionalità solo su true per uno di questi,

176
00:12:42,210 --> 00:12:50,630
e poi lo uso perché questo filtro restituirà un sub array dall'array di piatti,

177
00:12:50,630 --> 00:12:52,300
quindi ho bisogno di selezionare quell'elemento.

178
00:12:52,300 --> 00:12:55,600
Ci sarà un singolo elemento lì all'indice zero.

179
00:12:55,600 --> 00:12:59,150
Quindi, sto usando l'indice zero per selezionare quell'elemento e restituirlo

180
00:12:59,150 --> 00:13:03,680
dal metodo piatto get featured qui.

181
00:13:03,680 --> 00:13:09,985
Quindi, questo completa l'aggiornamento al servizio di piatti.

182
00:13:09,985 --> 00:13:15,140
Per costruire il nostro modello di casa,

183
00:13:15,140 --> 00:13:21,195
presenteremo sulla vista casa un piatto selezionato,

184
00:13:21,195 --> 00:13:24,545
una promozione corrente selezionata dal ristorante

185
00:13:24,545 --> 00:13:29,785
e un leader aziendale selezionato dalla lista dei lettori.

186
00:13:29,785 --> 00:13:34,260
Il leader aziendale che è presente in prima pagina

187
00:13:34,260 --> 00:13:38,550
farà parte del tuo incarico che segue questa particolare lezione.

188
00:13:38,550 --> 00:13:40,380
Ma stiamo per includere ora,

189
00:13:40,380 --> 00:13:45,775
abbiamo un piatto in primo piano e la promozione in primo piano sulla prima pagina.

190
00:13:45,775 --> 00:13:50,170
Quindi, il che significa che ho bisogno di un servizio di promozione che restituisca

191
00:13:50,170 --> 00:13:55,250
la serie di promozioni che vengono condotte da questo particolare ristorante.

192
00:13:55,250 --> 00:14:01,095
Quindi, lasciami aggiungere un servizio di promozioni per la mia applicazione.

193
00:14:01,095 --> 00:14:04,005
Quindi, per farlo, nella cartella condivisa,

194
00:14:04,005 --> 00:14:12,140
creerò un nuovo file chiamato promotion.ts.

195
00:14:12,560 --> 00:14:18,410
Nella promotion.ts, creerò una classe, una

196
00:14:18,870 --> 00:14:29,125
promozione di classe e restituirò questa promozione qui.

197
00:14:29,125 --> 00:14:32,460
Allora, cosa contiene questa classe di promozione?

198
00:14:32,460 --> 00:14:36,529
Contiene una proprietà id,

199
00:14:36,529 --> 00:14:43,010
quindi contiene il nome per la promozione del ristorante.

200
00:14:43,010 --> 00:14:47,310
Quindi, per esempio, la promozione potrebbe essere come buffet di fine settimana.

201
00:14:47,310 --> 00:14:52,320
O il 10% di ogni singolo giorno all'

202
00:14:52,320 --> 00:14:57,845
ora di pranzo e cose del genere possono essere presentate sulla prima pagina dei tuoi ristoranti lì.

203
00:14:57,845 --> 00:15:01,280
Quindi, nome quindi includerò anche un'immagine,

204
00:15:01,280 --> 00:15:05,635
che deve essere della stringa di tipo l'URL dell'immagine,

205
00:15:05,635 --> 00:15:10,625
quindi etichetta che sarà una stringa.

206
00:15:10,625 --> 00:15:13,895
Prezzo anche una stringa.

207
00:15:13,895 --> 00:15:15,330
Ora, il lavoro implica,

208
00:15:15,330 --> 00:15:17,260
non mi vedi usare al momento,

209
00:15:17,260 --> 00:15:25,780
li porteremo in uso in uno degli esercizi successivi presentati Boolean.

210
00:15:25,780 --> 00:15:29,965
Quindi, si vede nuovamente il flag in primo piano visualizzato nella promozione anche,

211
00:15:29,965 --> 00:15:34,960
e quindi stringa di descrizione.

212
00:15:34,960 --> 00:15:38,380
Quindi, vedete che la promozione strutturata è praticamente

213
00:15:38,380 --> 00:15:42,840
simile alla struttura del piatto che abbiamo visto in precedenza.

214
00:15:42,840 --> 00:15:46,010
Quindi, questo e' il corso di promozione qui.

215
00:15:46,010 --> 00:15:48,090
Ora, insieme alla classe di promozione,

216
00:15:48,090 --> 00:15:50,980
ho bisogno di creare un'altra classe che

217
00:15:50,980 --> 00:16:00,615
esporta il set di promozione dire costante con le promozioni qui.

218
00:16:00,615 --> 00:16:04,240
Quindi qui, ho intenzione di importare

219
00:16:06,920 --> 00:16:11,024
la classe di promozione

220
00:16:11,024 --> 00:16:18,400
dal file promotion.ts,

221
00:16:18,400 --> 00:16:25,290
e quindi esporterei una costante chiamata promozione.

222
00:16:25,290 --> 00:16:32,395
Quindi, vedi che sto usando una struttura molto simile ai piatti qui.

223
00:16:32,395 --> 00:16:36,290
Quindi, si inizia a vedere che,

224
00:16:36,660 --> 00:16:40,790
quella struttura che abbiamo usato in precedenza per

225
00:16:40,790 --> 00:16:46,465
le promozioni per i piatti è utile anche per dichiarare promozioni.

226
00:16:46,465 --> 00:16:47,910
Se hai una struttura diversa,

227
00:16:47,910 --> 00:16:50,990
vedrai che con i leader la struttura sarà un po

228
00:16:50,990 --> 00:16:55,315
'diversa per l'oggetto JavaScript qui. Le promozioni.

229
00:16:55,315 --> 00:17:00,160
Ora, i dettagli di una promozione specifica

230
00:17:00,160 --> 00:17:02,790
che ho dato nelle istruzioni, quindi ti suggerisco di copiarlo e incollarlo da

231
00:17:02,790 --> 00:17:05,550
lì invece di digitare tutto qui.

232
00:17:05,550 --> 00:17:07,390
Quindi, lasciami andare avanti e copiare e incollare

233
00:17:07,390 --> 00:17:11,800
quell'oggetto JavaScript in questo array di oggetti JavaScript qui,

234
00:17:11,800 --> 00:17:13,510
quindi eccoti.

235
00:17:13,510 --> 00:17:20,475
La promozione ha un solo oggetto al momento.

236
00:17:20,475 --> 00:17:22,715
In futuro, possiamo aggiungerne di più.

237
00:17:22,715 --> 00:17:26,375
A questo punto, ne ho solo uno così ho appena aggiunto lì,

238
00:17:26,375 --> 00:17:31,265
e ho intenzione di usarlo e questa è la promozione in primo piano per il mio ristorante lì.

239
00:17:31,265 --> 00:17:33,045
Questa è solo promozione,

240
00:17:33,045 --> 00:17:35,820
quindi lasciami aggiornare le promozioni,

241
00:17:35,820 --> 00:17:37,465
questo è quello di cui ho bisogno.

242
00:17:37,465 --> 00:17:42,120
Quindi, ho intenzione di salvare le modifiche al file promotion.ts.

243
00:17:42,120 --> 00:17:46,820
Successivamente, creerò un altro servizio chiamato servizio di promozione.

244
00:17:46,820 --> 00:17:53,285
Quindi, per farlo, andiamo alla riga di comando al prompt dei comandi tipo

245
00:17:53,285 --> 00:18:02,005
ng generare servizi di sondaggi/promozione.

246
00:18:02,005 --> 00:18:05,105
Quindi, il servizio di promozione viene creato lì.

247
00:18:05,105 --> 00:18:08,500
Quindi, ora il PromotionService è in atto.

248
00:18:08,500 --> 00:18:13,575
Quindi, aggiungiamo le funzionalità per PromotionService.

249
00:18:13,575 --> 00:18:18,070
Quindi, andando al PromotionService,

250
00:18:18,070 --> 00:18:25,690
si vede che il PromotionService è ora incluso nella cartella dei servizi qui,

251
00:18:25,690 --> 00:18:28,615
quindi abbiamo bisogno di preparare un PromotionService.

252
00:18:28,615 --> 00:18:30,715
Quindi, nel PromotionService,

253
00:18:30,715 --> 00:18:33,170
ho intenzione di importare

254
00:18:37,170 --> 00:18:48,355
la promozione da condivisione/promozione,

255
00:18:48,355 --> 00:18:55,010
la classe di promozione e anche importare

256
00:18:57,000 --> 00:19:09,985
promozioni dalla classe condivisa/promozioni lì.

257
00:19:09,985 --> 00:19:11,885
Le promozioni costanti da lì.

258
00:19:11,885 --> 00:19:14,590
Ora, proprio come abbiamo avuto per il servizio di piatti,

259
00:19:14,590 --> 00:19:19,840
dobbiamo creare tre metodi all'interno del servizio PromozioniServizio.

260
00:19:19,840 --> 00:19:25,080
Quindi, quello che ho intenzione di fare è salvare me stesso il problema,

261
00:19:25,080 --> 00:19:27,450
andrò nel dish.service,

262
00:19:27,450 --> 00:19:29,750
e poi copiare questi tre,

263
00:19:29,750 --> 00:19:33,445
e poi incollarlo nel mio servizio di promozione,

264
00:19:33,445 --> 00:19:35,570
quindi basta modificare il codice.

265
00:19:35,570 --> 00:19:38,965
Ok, quindi dal servizio di promozione,

266
00:19:38,965 --> 00:19:46,505
ho bisogno di restituire GetPromotions e

267
00:19:46,505 --> 00:19:54,340
questo è del tipo di promozione e quindi questo restituirà PROMOZIONI,

268
00:19:54,340 --> 00:20:00,670
e quindi ottenere il secondo sarebbe la promozione

269
00:20:00,670 --> 00:20:08,505
che riceve nuovamente l'id della promozione,

270
00:20:08,505 --> 00:20:10,615
quindi ho intenzione di restituire

271
00:20:10,615 --> 00:20:20,830
promotions.Filter promo.id è id,

272
00:20:20,830 --> 00:20:26,780
quindi la promozione getFeatured.

273
00:20:26,780 --> 00:20:31,860
Quindi, puoi vedere che la struttura del Promotionservice è molto simile

274
00:20:31,860 --> 00:20:39,920
al dishservice e questo non sarebbe tipo di promozione,

275
00:20:39,920 --> 00:20:41,875
e questo restituirà

276
00:20:41,875 --> 00:20:52,145
promotions.Filter promo e questo sarà promo.featured e basta.

277
00:20:52,145 --> 00:20:55,030
Il mio PromotionService è pronto.

278
00:20:55,030 --> 00:20:59,695
Ora, ho intenzione di entrare nel componente di casa, e prepararlo, in

279
00:20:59,695 --> 00:21:02,115
modo che nel mio componente di casa,

280
00:21:02,115 --> 00:21:07,560
mostrerò un piatto in primo piano e una promozione in primo piano.

281
00:21:07,560 --> 00:21:10,820
La caratteristica, il piatto e la funzionalità/promozione saranno visualizzati nel

282
00:21:10,820 --> 00:21:15,690
componente home utilizzando il componente della scheda materiale angolare.

283
00:21:15,690 --> 00:21:19,675
Quindi, abbiamo bisogno di prima ottenere i dati nel nostro componente di casa,

284
00:21:19,675 --> 00:21:24,690
quindi questo è quello che faremo nel file di script di tipo componenti di casa lì.

285
00:21:24,690 --> 00:21:29,630
Quindi, andando al file di script di tipo componenti di casa, component.ts.

286
00:21:29,630 --> 00:21:44,330
Qui, ho bisogno di importare il piatto

287
00:21:44,330 --> 00:21:52,060
da condivisione/dish e anche il

288
00:21:52,060 --> 00:22:07,430
corrispondente dish.service da services/dish.service.

289
00:22:12,330 --> 00:22:17,495
Ok, ora farò anche la stessa cosa per le promozioni,

290
00:22:17,495 --> 00:22:21,465
quindi ho intenzione di copiarlo e incollarlo qui,

291
00:22:21,465 --> 00:22:23,120
e poi modificare questo,

292
00:22:23,120 --> 00:22:26,735
quindi questa sarebbe la promozione,

293
00:22:26,735 --> 00:22:31,315
questo sarebbe PromotionService,

294
00:22:31,315 --> 00:22:42,350
e poi la promozione, e poi questo sarebbe PromotionService.

295
00:22:42,790 --> 00:22:46,800
Quindi, con questo, abbiamo sia i

296
00:22:46,800 --> 00:22:50,205
servizi per piatti e piatti e il servizio di promozione disponibili per noi,

297
00:22:50,205 --> 00:22:52,485
all'interno della nostra componente di casa.

298
00:22:52,485 --> 00:22:54,660
Venendo ora al costruttore.

299
00:22:54,660 --> 00:23:01,180
Consente ora iniettare i due servizi qui,

300
00:23:02,280 --> 00:23:12,590
e renderli disponibili per le nostre applicazioni o servizio piatto,

301
00:23:25,490 --> 00:23:30,240
e il servizio di promozione iniettato qui.

302
00:23:30,240 --> 00:23:34,610
Quindi, con questo, abbiamo accesso a entrambi i servizi.

303
00:23:34,610 --> 00:23:38,650
Quindi ora all'interno del metodo ngOnInit,

304
00:23:38,650 --> 00:23:43,779
vado a prendere i due piatti in evidenza.

305
00:23:43,779 --> 00:23:51,770
Quindi, direi questo.dishservice.getFeatureddish

306
00:23:51,770 --> 00:23:59,520
e anche promozione,

307
00:24:03,690 --> 00:24:11,510
PromotionService e getFeaturedPromotion.

308
00:24:14,400 --> 00:24:18,820
Solo per essere completo,

309
00:24:18,820 --> 00:24:23,185
lasciami dichiarare il piatto qui come di

310
00:24:23,185 --> 00:24:32,025
tipo Dish e la promozione come di tipo Promozione qui.

311
00:24:32,025 --> 00:24:38,830
Quindi, questo dovrebbe chiarire tutti i valori che stiamo usando qui dentro.

312
00:24:38,830 --> 00:24:46,665
Quindi, con questo, completiamo l'aggiornamento al nostro file dattiloscritto dei componenti di casa.

313
00:24:46,665 --> 00:24:49,710
Passiamo ora al file modello,

314
00:24:49,710 --> 00:24:55,815
quindi aggiungiamo le due schede per visualizzare il piatto in primo piano e la promozione in primo piano.

315
00:24:55,815 --> 00:25:00,310
Ora, per questo, ti ho dato il codice nelle istruzioni.

316
00:25:00,310 --> 00:25:02,995
Quindi, ho intenzione di copiare quel codice e incollarlo qui.

317
00:25:02,995 --> 00:25:05,640
Sai già come creare carte,

318
00:25:05,640 --> 00:25:10,590
quindi saresti in grado di seguire facilmente il codice che incolla qui.

319
00:25:10,590 --> 00:25:17,095
Quindi, anche il modello dei componenti di casa viene aggiornato,

320
00:25:17,095 --> 00:25:20,830
quindi puoi vedere che ha due schede qui.

321
00:25:20,830 --> 00:25:26,550
Per uno, visualizzando il piatto e l'altro mostrando la promozione qui,

322
00:25:26,550 --> 00:25:33,030
e racchiuso all'interno di un div FxLayout qui.

323
00:25:33,030 --> 00:25:38,175
Quindi, salviamo le modifiche e poi diamo una rapida occhiata alla nostra applicazione.

324
00:25:38,175 --> 00:25:41,095
Dopo aver creato il servizio di promozione,

325
00:25:41,095 --> 00:25:45,470
abbiamo anche bisogno di includere il servizio di promozione in AppModule

326
00:25:45,470 --> 00:25:47,750
e renderlo disponibile per la nostra applicazione.

327
00:25:47,750 --> 00:25:49,840
Allora, andro' qui dentro,

328
00:25:49,840 --> 00:25:53,350
e poi importero'

329
00:25:53,350 --> 00:26:00,950
il servizio promozionale qui dentro.

330
00:26:03,150 --> 00:26:07,915
Quindi, ha dichiarato il servizio di promozione

331
00:26:07,915 --> 00:26:16,030
come uno dei provider

332
00:26:16,030 --> 00:26:19,720
nel mio file AppModule.ts qui.

333
00:26:19,720 --> 00:26:21,580
Quindi, nel file AppModule,

334
00:26:21,580 --> 00:26:23,415
sto richiedendo entrambi questi

335
00:26:23,415 --> 00:26:25,480
e quindi salvare le modifiche.

336
00:26:25,480 --> 00:26:27,055
Andando al browser,

337
00:26:27,055 --> 00:26:29,455
ora puoi vedere che nel browser,

338
00:26:29,455 --> 00:26:34,150
il componente home ora mostra le due carte,

339
00:26:34,150 --> 00:26:40,580
una per il piatto in primo piano e una per la promozione in primo piano qui.

340
00:26:40,580 --> 00:26:43,850
Quindi, si può vedere che le due auto sono visualizzate qui.

341
00:26:43,850 --> 00:26:50,505
Ora posso passare alla pagina Menu

342
00:26:50,505 --> 00:26:54,405
e quindi anche alla pagina Contatti.

343
00:26:54,405 --> 00:26:56,690
La pagina Informazioni su non è ancora presente,

344
00:26:56,690 --> 00:27:02,070
verrà compilata la pagina Informazioni come parte del secondo incarico.

345
00:27:02,070 --> 00:27:07,490
Dando un'occhiata alla stessa applicazione su una dimensione dello schermo più piccola,

346
00:27:07,490 --> 00:27:11,200
quindi questo è uno schermo iPhone 6 Plus.

347
00:27:11,200 --> 00:27:16,225
Diamo un'occhiata al componente di casa e a uno schermo di iPhone 6 Plus.

348
00:27:16,225 --> 00:27:24,490
Puoi vedere che piatto in primo piano e promozione in primo piano sulla homepage lì.

349
00:27:24,490 --> 00:27:29,820
Quindi, il menu che abbiamo visto in precedenza,

350
00:27:29,820 --> 00:27:35,150
e anche la pagina di contatto visualizzata qui.

351
00:27:35,150 --> 00:27:41,395
Quindi, puoi vedere che ora la nostra applicazione a pagina singola è molto più configurata.

352
00:27:41,395 --> 00:27:43,120
Tranne per l'About,

353
00:27:43,120 --> 00:27:46,875
che faremo nel secondo incarico.

354
00:27:46,875 --> 00:27:54,345
Un altro piccolo cambiamento che puoi fare nel file HTML dei componenti di intestazione,

355
00:27:54,345 --> 00:27:57,470
è che insieme alla direttiva del collegamento del router,

356
00:27:57,470 --> 00:28:06,880
il percorso angolare supporta anche un'altra direttiva chiamata routeLinkActive.

357
00:28:06,880 --> 00:28:14,660
Questo ci permette di applicare alcune classi al particolare elemento qui.

358
00:28:14,660 --> 00:28:16,305
Quindi, in questo caso,

359
00:28:16,305 --> 00:28:20,090
se questo link diventa attivo rispetto a qualsiasi cosa io specifichi qui,

360
00:28:20,090 --> 00:28:24,980
verrà applicato come classe a questo particolare elemento lì.

361
00:28:24,980 --> 00:28:28,309
Quindi, ho intenzione di specificare una classe chiamata attiva.

362
00:28:28,309 --> 00:28:32,280
Quindi qui, sto specificando RouterLinkActive con active.

363
00:28:32,280 --> 00:28:35,265
Quindi, se definisco una classe CSS chiamata attiva,

364
00:28:35,265 --> 00:28:39,300
la classe verrà applicata a questo link,

365
00:28:39,300 --> 00:28:46,975
ogni volta che questa particolare vista viene mostrata nella pagina delle applicazioni qui.

366
00:28:46,975 --> 00:28:53,250
Copierò la stessa cosa e la applicherò a tutti i pulsanti rimanenti,

367
00:28:53,250 --> 00:28:56,735
dove ho già definito il collegamento del router.

368
00:28:56,735 --> 00:28:59,600
Quindi, ho intenzione di applicare la classe RouterLinkActive,

369
00:28:59,600 --> 00:29:04,195
alla Home, al Menu e al Contattaci.

370
00:29:04,195 --> 00:29:08,535
Ora, questo significa anche che dovrei definire una classe CSS attiva.

371
00:29:08,535 --> 00:29:14,360
Quindi, per farlo, andrò nel file SESS dei componenti di intestazione,

372
00:29:14,360 --> 00:29:16,590
e quindi definirò una classe attiva qui,

373
00:29:16,590 --> 00:29:21,400
quindi definirò la classe attiva proprio lì.

374
00:29:21,400 --> 00:29:22,870
Per definire la classe attiva,

375
00:29:22,870 --> 00:29:31,220
aggiungerò un'altra variabile di colore qui chiamata background-moredark.

376
00:29:33,030 --> 00:29:39,080
Quindi, il colore corrispondente è 4527A0,

377
00:29:39,900 --> 00:29:47,480
questa è una versione più scura di questo colore scuro di sfondo, 4527A0.

378
00:29:47,480 --> 00:29:50,055
Quindi, per il mio attivo,

379
00:29:50,055 --> 00:29:52,720
quello che farò è, dalla classe attiva,

380
00:29:52,720 --> 00:29:57,725
lascerò che la classe definisca uno sfondo,

381
00:29:57,725 --> 00:29:59,560
imposti lo sfondo di

382
00:29:59,560 --> 00:30:09,410
quell'elemento sul colore di background-moredark.

383
00:30:10,170 --> 00:30:18,270
Quindi, quando quella particolare vista è selezionata e mostrata nella pagina,

384
00:30:18,270 --> 00:30:21,630
allora questa classe attiva verrà applicata a

385
00:30:21,630 --> 00:30:24,670
quel particolare tag A

386
00:30:24,670 --> 00:30:30,340
lì dalla direttiva attiva collegamento router che abbiamo applicato qui.

387
00:30:30,340 --> 00:30:34,750
Ora, che cambiamento fa questo causa sulla nostra pagina web.

388
00:30:34,750 --> 00:30:36,460
Ora, andando alla nostra pagina web,

389
00:30:36,460 --> 00:30:40,685
vedremo cosa questo introduce sulla nostra pagina web.

390
00:30:40,685 --> 00:30:43,390
Andando alla nostra applicazione,

391
00:30:43,390 --> 00:30:45,360
ora si vede che quando siamo

392
00:30:45,360 --> 00:30:52,125
nella vista home nel componente home visualizzato qui, la sua vista corrispondente.

393
00:30:52,125 --> 00:30:59,870
Quindi, il pulsante Home qui ha un colore di sfondo diverso che viene

394
00:30:59,870 --> 00:31:03,670
applicato perché la classe attiva è stata aggiunta in perché

395
00:31:03,670 --> 00:31:08,150
definiamo RouterLinkActive per attivo qui.

396
00:31:08,150 --> 00:31:09,510
Quindi, quella classe viene applicata.

397
00:31:09,510 --> 00:31:11,985
Allo stesso modo, quando si seleziona il menu,

398
00:31:11,985 --> 00:31:17,205
si vede che il menu è evidenziato nell'intestazione,

399
00:31:17,205 --> 00:31:20,025
e la vista menu è mostrata qui,

400
00:31:20,025 --> 00:31:21,795
e in modo simile per il contenuto.

401
00:31:21,795 --> 00:31:29,035
Ora, questo ci permette di vedere a colpo d'occhio su quale pagare particolare vista VR,

402
00:31:29,035 --> 00:31:31,760
nella nostra applicazione a pagina singola.

403
00:31:31,760 --> 00:31:38,145
Quindi, questo è un ulteriore po 'di miglioramento offerta per l'interfaccia utente,

404
00:31:38,145 --> 00:31:42,255
che ci permette di vedere alcune caratteristiche interessanti.

405
00:31:42,255 --> 00:31:46,004
Anche se, non aggiunge molto alla funzionalità dell'applicazione,

406
00:31:46,004 --> 00:31:54,370
ma basta aggiungere qualche piccola funzionalità che sarà un'utile aggiunta alla tua applicazione.

407
00:31:54,370 --> 00:31:58,615
Quindi, con questo, completiamo questo esercizio.

408
00:31:58,615 --> 00:32:02,275
In questo esercizio, abbiamo lavorato per integrare

409
00:32:02,275 --> 00:32:07,495
il componente di contatto nella nostra applicazione a pagina singola.

410
00:32:07,495 --> 00:32:15,800
Abbiamo anche progettato un paio di schede che abbiamo incluso nel componente home

411
00:32:15,800 --> 00:32:20,180
e aggiunto alcune nuove funzionalità alla nostra applicazione.

412
00:32:20,180 --> 00:32:28,310
Questo è un buon momento per salvare le modifiche al tuo repository Git con il messaggio,

413
00:32:28,310 --> 00:32:31,520
Single Page Application Part 1.