1
00:00:00,000 --> 00:00:04,518
[MUSIC]

2
00:00:04,518 --> 00:00:09,098
Nell'esercizio precedente, abbiamo visto l'uso della nostra prima direttiva strutturale,

3
00:00:09,098 --> 00:00:09,812
la NGfOr.

4
00:00:09,812 --> 00:00:15,186
Poniamo qualche altra domanda sulle direttive strutturali e

5
00:00:15,186 --> 00:00:19,970
impariamo come sono utili quando scriviamo le nostre applicazioni angolari.

6
00:00:22,000 --> 00:00:26,110
Le direttive strutturali sono un tipo di direttive.

7
00:00:26,110 --> 00:00:30,628
Quindi le direttive sono un ombrello generale in base al quale si hanno componenti,

8
00:00:30,628 --> 00:00:35,847
quindi si hanno direttive strutturali e quindi si hanno direttive di attributo.

9
00:00:35,847 --> 00:00:39,015
Quindi impariamo un po 'di più sulle direttive.

10
00:00:39,015 --> 00:00:43,121
Quindi quello che ci rendiamo conto è che i modelli angolari sono dinamici

11
00:00:43,121 --> 00:00:47,379
, quindi devono essere creati al volo, ci saranno molte manipolazioni da fare sul DOM.

12
00:00:47,379 --> 00:00:52,721
Quindi, ciò che le direttive ci aiutano è consentirci di

13
00:00:52,721 --> 00:00:57,710
dare istruzioni all'angolare su come rendere i modelli al DOM.

14
00:00:57,710 --> 00:01:00,900
Quindi, usano le direttive per dare istruzioni

15
00:01:00,900 --> 00:01:04,880
ad Angular mentre sta eseguendo il rendering dei modelli sullo schermo.

16
00:01:04,880 --> 00:01:10,120
Quindi, in generale, una direttiva può essere definita direttamente in Angular usando

17
00:01:10,120 --> 00:01:14,520
una classe con il decoratore @Directive.

18
00:01:14,520 --> 00:01:19,044
Vediamo bene un esempio di direttiva che possiamo

19
00:01:19,044 --> 00:01:22,630
creare un po' più avanti in questo corso.

20
00:01:22,630 --> 00:01:25,258
Per il momento, esamineremo le direttive edilizie.

21
00:01:25,258 --> 00:01:26,587
In particolare,

22
00:01:26,587 --> 00:01:32,650
abbiamo già incontrato il nostro primo tipo di direttiva, che è una componente.

23
00:01:32,650 --> 00:01:35,060
Un componente è un tipo speciale di direttiva e

24
00:01:35,060 --> 00:01:39,800
Angular, che ha un proprio modello associato ad esso.

25
00:01:39,800 --> 00:01:45,700
E abbiamo già visto come possiamo sfruttare un componente per definire

26
00:01:45,700 --> 00:01:50,420
parti del nostro layout per lo schermo della nostra applicazione.

27
00:01:51,910 --> 00:01:57,610
Come ho accennato, ci sono altri due tipi di direttive in direttive angolari,

28
00:01:57,610 --> 00:02:00,465
strutturali e attributi.

29
00:02:00,465 --> 00:02:05,138
Esamineremo rapidamente le direttive strutturali in questa lezione.

30
00:02:05,138 --> 00:02:09,359
E poi vedremo le direttive degli attributi un po 'più tardi in

31
00:02:09,359 --> 00:02:10,290
questo corso.

32
00:02:11,400 --> 00:02:15,608
Che cosa sono le direttive strutturali e come sono utili per noi?

33
00:02:15,608 --> 00:02:19,590
Quello che ci rendiamo conto che usiamo le direttive strutturali è,

34
00:02:19,590 --> 00:02:24,910
ci aiutano a modificare il layout dei nostri contenuti

35
00:02:24,910 --> 00:02:30,020
aiutandoci ad aggiungere e rimuovere elementi dal DOM.

36
00:02:30,020 --> 00:02:33,800
In particolare, si noti l'uso del termine aggiungere e

37
00:02:33,800 --> 00:02:37,460
rimuovere e sostituire elementi nel DOM.

38
00:02:37,460 --> 00:02:41,720
Quindi stai letteralmente usando le direttive strutturali per manipolare

39
00:02:41,720 --> 00:02:44,640
il tuo DOM della tua pagina web.

40
00:02:44,640 --> 00:02:51,124
Quindi, puoi usare le direttive strutturali applicandole a un elemento host, in

41
00:02:51,124 --> 00:02:56,738
genere un div o una voce di elenco nel DOM e anche ai suoi discendenti.

42
00:02:56,738 --> 00:02:59,435
Abbiamo già visto l'utente,

43
00:02:59,435 --> 00:03:04,840
la direttiva strutturale NGfor, nell'esercizio precedente.

44
00:03:04,840 --> 00:03:11,650
E abbiamo visto come usiamo l'NGFor per scorrere una serie di piatti,

45
00:03:11,650 --> 00:03:17,020
e poi layout ognuno di essi per costruire il menu per il nostro ristorante.

46
00:03:18,480 --> 00:03:22,870
Qui, citerò brevemente alcune delle direttive strutturali comuni che

47
00:03:22,870 --> 00:03:27,180
incontrerai mentre scriverai la tua partizione angolare.

48
00:03:27,180 --> 00:03:31,520
Una delle direttive strutturali più comuni che vedrete è la

49
00:03:31,520 --> 00:03:32,620
direttiva NGif.

50
00:03:32,620 --> 00:03:40,710
Quando lo usi nella sintassi del tuo modello, lo scriverai come* NGIF,

51
00:03:40,710 --> 00:03:45,800
quindi è così che questa direttiva viene utilizzata nel tuo DOM.

52
00:03:45,800 --> 00:03:50,973
Quindi, ad esempio, se si applica la direttiva NGIF a un div come

53
00:03:50,973 --> 00:03:56,050
questo in questo esempio, quello che si sta specificando dove è che

54
00:03:56,050 --> 00:04:01,845
se SelectedDish non è nullo, questo div verrà aggiunto al DOM.

55
00:04:01,845 --> 00:04:05,287
Se quello SelectedDish è nullo, allora questo div,

56
00:04:05,287 --> 00:04:10,053
qualunque cosa sia contenuta in questo div non verrà aggiunto al DOM, quindi

57
00:04:10,053 --> 00:04:15,965
lo stai letteralmente rimuovendo dal DOM se il valore risulta essere falso.

58
00:04:15,965 --> 00:04:19,800
Se risulta essere vero, viene aggiunto nel dump.

59
00:04:19,800 --> 00:04:24,280
Allo stesso modo, abbiamo visto l'uso della direttiva NgFor.

60
00:04:24,280 --> 00:04:29,580
Quindi, dove abbiamo definito, per esempio, per la md-list-item nell'

61
00:04:29,580 --> 00:04:35,470
esercizio precedente abbiamo detto *ngFor e detto, lasciare piatto di piatti.

62
00:04:35,470 --> 00:04:40,750
Quindi questo ci permette di scorrere sulla matrice di piatti

63
00:04:40,750 --> 00:04:46,925
che sono definiti nel nostro cappotto di script di tipo.

64
00:04:46,925 --> 00:04:55,570
Un' altra direttiva strutturale che potrebbe trovare un uso comune è la direttiva ngSwitch.

65
00:04:55,570 --> 00:04:57,840
Anche se non ho un esempio in questo momento,

66
00:04:57,840 --> 00:05:02,940
più avanti in questo corso incontreremo l'uso della direttiva ngSwitch.

67
00:05:02,940 --> 00:05:07,080
Ciò consente di aggiungere selettivamente determinati elementi al DOM

68
00:05:07,080 --> 00:05:11,940
specificando una condizione, a seconda di ciò che la condizione restituisce,

69
00:05:11,940 --> 00:05:17,060
quindi si utilizzerà uno di questi elementi tra l'elenco.

70
00:05:17,060 --> 00:05:21,858
Se hai familiarità con l'istruzione switch da C ++ o Java,

71
00:05:21,858 --> 00:05:25,250
il ngSwitch ti sembra molto familiare.

72
00:05:25,250 --> 00:05:29,710
Quindi agirà in modo simile all'istruzione switch a cui

73
00:05:29,710 --> 00:05:32,295
sei abituato da Java o C ++.

74
00:05:32,295 --> 00:05:35,675
Con la breve discussione sulle direttive strutturali,

75
00:05:35,675 --> 00:05:40,748
passiamo al prossimo esercizio in cui continueremo ad esaminare le componenti.

76
00:05:40,748 --> 00:05:47,459
[ MUSIC]