È ora di iniziare il primo incarico di questo corso.
In questo compito, si sta andando a lavorare con componenti angolari.
Creerai un nuovo componente chiamato dishdetail
per aggiungerlo alla tua applicazione angolare
e aggiornerai il suo modello, in modo che mostri i dettagli di un piatto specifico.
In precedenza, nell'esercizio precedente, abbiamo introdotto una scheda nel nostro componente menu.
Rimuoveremo quella scheda e includeremo invece il
componente dishdetail al posto di quella scheda in modo che il
componente dishdetail sia in grado di visualizzare le sue informazioni
in quella parte dello schermo.
Il tuo primo compito è quello di creare il componente dishdetail.
Alla fine della prima attività, una volta creato il componente dishdetail,
quindi, nel file del modello dei componenti del menu,
sostituirai quella scheda con il selettore
del componente dishdetail, in
modo che i dettagli del componente dishdetail vengano visualizzati a
destra sotto il menu nel componente menu.
Abbiamo già visto come è possibile aggiungere quel
selettore da un componente a un altro componente.
Quando abbiamo creato il componente del menu, lo
abbiamo incluso nel componente dell'app, in
modo che alla fine del primo compito, questo sarebbe il risultato sul tuo browser,
dove, invece della scheda che mostra i dettagli del piatto,
vedrai queste parole chiamate «dishdetail works!» nella parte inferiore della pagina.
Una volta completata questa operazione, scaricherai
un file modello di componenti dishdetail preconfigurato con alcuni pezzi mancanti,
quindi sostituirai in posizione nel modello del tuo componente dishdetail.
Una volta sostituito il modello del componente dishdetail fornito,
vedrai la pagina aggiornata in questo modo.
Quindi, vedrete due parti nella pagina qui, una che dice
«Mostra qui i dettagli del piatto».
Userai un componente di carta per creare i dettagli del piatto,
e mostralo qui.
Inoltre, visualizzerai anche una serie di commenti sul piatto
nella seconda parte di questo componente qui.
Ora, per iniziare, nelle istruzioni di assegnazione,
ti ho fornito un nuovo oggetto JavaScript
contenente i dettagli del piatto,
compresi i commenti su quel piatto.
Userete queste informazioni per costruire
questi due: il componente della scheda per visualizzare
i dettagli del piatto, e l'elenco dei commenti qui.
Il secondo compito è quello di aggiornare il
file TypeScript per includere la nuova variabile piatto in là,
quindi utilizzare la variabile piatto con il componente della scheda,
quindi preparare il componente della scheda qui per visualizzare i dettagli del piatto.
Una volta completato il secondo compito,
nella tua applicazione vedrai che,
appena sotto il menu, vedrai i dettagli delle
informazioni fornite sul piatto vengono visualizzati in una scheda come questa qui, in
modo da poter vedere il titolo, l'immagine
e anche la descrizione fatta qui sotto.
Ora, dopo aver completato questo, passerai alla terza attività.
Nella terza attività, userai i commenti che sono anche racchiusi all'interno del
piatto che ti abbiamo fornito nell'oggetto JavaScript,
e quindi usalo per costruire e visualizzare un elenco di commenti qui.
Alla fine del terzo compito,
questo è ciò che vedrai essere visualizzato sul lato destro del tuo piatto.
Puoi vedere che hai un'intestazione qui con
la parola «Commenti»,
e quindi hai un elenco di commenti visualizzati qui.
Le informazioni per la costruzione di questi commenti sono disponibili all'interno
dell'oggetto JavaScript piatto che abbiamo dato per voi.
In particolare, si noti che questo è il commento effettivo,
questo è il numero di stelle date a quel commento,
e questo è dove si visualizza il nome dell'autore con due trattini davanti,
e nota, alla fine, viene visualizzata la data qui.
Per poter costruire questa data qui,
è necessario utilizzare una pipe angolare denominata Date.
Abbiamo già visto l'uso di una pipe incorporata chiamata maiuscola
nell'esercizio precedente,
quindi è sufficiente utilizzare la pipe Data per creare questa
data da visualizzare a destra del nome dell'autore qui.
Quindi, questi sono i suggerimenti per iniziare con
questa terza attività nel tuo primo incarico.
Divertiti a completare il primo incarico.
Qualunque sia la risorsa necessaria,
il file modello preconfigurato semicompletato
e l'oggetto JavaScript piatto sono entrambi disponibili
nelle istruzioni per questa assegnazione.