1
00:00:00,031 --> 00:00:04,477
[MUSIC]

2
00:00:04,477 --> 00:00:09,184
Ora che abbiamo avuto una rapida introduzione ai

3
00:00:09,184 --> 00:00:15,564
framework MVM e MVVM, ai servizi angolari e anche all'iniezione delle dipendenze,

4
00:00:15,564 --> 00:00:21,003
passiamo ora al nostro prossimo esercizio in cui creeremo il nostro

5
00:00:21,003 --> 00:00:26,442
primo servizio angolare e poi inietterlo nel nostro componente e

6
00:00:26,442 --> 00:00:29,710
farne uso all'interno del nostro componente.

7
00:00:29,710 --> 00:00:34,370
Per iniziare, vai all'applicazione nel

8
00:00:34,370 --> 00:00:38,629
pad editor all'interno della cartella App,

9
00:00:38,629 --> 00:00:44,237
crea una nuova sottocartella e chiamala come Servizi.

10
00:00:44,237 --> 00:00:52,918
Ora faremo uso di Angular CLI per aggiungere un nuovo servizio alla nostra applicazione angolare.

11
00:00:52,918 --> 00:00:57,953
Per fare ciò, al prompt digitare ng

12
00:00:57,953 --> 00:01:04,673
generare servizio e servizi/piatto.

13
00:01:04,673 --> 00:01:11,480
Quindi questo creerà un nuovo servizio nella cartella Servizi denominata servizio piatto.

14
00:01:11,480 --> 00:01:16,815
Quindi, una volta creato questo, si vede che due file vengono creati

15
00:01:16,815 --> 00:01:23,837
dalla CLI angolare chiamata DishService.ts e dish.service.specter.ts.

16
00:01:23,837 --> 00:01:30,010
Questo è usato per testare il nostro servizio angolare mentre ne parleremo più avanti.

17
00:01:30,010 --> 00:01:35,361
Il secondo è dove creeremo il nostro servizio piatto e

18
00:01:35,361 --> 00:01:42,516
poi inietteremo che nel nostro modulo app e utilizzarlo nel nostro componente di menu.

19
00:01:42,516 --> 00:01:47,550
Andando all'editor, apriamo il file dish.service.ts.

20
00:01:47,550 --> 00:01:52,618
Ora, quando apri questo file, noti immediatamente qui la prima

21
00:01:52,618 --> 00:01:58,108
affermazione che dice, import {Iniettabile} da '@angular /core'.

22
00:01:58,108 --> 00:02:02,791
Quindi questo iniettabile ci permette di definire questo

23
00:02:02,791 --> 00:02:06,674
decoratore iniettabile a qualsiasi classe che abbiamo definito qui.

24
00:02:06,674 --> 00:02:10,730
Quindi puoi vedere che stiamo definendo una classe qui chiamata DishService.

25
00:02:10,730 --> 00:02:15,532
Utilizzando questo decoratore iniettabile per questo servizio piatto,

26
00:02:15,532 --> 00:02:21,030
stiamo rendendo questo oggetto ora iniettabile all'interno della nostra applicazione.

27
00:02:21,030 --> 00:02:25,481
Quindi questo è ciò che consente l'iniezione di dipendenza da utilizzare all'interno della nostra

28
00:02:25,481 --> 00:02:26,490
applicazione.

29
00:02:26,490 --> 00:02:30,345
Quindi, una volta dichiarata la classe come iniettabile,

30
00:02:30,345 --> 00:02:36,746
ora configuriamo il nostro DishService per fornire alcune informazioni per noi.

31
00:02:36,746 --> 00:02:39,119
Quindi qui, ho intenzione di importare,

32
00:02:42,757 --> 00:02:51,413
la classe Dish dalla cartella condivisa,

33
00:02:51,413 --> 00:02:55,354
e anche importare,

34
00:02:58,307 --> 00:03:01,887
La costante PIASS da,

35
00:03:08,402 --> 00:03:11,574
Cartella condivisa qui.

36
00:03:11,574 --> 00:03:14,353
Quindi, una volta che ho importato questi due,

37
00:03:14,353 --> 00:03:19,432
ora il mio servizio può essere configurato per fornire il valore per noi.

38
00:03:19,432 --> 00:03:24,246
Quindi all'interno del servizio,

39
00:03:24,246 --> 00:03:29,370
aggiungerò un nuovo metodo chiamata getDises, e

40
00:03:29,370 --> 00:03:35,753
questo metodo tornerà in una serie di piatti qui.

41
00:03:35,753 --> 00:03:41,098
E, quindi questo metodo restituirà la costante PIATTI

42
00:03:41,098 --> 00:03:45,722
che abbiamo importato nel nostro DishService.

43
00:03:45,722 --> 00:03:50,239
Con questo, il nostro DishService è ora configurato per

44
00:03:50,239 --> 00:03:54,866
fornire quell'array di oggetti JavaScript PIASS a qualsiasi

45
00:03:54,866 --> 00:03:59,398
altra parte della nostra applicazione che lo richiede.

46
00:03:59,398 --> 00:04:03,862
Ora, prima che ciò accada, dobbiamo prendere questo servizio e

47
00:04:03,862 --> 00:04:06,660
quindi iniettare nella nostra applicazione.

48
00:04:06,660 --> 00:04:11,652
Per fare ciò, apriremo il file.ts modulo app.

49
00:04:11,652 --> 00:04:17,214
Quindi all'interno del file.ts del modulo app, subito dopo aver importato

50
00:04:17,214 --> 00:04:22,333
i componenti proprio lì, ho intenzione di importare il,

51
00:04:25,974 --> 00:04:34,950
DishService proprio lì.

52
00:04:34,950 --> 00:04:36,618
E questo è importato da,

53
00:04:42,730 --> 00:04:46,466
Servizi DishService qui.

54
00:04:46,466 --> 00:04:53,885
Quindi, una volta importato che, allora dichiareremo questo DishService come un provider.

55
00:04:53,885 --> 00:04:58,121
Quindi, se vai nel decoratore del modulo ng, quindi

56
00:04:58,121 --> 00:05:03,170
vedi questa terza proprietà qui chiamata provider.

57
00:05:03,170 --> 00:05:05,960
Quindi abbiamo dichiarazioni, importazioni e fornitori.

58
00:05:05,960 --> 00:05:11,176
Quindi ogni volta che si dispone di un servizio che si desidera rendere disponibile per

59
00:05:11,176 --> 00:05:14,860
tutti i componenti da parte di questo modulo.

60
00:05:14,860 --> 00:05:21,170
Quindi lo specificherai come provider all'interno del modulo qui.

61
00:05:21,170 --> 00:05:25,618
Quindi, proprio lì, sto per dire, DishService, qui.

62
00:05:25,618 --> 00:05:31,036
Quindi con questo, il mio DishService ora diventa disponibile per il resto dell'applicazione.

63
00:05:31,036 --> 00:05:32,186
Ora, come puo' succedere?

64
00:05:32,186 --> 00:05:36,948
La dipendenza iniettabile di Angular esamina queste informazioni che

65
00:05:36,948 --> 00:05:41,944
abbiamo dichiarato qui e poi decide che ha bisogno di creare un DishService e

66
00:05:41,944 --> 00:05:44,382
inietta ovunque sia richiesto.

67
00:05:44,382 --> 00:05:47,092
Ora, come facciamo a usare quel servizio?

68
00:05:47,092 --> 00:05:52,674
Vediamo che nel componente del menu stavamo ottenendo in precedenza

69
00:05:52,674 --> 00:06:00,180
la costante PIATS direttamente importando dal file piatti condivisi qui.

70
00:06:00,180 --> 00:06:04,681
Ora questo non è il modo ideale per ottenere le informazioni,

71
00:06:04,681 --> 00:06:09,812
invece di legare le informazioni direttamente nel tuo componente,

72
00:06:09,812 --> 00:06:14,685
dovresti piuttosto lasciare che un servizio recuperi quelle informazioni per te.

73
00:06:14,685 --> 00:06:19,065
In seguito, possiamo riprogettare il nostro servizio per essere in grado di andare a

74
00:06:19,065 --> 00:06:24,579
recuperare le stesse informazioni da un server back-end se lo si desidera.

75
00:06:24,579 --> 00:06:28,396
In effetti, questo è quello che faremo in alcuni degli esercizi successivi.

76
00:06:28,396 --> 00:06:33,384
Quindi delegerai la responsabilità di recuperare le informazioni al servizio

77
00:06:33,384 --> 00:06:37,814
e quindi farai solo uso del servizio all'interno di questo componente del menu.

78
00:06:37,814 --> 00:06:43,627
Quindi cancelleremo questo componente piatti da lì e

79
00:06:43,627 --> 00:06:48,806
invece importeremo che DishService qui.

80
00:06:48,806 --> 00:06:52,105
E questo DishService viene importato da,

81
00:06:57,492 --> 00:07:04,140
services/dish.service file qui.

82
00:07:04,140 --> 00:07:09,744
Quindi, dopo aver aggiunto questo ora abbiamo fatto una parte del lavoro.

83
00:07:09,744 --> 00:07:14,774
Ora abbiamo bisogno di rendere disponibile questo servizio per il nostro componente per fare uso.

84
00:07:14,774 --> 00:07:18,107
Quindi è qui che scenderemo a questo costruttore qui.

85
00:07:18,107 --> 00:07:19,769
In questo costruttore, quindi

86
00:07:19,769 --> 00:07:23,813
ora vedi l'uso del costruttore all'interno della nostra classe qui.

87
00:07:23,813 --> 00:07:28,814
Quindi in questo costruttore vedremo

88
00:07:28,814 --> 00:07:35,609
DishService e DishService privati qui.

89
00:07:35,609 --> 00:07:38,377
Quindi questo è del tipo DishService, quindi

90
00:07:38,377 --> 00:07:43,914
quando lo dichiari nel costruttore, quando viene creato questo componente,

91
00:07:43,914 --> 00:07:48,771
allora questo DishService che hai iniettato nel modulo dell'app.

92
00:07:48,771 --> 00:07:52,222
Quando lo inietti nel modulo dell'app,

93
00:07:52,222 --> 00:07:56,177
creerà un singolo oggetto DishService.

94
00:07:56,177 --> 00:08:00,956
E quell'oggetto DishService sarà reso disponibile all'interno del tuo

95
00:08:00,956 --> 00:08:02,123
componente di menu qui.

96
00:08:02,123 --> 00:08:09,606
Quindi ora puoi chiamare i metodi che questo DishService fornisce per

97
00:08:09,606 --> 00:08:13,780
te al fine di fare il lavoro per tuo conto.

98
00:08:13,780 --> 00:08:15,847
Quindi una volta che hai messo lì dentro,

99
00:08:15,847 --> 00:08:20,333
ora ci rendiamo conto che non abbiamo più questa costante PIATTI qui.

100
00:08:20,333 --> 00:08:24,311
Quindi ho bisogno di recuperare in qualche modo queste informazioni.

101
00:08:24,311 --> 00:08:29,138
Ora è qui che ho intenzione di sfruttare il servizio che ho a disposizione per

102
00:08:29,138 --> 00:08:31,023
recuperare le informazioni per noi.

103
00:08:31,023 --> 00:08:33,257
Dove prendiamo queste informazioni?

104
00:08:33,257 --> 00:08:38,058
Quindi, questo è dove andremo a prendere l'aiuto di questo metodo del ciclo di vita chiamato

105
00:08:38,058 --> 00:08:38,801
ngOnInit.

106
00:08:38,801 --> 00:08:43,861
Quindi, quando dichiari questo metodo del ciclo di vita chiamato ngOnInit nella tua

107
00:08:43,861 --> 00:08:49,561
applicazione, quindi vedi che nella classe, dici implementa OnInit.

108
00:08:49,561 --> 00:08:54,239
Quindi l'implementazione di questo OnInit richiede di

109
00:08:54,239 --> 00:08:59,570
implementare questo metodo ngOnInit come parte della tua classe qui.

110
00:08:59,570 --> 00:09:02,461
Quindi all'interno di questo metodo ngOnInit,

111
00:09:02,461 --> 00:09:07,450
ora puoi chiedere al servizio di recuperare queste informazioni.

112
00:09:07,450 --> 00:09:08,690
Perché è così?

113
00:09:08,690 --> 00:09:13,560
Questo metodo del ciclo di vita verrà eseguito

114
00:09:13,560 --> 00:09:19,040
dal framework angolare ogni volta che questo componente viene istanziato.

115
00:09:19,040 --> 00:09:23,770
Quindi ogni volta che questo componente viene creato, questo metodo verrà eseguito.

116
00:09:23,770 --> 00:09:30,324
Quindi, quando viene eseguito quel metodo, allora a quel punto posso andare a

117
00:09:30,324 --> 00:09:34,623
prendere i piatti dal DishService.

118
00:09:34,623 --> 00:09:36,839
Quindi posso dire DishService, e

119
00:09:36,839 --> 00:09:42,700
poi saprai che hai il metodo getDishService all'interno di DishService.

120
00:09:42,700 --> 00:09:48,105
Puoi invocare il metodo per recuperare i piatti per te.

121
00:09:48,105 --> 00:09:52,511
Ora, quando lo facciamo, allora l'oggetto piatti sarà fornito

122
00:09:52,511 --> 00:09:56,090
dal servizio a noi attraverso questo metodo getDises.

123
00:09:56,090 --> 00:10:03,829
E che può essere messo nei nostri piatti variabile locale che abbiamo definito qui.

124
00:10:03,829 --> 00:10:08,563
Quindi, con questo, completiamo l'aggiornamento

125
00:10:08,563 --> 00:10:12,847
a tutti i nostri file di applicazione.

126
00:10:12,847 --> 00:10:18,993
Andiamo a dare un'occhiata rapida all'applicazione Angular risultante.

127
00:10:18,993 --> 00:10:23,507
Passando al browser, ora puoi vedere che nel browser l'

128
00:10:23,507 --> 00:10:26,030
applicazione Angular rende proprio come prima.

129
00:10:26,030 --> 00:10:30,342
In questa versione, come avete visto, le informazioni sui piatti

130
00:10:30,342 --> 00:10:34,967
sta per essere recuperato nel vostro componente facendo uso del servizio.

131
00:10:34,967 --> 00:10:38,847
Il servizio a sua volta recupererà queste informazioni per te.

132
00:10:38,847 --> 00:10:41,945
Ora in questo momento stiamo mantenendo il servizio molto semplice.

133
00:10:41,945 --> 00:10:46,105
Il servizio restituisce semplicemente questo valore costante che abbiamo definito qui.

134
00:10:46,105 --> 00:10:50,738
In seguito, puoi immaginare di estendere il servizio per andare a

135
00:10:50,738 --> 00:10:54,042
recuperare queste informazioni dal server back-end.

136
00:10:54,042 --> 00:10:55,428
Quando ciò accade,

137
00:10:55,428 --> 00:11:00,489
il recupero delle informazioni non sarà più istantaneo.

138
00:11:00,489 --> 00:11:04,911
Questo è dove avremmo bisogno dell'aiuto delle promesse e

139
00:11:04,911 --> 00:11:11,022
anche dell'approccio JavaScript reattivo per supportare questo ritardo e

140
00:11:11,022 --> 00:11:17,881
affrontare il ritardo nel recupero delle informazioni all'interno della nostra applicazione.

141
00:11:17,881 --> 00:11:21,699
Ne parleremo in modo più dettagliato nel prossimo modulo.

142
00:11:21,699 --> 00:11:26,683
Per ora, la nostra applicazione funzionerà bene, quindi puoi selezionare uno di

143
00:11:26,683 --> 00:11:32,370
quei piatti e le informazioni verranno visualizzate proprio come prima.

144
00:11:32,370 --> 00:11:38,250
Con questo, competiamo questo esercizio in cui impariamo le basi dei servizi angolari.

145
00:11:38,250 --> 00:11:41,700
E abbiamo anche visto come possiamo fare uso del servizio Angular,

146
00:11:41,700 --> 00:11:46,118
all'interno del nostro componente applicazioni.

147
00:11:46,118 --> 00:11:51,682
Questo è un buon momento per fare un commit git con i servizi di base del messaggio.

148
00:11:51,682 --> 00:11:57,797
[ MUSICA].