[MUSIC]
Nell'esercizio precedente, abbiamo visto l'uso della nostra prima direttiva strutturale,
la NGfOr.
Poniamo qualche altra domanda sulle direttive strutturali e
impariamo come sono utili quando scriviamo le nostre applicazioni angolari.
Le direttive strutturali sono un tipo di direttive.
Quindi le direttive sono un ombrello generale in base al quale si hanno componenti,
quindi si hanno direttive strutturali e quindi si hanno direttive di attributo.
Quindi impariamo un po 'di più sulle direttive.
Quindi quello che ci rendiamo conto è che i modelli angolari sono dinamici
, quindi devono essere creati al volo, ci saranno molte manipolazioni da fare sul DOM.
Quindi, ciò che le direttive ci aiutano è consentirci di
dare istruzioni all'angolare su come rendere i modelli al DOM.
Quindi, usano le direttive per dare istruzioni
ad Angular mentre sta eseguendo il rendering dei modelli sullo schermo.
Quindi, in generale, una direttiva può essere definita direttamente in Angular usando
una classe con il decoratore @Directive.
Vediamo bene un esempio di direttiva che possiamo
creare un po' più avanti in questo corso.
Per il momento, esamineremo le direttive edilizie.
In particolare,
abbiamo già incontrato il nostro primo tipo di direttiva, che è una componente.
Un componente è un tipo speciale di direttiva e
Angular, che ha un proprio modello associato ad esso.
E abbiamo già visto come possiamo sfruttare un componente per definire
parti del nostro layout per lo schermo della nostra applicazione.
Come ho accennato, ci sono altri due tipi di direttive in direttive angolari,
strutturali e attributi.
Esamineremo rapidamente le direttive strutturali in questa lezione.
E poi vedremo le direttive degli attributi un po 'più tardi in
questo corso.
Che cosa sono le direttive strutturali e come sono utili per noi?
Quello che ci rendiamo conto che usiamo le direttive strutturali è,
ci aiutano a modificare il layout dei nostri contenuti
aiutandoci ad aggiungere e rimuovere elementi dal DOM.
In particolare, si noti l'uso del termine aggiungere e
rimuovere e sostituire elementi nel DOM.
Quindi stai letteralmente usando le direttive strutturali per manipolare
il tuo DOM della tua pagina web.
Quindi, puoi usare le direttive strutturali applicandole a un elemento host, in
genere un div o una voce di elenco nel DOM e anche ai suoi discendenti.
Abbiamo già visto l'utente,
la direttiva strutturale NGfor, nell'esercizio precedente.
E abbiamo visto come usiamo l'NGFor per scorrere una serie di piatti,
e poi layout ognuno di essi per costruire il menu per il nostro ristorante.
Qui, citerò brevemente alcune delle direttive strutturali comuni che
incontrerai mentre scriverai la tua partizione angolare.
Una delle direttive strutturali più comuni che vedrete è la
direttiva NGif.
Quando lo usi nella sintassi del tuo modello, lo scriverai come* NGIF,
quindi è così che questa direttiva viene utilizzata nel tuo DOM.
Quindi, ad esempio, se si applica la direttiva NGIF a un div come
questo in questo esempio, quello che si sta specificando dove è che
se SelectedDish non è nullo, questo div verrà aggiunto al DOM.
Se quello SelectedDish è nullo, allora questo div,
qualunque cosa sia contenuta in questo div non verrà aggiunto al DOM, quindi
lo stai letteralmente rimuovendo dal DOM se il valore risulta essere falso.
Se risulta essere vero, viene aggiunto nel dump.
Allo stesso modo, abbiamo visto l'uso della direttiva NgFor.
Quindi, dove abbiamo definito, per esempio, per la md-list-item nell'
esercizio precedente abbiamo detto *ngFor e detto, lasciare piatto di piatti.
Quindi questo ci permette di scorrere sulla matrice di piatti
che sono definiti nel nostro cappotto di script di tipo.
Un' altra direttiva strutturale che potrebbe trovare un uso comune è la direttiva ngSwitch.
Anche se non ho un esempio in questo momento,
più avanti in questo corso incontreremo l'uso della direttiva ngSwitch.
Ciò consente di aggiungere selettivamente determinati elementi al DOM
specificando una condizione, a seconda di ciò che la condizione restituisce,
quindi si utilizzerà uno di questi elementi tra l'elenco.
Se hai familiarità con l'istruzione switch da C ++ o Java,
il ngSwitch ti sembra molto familiare.
Quindi agirà in modo simile all'istruzione switch a cui
sei abituato da Java o C ++.
Con la breve discussione sulle direttive strutturali,
passiamo al prossimo esercizio in cui continueremo ad esaminare le componenti.
[ MUSIC]