Una tipica applicazione angolare è costituita da molti componenti.
I componenti controllano una parte dello schermo chiamata come vista in Angular.
Quindi, quando crei lo schermo sull'applicazione Angular,
puoi dividere lo schermo in più viste,
ognuna di esse è controllata da un componente separato.
Finora, nell'esempio,
abbiamo un singolo componente radice che controlla l'intero schermo.
In questa lezione, aggiungeremo un altro componente che prende parte dello schermo e prende il
controllo di quella parte dello schermo e si prende cura
dell'intero rendering di quella parte dello schermo, qui.
Facciamo una rapida visita al componente App che
abbiamo già come parte della nostra applicazione Angular.
Quindi, in questo componente,
puoi vedere che stiamo importando il componente dal nucleo angolare.
Quindi, questo ci fornisce la possibilità di
definire un decoratore di componenti e applicarlo alla nostra classe.
Quindi, questo definirà un componente che fa parte della nostra applicazione angolare.
Quindi, qui, questo particolare componente,
come puoi vedere, quando definisci il decoratore del componente,
consiste di diverse proprietà qui una di esse è il selettore, qui.
Ora, questa particolare proprietà selettore definisce una stringa qui.
Nota, in particolare, ciò che è contenuto all'interno della stringa.
Dice app-root.
Ora, guardando indietro al file index.html.
Quindi, vado al file index.html.
Puoi vedere che proprio lì,
stiamo usando questo app-root come uno dei tag nel nostro file index.html.
Quindi, ora vedi che questo particolare tag che stai usando si riferisce
al selettore di ciò che abbiamo specificato qui, app-root.
Quindi, se vuoi dare una parte dello schermo e renderla controllabile da un componente,
allora usi il selettore per specificare e quindi includi
il tag selettore nel tuo file HTML.
La stessa cosa vale anche per il modello di un componente.
Se si include un altro selettore di un altro
componente nel modello di questo componente,
allora quella parte dello schermo verrà consegnata
al secondo componente da controllare dal secondo componente. Lo
impareremo anche in una delle lezioni successive.
Ora, la seconda parte che vedi essere specificata è TemplateUrl.
Questo modello specifica il nome del file modello per questo particolare componente.
Quindi, in questo caso, come puoi vedere, questo è app.component.html.
Quindi, questo è il motivo per cui il modello viene definito nel
file app.component.html per questo particolare componente.
Inoltre, puoi anche fornire stili per questa applicazione.
Quindi, qui stiamo dicendo StyleUrls e poi qui
dentro, tra parentesi quadre stai fornendo questo detto. /app.component.scss.
Quindi, il che significa che questo particolare file SaaS viene applicato a questo stile.
Quindi, come hai visto quando abbiamo creato la nostra applicazione Angular,
ho specificato che il formato di stile che userò è un SCSS.
Quindi, questo è il motivo per cui questi file sono SCSS.
Se non si utilizza lo stile SCSS e invece si crea normalmente,
questi sarebbero solo file CSS e quindi è possibile utilizzare CSS per definire
gli stili che possono essere utilizzati nei modelli di applicazione o nei modelli di componente.
Quindi, se hai
degli stili specifici dei componenti che vuoi includere per questo particolare componente,
li includerai in questo file.
È inoltre possibile specificare il modello e lo stile in linea.
Quindi, se si specifica lo stile o il modello in linea,
è sufficiente specificarlo come con le virgolette indietro.
Quindi, per esempio, posso semplicemente,
invece di fare il TemplateUrl,
posso semplicemente modificarlo in template e
quindi definirò il modello tra virgolette qui.
Quindi direi e dentro qootes indietro posso anche fare modelli come questo.
Quindi, posso dire h1 e poi titolo.
Quindi, questo sarebbe quello che chiamiamo come modello in linea che usiamo all'interno della nostra applicazione.
Ora, se usi le virgolette indietro,
puoi anche usare cose come il dollaro add on
per utilizzare variabili all'interno dei tuoi modelli e così via.
In questo particolare corso,
useremo file template separati
e creeremo i modelli in quei file HTML.
Preferisco quel metodo di definizione dei miei modelli piuttosto che fare modelli in linea.
Ma se il tuo modello è molto semplice e contiene solo due o tre righe,
allora usa con tutti i mezzi un modello inline come questo all'interno dell'applicazione.
Quindi, lasciami cambiare di nuovo al mio valore originale qui.
Stessa cosa per gli stili.
Inoltre, posso semplicemente dire stili e poi tra virgolette posteriori
includere le mie classi CSS all'interno delle virgolette posteriori.
Anche se come ho detto,
preferisco tenerli in file separati solo per avere un codice pulito nei miei file.ts qui.
Quindi abbiamo stili di modello di selettore.
Avremo anche un altro chiamato ID modulo.
Al momento non lo sto usando per il mio componente,
ma in alcuni casi dovrai specificare esplicitamente l'ID del modulo per il tuo componente.
Vedremo alcuni esempi di questo un po 'più tardi.
Ora, inoltre, un componente non è altro che una classe JavaScript o una classe Type Script.
Ecco perché vedi qui,
definendo una classe che dice AppComponent e quindi stai esportando questa classe.
Il motivo per cui usiamo l'esportazione qui,
in modo che questo componente possa essere importato nel mio modulo app.
Quindi hai visto che stavamo importando questo nel mio modulo app.
Quindi ogni volta che vuoi rendere qualsiasi componente o modulo portatile in un altro modulo,
allora anteporresti sempre l'esportazione alla classe qui.
Quindi, in aggiunta, anche,
vediamo che abbiamo alcune proprietà locali che abbiamo definito
all'interno delle nostre classi qui e queste sarebbero accessibili attraverso il mio modello.
Quindi posso fare uso di questi nel mio modello.
Quindi le proprietà definite all'interno del mio
file component.ts sono accessibili dai miei file modello.
Parleremo dell'aspector di associazione dei dati un po 'più tardi in un'altra lezione.
Per riassumere, ciò che abbiamo imparato finora è che un componente è definito
specificando il codice e specificando anche il modello corrispondente.
Quindi, all'interno del codice è possibile definire proprietà e metodi
che saranno accessibili dal modello dal modello corrispondente.
Quindi, come hai visto, nei metadati,
nel decoratore, nel decoratore dei componenti,
hai specificato il nome del file del modello come una
delle proprietà per la tua classe componente qui.
Analogamente, tutte le proprietà e
i metodi definiti nel componente saranno accessibili dal modello.
Non solo, puoi anche riavere ciò che viene chiamato come
associazione di eventi dal tuo modello ai tuoi componenti.
Quindi, se vengono generati eventi nei tuoi modelli, ad esempio,
facendo clic su un pulsante sul modello che può attivare
chiamate ai metodi all'interno
del codice qui, il codice Javascript o il codice Type Script qui.
Vedremo l'uso di quelli in una delle lezioni successive e poi lì,
rivedrò, ancora una volta, questo punto sul legame di proprietà e l'associazione di eventi,
e spiegherò questo a voi in modo un po 'più dettagliato.
I componenti in un'applicazione Angular possono essere organizzati in una gerarchia.
Quindi, avrai sempre un componente radice.
Quindi, per la nostra applicazione,
il file app.component.ts e
il corrispondente modello HTML formano il componente radice per la nostra applicazione
e questo componente radice può quindi contenere
componenti in una gerarchia e può includere componenti nella gerarchia.
Vedremo che nel prossimo esercizio,
dove creeremo un altro componente e poi lo useremo nel nostro componente radice.
Quindi, puoi avere più componenti
inclusi nel tuo componente radice e questi
stessi componenti a loro volta possono utilizzare altri componenti che sono inclusi al loro interno.
Quindi, questa gerarchia di componenti è ciò che consente di progettare lo schermo dell'applicazione.
Con questa rapida comprensione dei componenti
e come i componenti sono utili per progettare la nostra applicazione,
passeremo ora al nostro prossimo esercizio in cui creeremo
e aggiungeremo un altro componente alla nostra applicazione angolare
e poi definiremo un modello per quel componente e poi faremo fare uso di
quel componente all'interno del nostro componente radice per progettare il nostro schermo.