[MUSIC]
Se hai un sito web statico,
allora hai tutti i dati necessari per costruire il tuo sito web.
E sarà creato una volta e il tuo sito web è pronto per l'uso.
Ma molti siti web in questi giorni sono guidati dai dati del backend.
L' applicazione Web recupererà i dati da un server back-end e
quindi utilizzerà i dati per impaginare dinamicamente i contenuti sul tuo sito web, o
anche aggiornare i contenuti sul tuo sito web.
Quindi questo richiede che i dati fluiscano dal backend attraverso
l'applicazione web al DOM.
E qualsiasi interazione dell'utente sul DOM dovrebbe essere ricondotta alla tua applicazione web.
Quindi questo richiede la comunicazione tra il DOM e
il tuo componente nel framework angolare per esempio.
Diamo un'occhiata a come questo accade all'interno del quadro angolare e
con un po 'più di dettaglio.
Ciò che abbiamo imparato finora è come viene preparato un componente.
Così abbiamo visto che il componente ha due parti principali, il
file dattiloscritto in cui è definita l'architettura del componente, e le proprietà.
E i metodi di e poi hai il modello che
definisce come il contenuto è disposto e aggiunto nel DOM.
Quindi il modello è quello che sta per fornire da un componente per
occupare una parte della tua pagina web.
Quindi il modello forma il mezzo di comunicazione al tuo DOM.
E questo modello richiede che i dati siano ottenuti dal tuo componente
per rendere parti del contenuto sul tuo modello e
corrispondentemente all'interno del DOM della tua pagina web.
Ora, se non hai avuto il lusso di un framework come Angular,
devi occuparti degli interi dettagli su come
i dati fluiscono dal sito dell'applicazione al DOM.
E come gli eventi di interazione dell'utente che
il causato nel DOM verranno inviati alla tua applicazione.
Fortunatamente, con frame funziona come Angular,
supportano tutti questi comportamenti intrinsecamente.
Ora abbiamo già visto un uso del flusso di dati da una
proprietà dei componenti al modello negli esercizi precedenti.
Dove abbiamo usato le doppie parentesi graffe per fornire informazioni
che vanno da una variabile nel codice TypeScript del componente, al modello.
Vedremo altri modi, e
poi anche nell'esercizio che segue, faremo uso di questo,
per modificare l'applicazione angolare che abbiamo sviluppato finora.
Quello di cui abbiamo parlato, finora, è l'associazione dei dati,
un meccanismo per coordinare il flusso di informazioni tra il modello e
il componente, o tra il DOM e il componente.
A livello di componente, è una sorta di proprietà o
un metodo che deve essere fornito al modello o richiamato dal DOM.
O sul lato del modello, potrebbero essere alcune informazioni
richieste dal modello per essere renderizzate nel DOM o
anche dal DOM catturato e inviato al componente.
Quindi tutto ciò richiede che i dati fluiscano dal componente al
modello o agli eventi che vengono raccolti dal DOM o
vengano inviati al componente affinché agisca su tali eventi.
Ora questo può essere facilmente gestito in quadro angolare utilizzando quattro diversi
tipi di flusso di informazioni che riassumeremo nella prossima diapositiva.
Tornando all'interazione tra componente e modello,
abbiamo già visto il primo tipo di interazione tra il componente e
il modello in cui il valore di una proprietà stava fluendo nel modello.
Così abbiamo visto l'uso del nome del piatto,
la descrizione del piatto, i dettagli del commento del piatto e così
via essere forniti al fine di rendere le informazioni nel vostro modello.
Quindi è lì che stavamo usando le doppie parentesi graffe per racchiudere il fatto che
un valore dal tuo componente viene utilizzato nel tuo modello.
Un altro tipo di flusso di informazioni che vedrai è dove
specifichi un tipo di proprietà associata a un tag tra parentesi quadre.
E quindi assegnarlo come valore da una delle proprietà nel componente.
Questo tipo di approccio vedremo nell'esercizio che segue
subito dopo questa lezione.
Quindi qui vorremmo specificare qualcosa tra parentesi quadre.
Quindi attenzione per
un esempio di ciò nell'esercizio in cui parlerò di più su questo.
Allo stesso modo, se hai un evento generato vicino a DOM,
quell'evento può comportare la chiamata a un gestore o a
un metodo Nel tuo componente che si occuperà della gestione di questo evento.
Quindi i metodi che verranno invocati dagli
eventi dal tuo DOM sono indicati come gestori.
Quindi, l'handle non è altro che, come ho detto un metodo, che potrebbe anche
essere passato in alcuni parametri all'interno dei metodi del gestore lì.
Più tardi, quando guardiamo i moduli, vedremo un binding dati bidirezionale.
Così tutti e tre che abbiamo visto finora, il flusso del valore dal
componente al modello o la proprietà assegnato a un valore o
l'evento assegnato a un gestore per gestire l'evento.
Tutti questi sono quelli che chiamiamo associazioni di dati a senso unico perché
fluiscono solo in una direzione.
Puoi anche avere un flusso bidirezionale in cui potresti vederlo anche
nella sintassi ciò che specificheresti con parentesi quadre.
E poi racchiuso all'interno di quello con parentesi standard.
Un dentro lì specificherai qualcosa come un ngModel.
Vedrai l'uso di questo quando si forma più avanti nel modulo successivo.
Quindi questo è dove assegnerai una proprietà a quello.
Quindi in questo caso il flusso di informazioni è bidirezionale.
Quindi qualsiasi modifica nel tuo DOM verrà riflessa di nuovo nella tua proprietà e
nel componente.
Qualsiasi modifica nella proprietà del componente verrà riflessa nel DOM.
Si noti la sintassi specifica che usiamo per
specificare il ngModel in questo esempio qui.
Usiamo una parentesi quadra e al suo interno usiamo la parentesi standard lì dentro.
Consentitemi ora di riassumere ciò che abbiamo appena imparato circa
l'associazione dati nella diapositiva precedente in questa tabella.
Quindi, in questa tabella, stiamo mostrando i diversi modi in cui viene utilizzato l'associazione dati.
Associazione dati unidirezionale dall'origine dati alla destinazione vista quindi
dal componente al DOM,
stiamo usando una doppia espressione parentesi graffa all'interno di lì.
Questo è ciò che chiamiamo Interpolazione come un esempio di cui,
sarebbe il nome del piatto, racchiuso all'interno delle doppie parentesi, come abbiamo visto,
usato negli esercizi, nel modulo precedente.
Poi abbiamo, il secondo tipo in cui si racchiude il bersaglio
all'interno di una parentesi quadra e poi assegnarlo a un'espressione sul lato destro.
Queste espressioni potrebbero essere espressioni JavaScript con alcune limitazioni.
Gli esempi che vedremo normalmente
userebbero una proprietà da una delle classi lì.
Quindi, questo è quello che abbiamo indicato come un attributo
di proprietà, e esempio di cui vedrete nell'esercizio che segue questa lezione.
Dove si vedrebbe l'uso di un piatto, racchiuso all'interno di una parentesi quadra,
equiparato a un SelectedDish, che è una variabile dichiarata all'interno di un componente.
Questo può anche essere espresso usando un bind-target,
un modo di esprimere la stessa cosa.
Quindi entrambi questi se racchiudi un obiettivo tra parentesi quadre o bind-target.
Quindi, per esempio, puoi vedere il piatto legante.
Quindi, qualunque sia il modo in cui esprimi questo, entrambi si riferiscono alla stessa cosa.
Quindi l'attributo di proprietà viene specificato o lo stile di classe viene specificato.
Ora il flusso unidirezionale di informazioni dalla destinazione vista all'
origine dati viene solitamente espresso con la destinazione
racchiusa tra parentesi qui o può anche essere espresso come on-target.
E sul lato destro sarebbe una dichiarazione.
Un' istruzione potrebbe essere una sorta di espressione JavaScript in genere
sarebbe nella invocazione di un metodo all'interno di un componente.
Bene vedrai un esempio nell'esercizio che segue dove
avresti fatto clic all'interno della parentesi e assegnato a onSelect.
Che è un metodo descritto all'interno di una
classe di componenti lì con un piatto parametro che viene fornito a questo metodo lì.
L' associazione dei dati a due vie come abbiamo visto sarebbe con scudiero e parentesi, parentesi
e parentesi scudiero che è equiparato a un'espressione.
Vedremo associazione dati bidirezionale come un insieme con forme un po 'più tardi dove
si utilizzerà qualcosa come un ngModel, racchiuso tra parentesi quadre e
parentesi, equiparato a qualcosa come dish.name.
Che collega l'elemento modulo a una proprietà di
un oggetto JavaScript, nel nostro componente.
Puoi anche esprimerlo come bindon-target.
Che e' un altro modo di dire la stessa cosa.
Ora, questa associazione dati bidirezionale che facciamo
a volte viene definita «banana in una scatola».
Quindi, se guardi le parentesi quadre con la parentesi al suo interno,
sembra una banana in una scatola.
Quindi, potresti vedere che questo viene usato in alcuni della documentazione o
in alcuni dei blog che potresti leggere su Internet.
Espandendo ulteriormente sulle destinazioni di binding che abbiamo visto,
le destinazioni di binding sono le proprietà che sono dichiarate sul lato sinistro
della dichiarazione di associazione di quella dichiarazione di associazione dati.
In genere, racchiuso tra parentesi quadre o tra parentesi o entrambi.
Quindi il lato destro dell'espressione di associazione sono le loro origini di binding,
quindi che sono tipicamente come le proprietà di un oggetto JavaScript
, o una variabile, o un'espressione che definiamo sul lato destro.
Se si definiscono le proprietà target associate al selettivo di un componente.
Questo è un modo per passare informazioni in un componente
o inviare informazioni da un componente a un altro componente.
Quindi questo facilita la comunicazione tra i componenti.
Quindi vedresti l'uso di un decoratore come @Input associato a
un modo di inviare informazioni da un componente a un altro componente.
Vedremo un esempio di questo utilizzo nell'esercizio
che segue questa lezione qui.
Analogamente, potete utilizzare il decoratore di output per specificare un evento
da un componente che viene passato a un altro componente.
Quindi entrambi questi usi sono effettivamente utilizzati per comunicare tra i componenti.
[ MUSIC]