1 00:00:03,650 --> 00:00:09,520 Una tipica applicazione angolare è costituita da molti componenti. 2 00:00:09,520 --> 00:00:16,225 I componenti controllano una parte dello schermo chiamata come vista in Angular. 3 00:00:16,225 --> 00:00:21,840 Quindi, quando crei lo schermo sull'applicazione Angular, 4 00:00:21,840 --> 00:00:25,310 puoi dividere lo schermo in più viste, 5 00:00:25,310 --> 00:00:29,384 ognuna di esse è controllata da un componente separato. 6 00:00:29,384 --> 00:00:31,200 Finora, nell'esempio, 7 00:00:31,200 --> 00:00:35,715 abbiamo un singolo componente radice che controlla l'intero schermo. 8 00:00:35,715 --> 00:00:42,440 In questa lezione, aggiungeremo un altro componente che prende parte dello schermo e prende il 9 00:00:42,440 --> 00:00:45,890 controllo di quella parte dello schermo e si prende cura 10 00:00:45,890 --> 00:00:50,275 dell'intero rendering di quella parte dello schermo, qui. 11 00:00:50,275 --> 00:00:54,060 Facciamo una rapida visita al componente App che 12 00:00:54,060 --> 00:00:57,350 abbiamo già come parte della nostra applicazione Angular. 13 00:00:57,350 --> 00:00:58,730 Quindi, in questo componente, 14 00:00:58,730 --> 00:01:04,250 puoi vedere che stiamo importando il componente dal nucleo angolare. 15 00:01:04,250 --> 00:01:07,100 Quindi, questo ci fornisce la possibilità di 16 00:01:07,100 --> 00:01:11,585 definire un decoratore di componenti e applicarlo alla nostra classe. 17 00:01:11,585 --> 00:01:16,640 Quindi, questo definirà un componente che fa parte della nostra applicazione angolare. 18 00:01:16,640 --> 00:01:19,590 Quindi, qui, questo particolare componente, 19 00:01:19,590 --> 00:01:22,970 come puoi vedere, quando definisci il decoratore del componente, 20 00:01:22,970 --> 00:01:30,450 consiste di diverse proprietà qui una di esse è il selettore, qui. 21 00:01:30,450 --> 00:01:36,375 Ora, questa particolare proprietà selettore definisce una stringa qui. 22 00:01:36,375 --> 00:01:40,010 Nota, in particolare, ciò che è contenuto all'interno della stringa. 23 00:01:40,010 --> 00:01:42,080 Dice app-root. 24 00:01:42,080 --> 00:01:46,270 Ora, guardando indietro al file index.html. 25 00:01:46,270 --> 00:01:48,915 Quindi, vado al file index.html. 26 00:01:48,915 --> 00:01:51,400 Puoi vedere che proprio lì, 27 00:01:51,400 --> 00:02:00,570 stiamo usando questo app-root come uno dei tag nel nostro file index.html. 28 00:02:00,570 --> 00:02:05,630 Quindi, ora vedi che questo particolare tag che stai usando si riferisce 29 00:02:05,630 --> 00:02:11,270 al selettore di ciò che abbiamo specificato qui, app-root. 30 00:02:11,270 --> 00:02:18,500 Quindi, se vuoi dare una parte dello schermo e renderla controllabile da un componente, 31 00:02:18,500 --> 00:02:23,135 allora usi il selettore per specificare e quindi includi 32 00:02:23,135 --> 00:02:28,310 il tag selettore nel tuo file HTML. 33 00:02:28,310 --> 00:02:32,190 La stessa cosa vale anche per il modello di un componente. 34 00:02:32,190 --> 00:02:35,330 Se si include un altro selettore di un altro 35 00:02:35,330 --> 00:02:39,350 componente nel modello di questo componente, 36 00:02:39,350 --> 00:02:42,770 allora quella parte dello schermo verrà consegnata 37 00:02:42,770 --> 00:02:46,440 al secondo componente da controllare dal secondo componente. Lo 38 00:02:46,440 --> 00:02:52,304 impareremo anche in una delle lezioni successive. 39 00:02:52,304 --> 00:02:57,970 Ora, la seconda parte che vedi essere specificata è TemplateUrl. 40 00:02:57,970 --> 00:03:06,560 Questo modello specifica il nome del file modello per questo particolare componente. 41 00:03:06,560 --> 00:03:10,970 Quindi, in questo caso, come puoi vedere, questo è app.component.html. 42 00:03:10,970 --> 00:03:14,720 Quindi, questo è il motivo per cui il modello viene definito nel 43 00:03:14,720 --> 00:03:19,605 file app.component.html per questo particolare componente. 44 00:03:19,605 --> 00:03:25,270 Inoltre, puoi anche fornire stili per questa applicazione. 45 00:03:25,270 --> 00:03:30,105 Quindi, qui stiamo dicendo StyleUrls e poi qui 46 00:03:30,105 --> 00:03:36,610 dentro, tra parentesi quadre stai fornendo questo detto. /app.component.scss. 47 00:03:36,610 --> 00:03:44,175 Quindi, il che significa che questo particolare file SaaS viene applicato a questo stile. 48 00:03:44,175 --> 00:03:48,620 Quindi, come hai visto quando abbiamo creato la nostra applicazione Angular, 49 00:03:48,620 --> 00:03:53,970 ho specificato che il formato di stile che userò è un SCSS. 50 00:03:53,970 --> 00:03:56,650 Quindi, questo è il motivo per cui questi file sono SCSS. 51 00:03:56,650 --> 00:04:01,190 Se non si utilizza lo stile SCSS e invece si crea normalmente, 52 00:04:01,190 --> 00:04:06,860 questi sarebbero solo file CSS e quindi è possibile utilizzare CSS per definire 53 00:04:06,860 --> 00:04:16,020 gli stili che possono essere utilizzati nei modelli di applicazione o nei modelli di componente. 54 00:04:16,020 --> 00:04:19,820 Quindi, se hai 55 00:04:19,820 --> 00:04:23,000 degli stili specifici dei componenti che vuoi includere per questo particolare componente, 56 00:04:23,000 --> 00:04:25,565 li includerai in questo file. 57 00:04:25,565 --> 00:04:29,965 È inoltre possibile specificare il modello e lo stile in linea. 58 00:04:29,965 --> 00:04:33,280 Quindi, se si specifica lo stile o il modello in linea, 59 00:04:33,280 --> 00:04:37,785 è sufficiente specificarlo come con le virgolette indietro. 60 00:04:37,785 --> 00:04:40,080 Quindi, per esempio, posso semplicemente, 61 00:04:40,080 --> 00:04:42,520 invece di fare il TemplateUrl, 62 00:04:42,520 --> 00:04:47,180 posso semplicemente modificarlo in template e 63 00:04:47,180 --> 00:04:52,475 quindi definirò il modello tra virgolette qui. 64 00:04:52,475 --> 00:04:59,420 Quindi direi e dentro qootes indietro posso anche fare modelli come questo. 65 00:04:59,420 --> 00:05:07,360 Quindi, posso dire h1 e poi titolo. 66 00:05:07,360 --> 00:05:17,060 Quindi, questo sarebbe quello che chiamiamo come modello in linea che usiamo all'interno della nostra applicazione. 67 00:05:17,060 --> 00:05:19,280 Ora, se usi le virgolette indietro, 68 00:05:19,280 --> 00:05:23,690 puoi anche usare cose come il dollaro add on 69 00:05:23,690 --> 00:05:28,955 per utilizzare variabili all'interno dei tuoi modelli e così via. 70 00:05:28,955 --> 00:05:31,235 In questo particolare corso, 71 00:05:31,235 --> 00:05:34,820 useremo file template separati 72 00:05:34,820 --> 00:05:39,590 e creeremo i modelli in quei file HTML. 73 00:05:39,590 --> 00:05:45,050 Preferisco quel metodo di definizione dei miei modelli piuttosto che fare modelli in linea. 74 00:05:45,050 --> 00:05:49,180 Ma se il tuo modello è molto semplice e contiene solo due o tre righe, 75 00:05:49,180 --> 00:05:56,235 allora usa con tutti i mezzi un modello inline come questo all'interno dell'applicazione. 76 00:05:56,235 --> 00:06:02,930 Quindi, lasciami cambiare di nuovo al mio valore originale qui. 77 00:06:02,930 --> 00:06:04,770 Stessa cosa per gli stili. 78 00:06:04,770 --> 00:06:08,240 Inoltre, posso semplicemente dire stili e poi tra virgolette posteriori 79 00:06:08,240 --> 00:06:12,500 includere le mie classi CSS all'interno delle virgolette posteriori. 80 00:06:12,500 --> 00:06:15,245 Anche se come ho detto, 81 00:06:15,245 --> 00:06:24,895 preferisco tenerli in file separati solo per avere un codice pulito nei miei file.ts qui. 82 00:06:24,895 --> 00:06:27,515 Quindi abbiamo stili di modello di selettore. 83 00:06:27,515 --> 00:06:30,010 Avremo anche un altro chiamato ID modulo. 84 00:06:30,010 --> 00:06:33,020 Al momento non lo sto usando per il mio componente, 85 00:06:33,020 --> 00:06:40,395 ma in alcuni casi dovrai specificare esplicitamente l'ID del modulo per il tuo componente. 86 00:06:40,395 --> 00:06:44,610 Vedremo alcuni esempi di questo un po 'più tardi. 87 00:06:44,610 --> 00:06:50,955 Ora, inoltre, un componente non è altro che una classe JavaScript o una classe Type Script. 88 00:06:50,955 --> 00:06:53,615 Ecco perché vedi qui, 89 00:06:53,615 --> 00:06:58,960 definendo una classe che dice AppComponent e quindi stai esportando questa classe. 90 00:06:58,960 --> 00:07:01,820 Il motivo per cui usiamo l'esportazione qui, 91 00:07:01,820 --> 00:07:06,820 in modo che questo componente possa essere importato nel mio modulo app. 92 00:07:06,820 --> 00:07:10,070 Quindi hai visto che stavamo importando questo nel mio modulo app. 93 00:07:10,070 --> 00:07:18,350 Quindi ogni volta che vuoi rendere qualsiasi componente o modulo portatile in un altro modulo, 94 00:07:18,350 --> 00:07:25,245 allora anteporresti sempre l'esportazione alla classe qui. 95 00:07:25,245 --> 00:07:28,040 Quindi, in aggiunta, anche, 96 00:07:28,040 --> 00:07:34,295 vediamo che abbiamo alcune proprietà locali che abbiamo definito 97 00:07:34,295 --> 00:07:43,220 all'interno delle nostre classi qui e queste sarebbero accessibili attraverso il mio modello. 98 00:07:43,220 --> 00:07:45,340 Quindi posso fare uso di questi nel mio modello. 99 00:07:45,340 --> 00:07:48,170 Quindi le proprietà definite all'interno del mio 100 00:07:48,170 --> 00:07:53,230 file component.ts sono accessibili dai miei file modello. 101 00:07:53,230 --> 00:08:00,875 Parleremo dell'aspector di associazione dei dati un po 'più tardi in un'altra lezione. 102 00:08:00,875 --> 00:08:08,075 Per riassumere, ciò che abbiamo imparato finora è che un componente è definito 103 00:08:08,075 --> 00:08:15,990 specificando il codice e specificando anche il modello corrispondente. 104 00:08:15,990 --> 00:08:19,850 Quindi, all'interno del codice è possibile definire proprietà e metodi 105 00:08:19,850 --> 00:08:24,455 che saranno accessibili dal modello dal modello corrispondente. 106 00:08:24,455 --> 00:08:26,530 Quindi, come hai visto, nei metadati, 107 00:08:26,530 --> 00:08:29,370 nel decoratore, nel decoratore dei componenti, 108 00:08:29,370 --> 00:08:33,425 hai specificato il nome del file del modello come una 109 00:08:33,425 --> 00:08:38,380 delle proprietà per la tua classe componente qui. 110 00:08:38,380 --> 00:08:41,870 Analogamente, tutte le proprietà e 111 00:08:41,870 --> 00:08:45,875 i metodi definiti nel componente saranno accessibili dal modello. 112 00:08:45,875 --> 00:08:49,645 Non solo, puoi anche riavere ciò che viene chiamato come 113 00:08:49,645 --> 00:08:53,450 associazione di eventi dal tuo modello ai tuoi componenti. 114 00:08:53,450 --> 00:08:57,320 Quindi, se vengono generati eventi nei tuoi modelli, ad esempio, 115 00:08:57,320 --> 00:09:02,180 facendo clic su un pulsante sul modello che può attivare 116 00:09:02,180 --> 00:09:08,535 chiamate ai metodi all'interno 117 00:09:08,535 --> 00:09:11,400 del codice qui, il codice Javascript o il codice Type Script qui. 118 00:09:11,400 --> 00:09:16,790 Vedremo l'uso di quelli in una delle lezioni successive e poi lì, 119 00:09:16,790 --> 00:09:20,180 rivedrò, ancora una volta, questo punto sul legame di proprietà e l'associazione di eventi, 120 00:09:20,180 --> 00:09:23,500 e spiegherò questo a voi in modo un po 'più dettagliato. 121 00:09:23,500 --> 00:09:29,840 I componenti in un'applicazione Angular possono essere organizzati in una gerarchia. 122 00:09:29,840 --> 00:09:32,470 Quindi, avrai sempre un componente radice. 123 00:09:32,470 --> 00:09:33,835 Quindi, per la nostra applicazione, 124 00:09:33,835 --> 00:09:37,130 il file app.component.ts e 125 00:09:37,130 --> 00:09:43,039 il corrispondente modello HTML formano il componente radice per la nostra applicazione 126 00:09:43,039 --> 00:09:46,724 e questo componente radice può quindi contenere 127 00:09:46,724 --> 00:09:52,825 componenti in una gerarchia e può includere componenti nella gerarchia. 128 00:09:52,825 --> 00:09:56,750 Vedremo che nel prossimo esercizio, 129 00:09:56,750 --> 00:10:02,275 dove creeremo un altro componente e poi lo useremo nel nostro componente radice. 130 00:10:02,275 --> 00:10:04,960 Quindi, puoi avere più componenti 131 00:10:04,960 --> 00:10:08,005 inclusi nel tuo componente radice e questi 132 00:10:08,005 --> 00:10:13,690 stessi componenti a loro volta possono utilizzare altri componenti che sono inclusi al loro interno. 133 00:10:13,690 --> 00:10:21,075 Quindi, questa gerarchia di componenti è ciò che consente di progettare lo schermo dell'applicazione. 134 00:10:21,075 --> 00:10:24,940 Con questa rapida comprensione dei componenti 135 00:10:24,940 --> 00:10:28,810 e come i componenti sono utili per progettare la nostra applicazione, 136 00:10:28,810 --> 00:10:32,935 passeremo ora al nostro prossimo esercizio in cui creeremo 137 00:10:32,935 --> 00:10:37,339 e aggiungeremo un altro componente alla nostra applicazione angolare 138 00:10:37,339 --> 00:10:41,810 e poi definiremo un modello per quel componente e poi faremo fare uso di 139 00:10:41,810 --> 00:10:47,230 quel componente all'interno del nostro componente radice per progettare il nostro schermo.