1 00:00:03,649 --> 00:00:10,244 È ora di iniziare il primo incarico di questo corso. 2 00:00:10,244 --> 00:00:14,564 In questo compito, si sta andando a lavorare con componenti angolari. 3 00:00:14,564 --> 00:00:18,172 Creerai un nuovo componente chiamato dishdetail 4 00:00:18,172 --> 00:00:21,690 per aggiungerlo alla tua applicazione angolare 5 00:00:21,690 --> 00:00:29,399 e aggiornerai il suo modello, in modo che mostri i dettagli di un piatto specifico. 6 00:00:29,399 --> 00:00:37,645 In precedenza, nell'esercizio precedente, abbiamo introdotto una scheda nel nostro componente menu. 7 00:00:37,645 --> 00:00:41,954 Rimuoveremo quella scheda e includeremo invece il 8 00:00:41,954 --> 00:00:46,929 componente dishdetail al posto di quella scheda in modo che il 9 00:00:46,929 --> 00:00:53,009 componente dishdetail sia in grado di visualizzare le sue informazioni 10 00:00:53,009 --> 00:00:56,263 in quella parte dello schermo. 11 00:00:56,263 --> 00:01:01,435 Il tuo primo compito è quello di creare il componente dishdetail. 12 00:01:01,435 --> 00:01:08,060 Alla fine della prima attività, una volta creato il componente dishdetail, 13 00:01:08,060 --> 00:01:11,810 quindi, nel file del modello dei componenti del menu, 14 00:01:11,810 --> 00:01:18,020 sostituirai quella scheda con il selettore 15 00:01:18,020 --> 00:01:19,430 del componente dishdetail, in 16 00:01:19,430 --> 00:01:23,510 modo che i dettagli del componente dishdetail vengano visualizzati a 17 00:01:23,510 --> 00:01:27,579 destra sotto il menu nel componente menu. 18 00:01:27,579 --> 00:01:31,564 Abbiamo già visto come è possibile aggiungere quel 19 00:01:31,564 --> 00:01:35,750 selettore da un componente a un altro componente. 20 00:01:35,750 --> 00:01:37,693 Quando abbiamo creato il componente del menu, lo 21 00:01:37,693 --> 00:01:41,500 abbiamo incluso nel componente dell'app, in 22 00:01:41,500 --> 00:01:48,710 modo che alla fine del primo compito, questo sarebbe il risultato sul tuo browser, 23 00:01:48,710 --> 00:01:53,454 dove, invece della scheda che mostra i dettagli del piatto, 24 00:01:53,454 --> 00:01:58,920 vedrai queste parole chiamate «dishdetail works!» nella parte inferiore della pagina. 25 00:01:58,920 --> 00:02:02,390 Una volta completata questa operazione, scaricherai 26 00:02:02,390 --> 00:02:09,349 un file modello di componenti dishdetail preconfigurato con alcuni pezzi mancanti, 27 00:02:09,349 --> 00:02:18,474 quindi sostituirai in posizione nel modello del tuo componente dishdetail. 28 00:02:18,474 --> 00:02:24,439 Una volta sostituito il modello del componente dishdetail fornito, 29 00:02:24,439 --> 00:02:31,474 vedrai la pagina aggiornata in questo modo. 30 00:02:31,474 --> 00:02:35,692 Quindi, vedrete due parti nella pagina qui, una che dice 31 00:02:35,692 --> 00:02:39,480 «Mostra qui i dettagli del piatto». 32 00:02:39,480 --> 00:02:43,909 Userai un componente di carta per creare i dettagli del piatto, 33 00:02:43,909 --> 00:02:47,145 e mostralo qui. 34 00:02:47,145 --> 00:02:52,009 Inoltre, visualizzerai anche una serie di commenti sul piatto 35 00:02:52,009 --> 00:02:58,444 nella seconda parte di questo componente qui. 36 00:02:58,444 --> 00:03:04,270 Ora, per iniziare, nelle istruzioni di assegnazione, 37 00:03:04,270 --> 00:03:09,710 ti ho fornito un nuovo oggetto JavaScript 38 00:03:09,710 --> 00:03:11,719 contenente i dettagli del piatto, 39 00:03:11,719 --> 00:03:15,770 compresi i commenti su quel piatto. 40 00:03:15,770 --> 00:03:18,875 Userete queste informazioni per costruire 41 00:03:18,875 --> 00:03:21,740 questi due: il componente della scheda per visualizzare 42 00:03:21,740 --> 00:03:26,944 i dettagli del piatto, e l'elenco dei commenti qui. 43 00:03:26,944 --> 00:03:32,699 Il secondo compito è quello di aggiornare il 44 00:03:32,699 --> 00:03:39,349 file TypeScript per includere la nuova variabile piatto in là, 45 00:03:39,349 --> 00:03:45,379 quindi utilizzare la variabile piatto con il componente della scheda, 46 00:03:45,379 --> 00:03:52,710 quindi preparare il componente della scheda qui per visualizzare i dettagli del piatto. 47 00:03:52,710 --> 00:03:55,400 Una volta completato il secondo compito, 48 00:03:55,400 --> 00:03:59,330 nella tua applicazione vedrai che, 49 00:03:59,330 --> 00:04:04,699 appena sotto il menu, vedrai i dettagli delle 50 00:04:04,699 --> 00:04:09,590 informazioni fornite sul piatto vengono visualizzati in una scheda come questa qui, in 51 00:04:09,590 --> 00:04:13,520 modo da poter vedere il titolo, l'immagine 52 00:04:13,520 --> 00:04:17,129 e anche la descrizione fatta qui sotto. 53 00:04:17,129 --> 00:04:22,519 Ora, dopo aver completato questo, passerai alla terza attività. 54 00:04:22,519 --> 00:04:29,120 Nella terza attività, userai i commenti che sono anche racchiusi all'interno del 55 00:04:29,120 --> 00:04:35,239 piatto che ti abbiamo fornito nell'oggetto JavaScript, 56 00:04:35,239 --> 00:04:40,819 e quindi usalo per costruire e visualizzare un elenco di commenti qui. 57 00:04:40,819 --> 00:04:43,235 Alla fine del terzo compito, 58 00:04:43,235 --> 00:04:48,595 questo è ciò che vedrai essere visualizzato sul lato destro del tuo piatto. 59 00:04:48,595 --> 00:04:52,235 Puoi vedere che hai un'intestazione qui con 60 00:04:52,235 --> 00:04:54,019 la parola «Commenti», 61 00:04:54,019 --> 00:04:58,149 e quindi hai un elenco di commenti visualizzati qui. 62 00:04:58,149 --> 00:05:03,480 Le informazioni per la costruzione di questi commenti sono disponibili all'interno 63 00:05:03,480 --> 00:05:07,699 dell'oggetto JavaScript piatto che abbiamo dato per voi. 64 00:05:07,699 --> 00:05:11,610 In particolare, si noti che questo è il commento effettivo, 65 00:05:11,610 --> 00:05:15,505 questo è il numero di stelle date a quel commento, 66 00:05:15,505 --> 00:05:21,259 e questo è dove si visualizza il nome dell'autore con due trattini davanti, 67 00:05:21,259 --> 00:05:25,589 e nota, alla fine, viene visualizzata la data qui. 68 00:05:25,589 --> 00:05:28,774 Per poter costruire questa data qui, 69 00:05:28,774 --> 00:05:33,600 è necessario utilizzare una pipe angolare denominata Date. 70 00:05:33,600 --> 00:05:37,610 Abbiamo già visto l'uso di una pipe incorporata chiamata maiuscola 71 00:05:37,610 --> 00:05:39,939 nell'esercizio precedente, 72 00:05:39,939 --> 00:05:45,379 quindi è sufficiente utilizzare la pipe Data per creare questa 73 00:05:45,379 --> 00:05:50,660 data da visualizzare a destra del nome dell'autore qui. 74 00:05:50,660 --> 00:05:53,839 Quindi, questi sono i suggerimenti per iniziare con 75 00:05:53,839 --> 00:05:59,240 questa terza attività nel tuo primo incarico. 76 00:05:59,240 --> 00:06:02,849 Divertiti a completare il primo incarico. 77 00:06:02,849 --> 00:06:04,620 Qualunque sia la risorsa necessaria, 78 00:06:04,620 --> 00:06:09,980 il file modello preconfigurato semicompletato 79 00:06:09,980 --> 00:06:14,115 e l'oggetto JavaScript piatto sono entrambi disponibili 80 00:06:14,115 --> 00:06:18,649 nelle istruzioni per questa assegnazione.