1
00:00:00,000 --> 00:00:04,711
[MUSIC]

2
00:00:04,711 --> 00:00:06,798
Se hai un sito web statico,

3
00:00:06,798 --> 00:00:11,735
allora hai tutti i dati necessari per costruire il tuo sito web.

4
00:00:11,735 --> 00:00:17,790
E sarà creato una volta e il tuo sito web è pronto per l'uso.

5
00:00:17,790 --> 00:00:23,208
Ma molti siti web in questi giorni sono guidati dai dati del backend.

6
00:00:23,208 --> 00:00:27,721
L' applicazione Web recupererà i dati da un server back-end e

7
00:00:27,721 --> 00:00:32,667
quindi utilizzerà i dati per impaginare dinamicamente i contenuti sul tuo sito web, o

8
00:00:32,667 --> 00:00:35,474
anche aggiornare i contenuti sul tuo sito web.

9
00:00:35,474 --> 00:00:40,090
Quindi questo richiede che i dati fluiscano dal backend attraverso

10
00:00:40,090 --> 00:00:43,410
l'applicazione web al DOM.

11
00:00:43,410 --> 00:00:49,161
E qualsiasi interazione dell'utente sul DOM dovrebbe essere ricondotta alla tua applicazione web.

12
00:00:49,161 --> 00:00:54,211
Quindi questo richiede la comunicazione tra il DOM e

13
00:00:54,211 --> 00:00:59,920
il tuo componente nel framework angolare per esempio.

14
00:00:59,920 --> 00:01:03,268
Diamo un'occhiata a come questo accade all'interno del quadro angolare e

15
00:01:03,268 --> 00:01:04,880
con un po 'più di dettaglio.

16
00:01:06,900 --> 00:01:11,420
Ciò che abbiamo imparato finora è come viene preparato un componente.

17
00:01:11,420 --> 00:01:17,129
Così abbiamo visto che il componente ha due parti principali, il

18
00:01:17,129 --> 00:01:24,380
file dattiloscritto in cui è definita l'architettura del componente, e le proprietà.

19
00:01:24,380 --> 00:01:29,480
E i metodi di e poi hai il modello che

20
00:01:29,480 --> 00:01:34,430
definisce come il contenuto è disposto e aggiunto nel DOM.

21
00:01:34,430 --> 00:01:38,410
Quindi il modello è quello che sta per fornire da un componente per

22
00:01:38,410 --> 00:01:41,640
occupare una parte della tua pagina web.

23
00:01:41,640 --> 00:01:45,870
Quindi il modello forma il mezzo di comunicazione al tuo DOM.

24
00:01:45,870 --> 00:01:52,210
E questo modello richiede che i dati siano ottenuti dal tuo componente

25
00:01:53,450 --> 00:02:00,040
per rendere parti del contenuto sul tuo modello e

26
00:02:00,040 --> 00:02:04,105
corrispondentemente all'interno del DOM della tua pagina web.

27
00:02:05,250 --> 00:02:11,662
Ora, se non hai avuto il lusso di un framework come Angular,

28
00:02:11,662 --> 00:02:16,442
devi occuparti degli interi dettagli su come

29
00:02:16,442 --> 00:02:21,586
i dati fluiscono dal sito dell'applicazione al DOM.

30
00:02:21,586 --> 00:02:25,696
E come gli eventi di interazione dell'utente che

31
00:02:25,696 --> 00:02:29,980
il causato nel DOM verranno inviati alla tua applicazione.

32
00:02:29,980 --> 00:02:33,851
Fortunatamente, con frame funziona come Angular,

33
00:02:33,851 --> 00:02:38,520
supportano tutti questi comportamenti intrinsecamente.

34
00:02:38,520 --> 00:02:44,047
Ora abbiamo già visto un uso del flusso di dati da una

35
00:02:44,047 --> 00:02:48,504
proprietà dei componenti al modello negli esercizi precedenti.

36
00:02:48,504 --> 00:02:54,433
Dove abbiamo usato le doppie parentesi graffe per fornire informazioni

37
00:02:54,433 --> 00:03:02,050
che vanno da una variabile nel codice TypeScript del componente, al modello.

38
00:03:02,050 --> 00:03:03,830
Vedremo altri modi, e

39
00:03:03,830 --> 00:03:08,670
poi anche nell'esercizio che segue, faremo uso di questo,

40
00:03:08,670 --> 00:03:14,370
per modificare l'applicazione angolare che abbiamo sviluppato finora.

41
00:03:15,570 --> 00:03:18,975
Quello di cui abbiamo parlato, finora, è l'associazione dei dati,

42
00:03:18,975 --> 00:03:23,972
un meccanismo per coordinare il flusso di informazioni tra il modello e

43
00:03:23,972 --> 00:03:27,468
il componente, o tra il DOM e il componente.

44
00:03:27,468 --> 00:03:30,627
A livello di componente, è una sorta di proprietà o

45
00:03:30,627 --> 00:03:35,215
un metodo che deve essere fornito al modello o richiamato dal DOM.

46
00:03:35,215 --> 00:03:38,269
O sul lato del modello, potrebbero essere alcune informazioni

47
00:03:38,269 --> 00:03:41,890
richieste dal modello per essere renderizzate nel DOM o

48
00:03:41,890 --> 00:03:45,905
anche dal DOM catturato e inviato al componente.

49
00:03:45,905 --> 00:03:50,886
Quindi tutto ciò richiede che i dati fluiscano dal componente al

50
00:03:50,886 --> 00:03:55,868
modello o agli eventi che vengono raccolti dal DOM o

51
00:03:55,868 --> 00:04:01,735
vengano inviati al componente affinché agisca su tali eventi.

52
00:04:01,735 --> 00:04:07,967
Ora questo può essere facilmente gestito in quadro angolare utilizzando quattro diversi

53
00:04:07,967 --> 00:04:14,850
tipi di flusso di informazioni che riassumeremo nella prossima diapositiva.

54
00:04:14,850 --> 00:04:19,150
Tornando all'interazione tra componente e modello,

55
00:04:19,150 --> 00:04:22,820
abbiamo già visto il primo tipo di interazione tra il componente e

56
00:04:22,820 --> 00:04:27,800
il modello in cui il valore di una proprietà stava fluendo nel modello.

57
00:04:27,800 --> 00:04:31,130
Così abbiamo visto l'uso del nome del piatto,

58
00:04:31,130 --> 00:04:35,720
la descrizione del piatto, i dettagli del commento del piatto e così

59
00:04:35,720 --> 00:04:40,910
via essere forniti al fine di rendere le informazioni nel vostro modello.

60
00:04:40,910 --> 00:04:47,210
Quindi è lì che stavamo usando le doppie parentesi graffe per racchiudere il fatto che

61
00:04:47,210 --> 00:04:53,030
un valore dal tuo componente viene utilizzato nel tuo modello.

62
00:04:53,030 --> 00:04:58,160
Un altro tipo di flusso di informazioni che vedrai è dove

63
00:04:58,160 --> 00:05:04,930
specifichi un tipo di proprietà associata a un tag tra parentesi quadre.

64
00:05:04,930 --> 00:05:11,670
E quindi assegnarlo come valore da una delle proprietà nel componente.

65
00:05:12,790 --> 00:05:17,010
Questo tipo di approccio vedremo nell'esercizio che segue

66
00:05:17,010 --> 00:05:19,210
subito dopo questa lezione.

67
00:05:19,210 --> 00:05:22,160
Quindi qui vorremmo specificare qualcosa tra parentesi quadre.

68
00:05:22,160 --> 00:05:23,100
Quindi attenzione per

69
00:05:23,100 --> 00:05:28,880
un esempio di ciò nell'esercizio in cui parlerò di più su questo.

70
00:05:28,880 --> 00:05:32,640
Allo stesso modo, se hai un evento generato vicino a DOM,

71
00:05:32,640 --> 00:05:36,840
quell'evento può comportare la chiamata a un gestore o a

72
00:05:36,840 --> 00:05:42,280
un metodo Nel tuo componente che si occuperà della gestione di questo evento.

73
00:05:42,280 --> 00:05:45,310
Quindi i metodi che verranno invocati dagli

74
00:05:45,310 --> 00:05:50,220
eventi dal tuo DOM sono indicati come gestori.

75
00:05:50,220 --> 00:05:55,670
Quindi, l'handle non è altro che, come ho detto un metodo, che potrebbe anche

76
00:05:55,670 --> 00:06:01,039
essere passato in alcuni parametri all'interno dei metodi del gestore lì.

77
00:06:02,790 --> 00:06:09,620
Più tardi, quando guardiamo i moduli, vedremo un binding dati bidirezionale.

78
00:06:09,620 --> 00:06:16,190
Così tutti e tre che abbiamo visto finora, il flusso del valore dal

79
00:06:16,190 --> 00:06:20,910
componente al modello o la proprietà assegnato a un valore o

80
00:06:20,910 --> 00:06:26,380
l'evento assegnato a un gestore per gestire l'evento.

81
00:06:26,380 --> 00:06:29,780
Tutti questi sono quelli che chiamiamo associazioni di dati a senso unico perché

82
00:06:31,010 --> 00:06:33,240
fluiscono solo in una direzione.

83
00:06:33,240 --> 00:06:37,810
Puoi anche avere un flusso bidirezionale in cui potresti vederlo anche

84
00:06:37,810 --> 00:06:41,200
nella sintassi ciò che specificheresti con parentesi quadre.

85
00:06:41,200 --> 00:06:44,590
E poi racchiuso all'interno di quello con parentesi standard.

86
00:06:44,590 --> 00:06:47,772
Un dentro lì specificherai qualcosa come un ngModel.

87
00:06:47,772 --> 00:06:52,575
Vedrai l'uso di questo quando si forma più avanti nel modulo successivo.

88
00:06:52,575 --> 00:06:55,215
Quindi questo è dove assegnerai una proprietà a quello.

89
00:06:55,215 --> 00:06:58,675
Quindi in questo caso il flusso di informazioni è bidirezionale.

90
00:06:58,675 --> 00:07:03,789
Quindi qualsiasi modifica nel tuo DOM verrà riflessa di nuovo nella tua proprietà e

91
00:07:03,789 --> 00:07:05,029
nel componente.

92
00:07:05,029 --> 00:07:08,785
Qualsiasi modifica nella proprietà del componente verrà riflessa nel DOM.

93
00:07:08,785 --> 00:07:12,700
Si noti la sintassi specifica che usiamo per

94
00:07:12,700 --> 00:07:15,918
specificare il ngModel in questo esempio qui.

95
00:07:15,918 --> 00:07:21,100
Usiamo una parentesi quadra e al suo interno usiamo la parentesi standard lì dentro.

96
00:07:22,390 --> 00:07:25,640
Consentitemi ora di riassumere ciò che abbiamo appena imparato circa

97
00:07:25,640 --> 00:07:30,620
l'associazione dati nella diapositiva precedente in questa tabella.

98
00:07:30,620 --> 00:07:36,890
Quindi, in questa tabella, stiamo mostrando i diversi modi in cui viene utilizzato l'associazione dati.

99
00:07:36,890 --> 00:07:41,610
Associazione dati unidirezionale dall'origine dati alla destinazione vista quindi

100
00:07:41,610 --> 00:07:45,370
dal componente al DOM,

101
00:07:45,370 --> 00:07:51,720
stiamo usando una doppia espressione parentesi graffa all'interno di lì.

102
00:07:51,720 --> 00:07:55,970
Questo è ciò che chiamiamo Interpolazione come un esempio di cui,

103
00:07:55,970 --> 00:08:01,080
sarebbe il nome del piatto, racchiuso all'interno delle doppie parentesi, come abbiamo visto,

104
00:08:01,080 --> 00:08:06,030
usato negli esercizi, nel modulo precedente.

105
00:08:06,030 --> 00:08:11,345
Poi abbiamo, il secondo tipo in cui si racchiude il bersaglio

106
00:08:11,345 --> 00:08:17,385
all'interno di una parentesi quadra e poi assegnarlo a un'espressione sul lato destro.

107
00:08:17,385 --> 00:08:22,450
Queste espressioni potrebbero essere espressioni JavaScript con alcune limitazioni.

108
00:08:22,450 --> 00:08:25,600
Gli esempi che vedremo normalmente

109
00:08:25,600 --> 00:08:30,960
userebbero una proprietà da una delle classi lì.

110
00:08:30,960 --> 00:08:34,390
Quindi, questo è quello che abbiamo indicato come un attributo

111
00:08:34,390 --> 00:08:38,878
di proprietà, e esempio di cui vedrete nell'esercizio che segue questa lezione.

112
00:08:38,878 --> 00:08:44,333
Dove si vedrebbe l'uso di un piatto, racchiuso all'interno di una parentesi quadra,

113
00:08:44,333 --> 00:08:51,650
equiparato a un SelectedDish, che è una variabile dichiarata all'interno di un componente.

114
00:08:51,650 --> 00:08:56,770
Questo può anche essere espresso usando un bind-target,

115
00:08:56,770 --> 00:08:58,680
un modo di esprimere la stessa cosa.

116
00:08:58,680 --> 00:09:04,630
Quindi entrambi questi se racchiudi un obiettivo tra parentesi quadre o bind-target.

117
00:09:04,630 --> 00:09:07,550
Quindi, per esempio, puoi vedere il piatto legante.

118
00:09:07,550 --> 00:09:11,820
Quindi, qualunque sia il modo in cui esprimi questo, entrambi si riferiscono alla stessa cosa.

119
00:09:11,820 --> 00:09:17,528
Quindi l'attributo di proprietà viene specificato o lo stile di classe viene specificato.

120
00:09:17,528 --> 00:09:22,367
Ora il flusso unidirezionale di informazioni dalla destinazione vista all'

121
00:09:22,367 --> 00:09:27,401
origine dati viene solitamente espresso con la destinazione

122
00:09:27,401 --> 00:09:32,780
racchiusa tra parentesi qui o può anche essere espresso come on-target.

123
00:09:32,780 --> 00:09:36,610
E sul lato destro sarebbe una dichiarazione.

124
00:09:36,610 --> 00:09:41,523
Un' istruzione potrebbe essere una sorta di espressione JavaScript in genere

125
00:09:41,523 --> 00:09:46,532
sarebbe nella invocazione di un metodo all'interno di un componente.

126
00:09:46,532 --> 00:09:51,668
Bene vedrai un esempio nell'esercizio che segue dove

127
00:09:51,668 --> 00:09:57,611
avresti fatto clic all'interno della parentesi e assegnato a onSelect.

128
00:09:57,611 --> 00:10:02,700
Che è un metodo descritto all'interno di una

129
00:10:02,700 --> 00:10:10,540
classe di componenti lì con un piatto parametro che viene fornito a questo metodo lì.

130
00:10:10,540 --> 00:10:15,920
L' associazione dei dati a due vie come abbiamo visto sarebbe con scudiero e parentesi, parentesi

131
00:10:15,920 --> 00:10:21,320
e parentesi scudiero che è equiparato a un'espressione.

132
00:10:21,320 --> 00:10:26,380
Vedremo associazione dati bidirezionale come un insieme con forme un po 'più tardi dove

133
00:10:26,380 --> 00:10:31,843
si utilizzerà qualcosa come un ngModel, racchiuso tra parentesi quadre e

134
00:10:31,843 --> 00:10:35,647
parentesi, equiparato a qualcosa come dish.name.

135
00:10:35,647 --> 00:10:40,438
Che collega l'elemento modulo a una proprietà di

136
00:10:40,438 --> 00:10:44,640
un oggetto JavaScript, nel nostro componente.

137
00:10:46,260 --> 00:10:50,240
Puoi anche esprimerlo come bindon-target.

138
00:10:50,240 --> 00:10:52,401
Che e' un altro modo di dire la stessa cosa.

139
00:10:52,401 --> 00:10:56,866
Ora, questa associazione dati bidirezionale che facciamo

140
00:10:56,866 --> 00:11:00,630
a volte viene definita «banana in una scatola».

141
00:11:00,630 --> 00:11:04,630
Quindi, se guardi le parentesi quadre con la parentesi al suo interno,

142
00:11:04,630 --> 00:11:06,110
sembra una banana in una scatola.

143
00:11:06,110 --> 00:11:11,550
Quindi, potresti vedere che questo viene usato in alcuni della documentazione o

144
00:11:11,550 --> 00:11:14,580
in alcuni dei blog che potresti leggere su Internet.

145
00:11:15,970 --> 00:11:19,920
Espandendo ulteriormente sulle destinazioni di binding che abbiamo visto,

146
00:11:19,920 --> 00:11:23,720
le destinazioni di binding sono le proprietà che sono dichiarate sul lato sinistro

147
00:11:23,720 --> 00:11:27,310
della dichiarazione di associazione di quella dichiarazione di associazione dati.

148
00:11:27,310 --> 00:11:33,280
In genere, racchiuso tra parentesi quadre o tra parentesi o entrambi.

149
00:11:33,280 --> 00:11:40,850
Quindi il lato destro dell'espressione di associazione sono le loro origini di binding,

150
00:11:40,850 --> 00:11:45,670
quindi che sono tipicamente come le proprietà di un oggetto JavaScript

151
00:11:45,670 --> 00:11:51,930
, o una variabile, o un'espressione che definiamo sul lato destro.

152
00:11:51,930 --> 00:11:58,970
Se si definiscono le proprietà target associate al selettivo di un componente.

153
00:11:58,970 --> 00:12:03,140
Questo è un modo per passare informazioni in un componente

154
00:12:03,140 --> 00:12:07,320
o inviare informazioni da un componente a un altro componente.

155
00:12:07,320 --> 00:12:12,490
Quindi questo facilita la comunicazione tra i componenti.

156
00:12:12,490 --> 00:12:18,258
Quindi vedresti l'uso di un decoratore come @Input associato a

157
00:12:18,258 --> 00:12:24,442
un modo di inviare informazioni da un componente a un altro componente.

158
00:12:24,442 --> 00:12:29,194
Vedremo un esempio di questo utilizzo nell'esercizio

159
00:12:29,194 --> 00:12:32,690
che segue questa lezione qui.

160
00:12:32,690 --> 00:12:37,600
Analogamente, potete utilizzare il decoratore di output per specificare un evento

161
00:12:37,600 --> 00:12:42,070
da un componente che viene passato a un altro componente.

162
00:12:42,070 --> 00:12:49,472
Quindi entrambi questi usi sono effettivamente utilizzati per comunicare tra i componenti.

163
00:12:49,472 --> 00:12:52,759
[ MUSIC]