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

2
00:00:04,549 --> 00:00:08,557
Nel primo modulo abbiamo rivisto brevemente le direttive e

3
00:00:08,557 --> 00:00:11,590
esaminiamo le direttive strutturali.

4
00:00:11,590 --> 00:00:15,410
Abbiamo visto come le direttive strutturali ci consentano di progettare i modelli.

5
00:00:15,410 --> 00:00:17,880
Per i nostri componenti angolari.

6
00:00:17,880 --> 00:00:21,160
In questa lezione, esamineremo le direttive degli attributi.

7
00:00:21,160 --> 00:00:23,770
Il terzo tipo di direttiva.

8
00:00:23,770 --> 00:00:28,790
E vedremo anche come possiamo progettare una direttiva personalizzata

9
00:00:28,790 --> 00:00:31,350
nell'esercizio che segue questa lezione.

10
00:00:33,240 --> 00:00:37,490
Quindi, come ci siamo resi conto, le direttive sono un modo

11
00:00:37,490 --> 00:00:42,360
di progettare entrambi i modelli angolari e ci permettono di fare

12
00:00:42,360 --> 00:00:47,820
varie parti della manipolazione della diga con una vista di applicazioni angolari R.

13
00:00:47,820 --> 00:00:53,280
Quindi, abbiamo visto l'uso di direttive per dare istruzioni alla ripetizione angolare e

14
00:00:53,280 --> 00:00:56,750
come rendere i modelli nel DOM.

15
00:00:56,750 --> 00:01:01,090
E abbiamo già imparato che all'interno dell'applicazione Angular,

16
00:01:01,090 --> 00:01:06,020
l'uso di direttive strutturali nei modelli ci consente di progettare le

17
00:01:06,020 --> 00:01:10,080
nostre opinioni della nostra applicazione Angular.

18
00:01:10,080 --> 00:01:15,060
Abbiamo anche imparato che il componente che abbiamo usato così

19
00:01:15,060 --> 00:01:20,640
ampiamente nei vari esercizi di questo corso.

20
00:01:20,640 --> 00:01:26,410
Si tratta di un tipo speciale di direttiva che ha un modello o un punto di vista allegato.

21
00:01:27,430 --> 00:01:29,560
E abbiamo anche imparato prima che,

22
00:01:29,560 --> 00:01:35,330
ci sono altri due tipi di direttive che possiamo usare all'interno dei nostri modelli.

23
00:01:35,330 --> 00:01:39,390
Le direttive strutturali e le direttive sugli attributi.

24
00:01:39,390 --> 00:01:44,060
Abbiamo esaminato alcune direttive strutturali integrate nel primo

25
00:01:44,060 --> 00:01:46,990
modulo di questo corso.

26
00:01:46,990 --> 00:01:52,380
E abbiamo visto come possiamo usare direttive strutturali come NG4 o NGF e

27
00:01:52,380 --> 00:01:59,060
molto altro in questi esercizi nelle parti precedenti di questo corso.

28
00:01:59,060 --> 00:02:04,230
Ora vedremo l'altro tipo di direttiva, la direttiva sugli attributi.

29
00:02:04,230 --> 00:02:05,630
Che cos'è una direttiva attributo e

30
00:02:05,630 --> 00:02:10,360
come ci aiuta nella progettazione della nostra applicazione angolare.

31
00:02:10,360 --> 00:02:12,650
Quindi quali sono le direttive sugli attributi?

32
00:02:12,650 --> 00:02:18,790
Le direttive attributo vengono utilizzate come attributi per gli elementi nel modello.

33
00:02:18,790 --> 00:02:23,460
Quindi, proprio così hai il tuo codice HTML che scrivi all'interno del tuo modello e

34
00:02:23,460 --> 00:02:26,900
gli elementi HTML puoi applicare una direttiva attributo

35
00:02:26,900 --> 00:02:28,410
a quegli elementi HTML.

36
00:02:28,410 --> 00:02:31,940
Abbiamo anche visto la direttiva strutturale dell'utente.

37
00:02:31,940 --> 00:02:37,020
E abbiamo visto i componenti possono aggiungere ulteriori

38
00:02:37,020 --> 00:02:41,710
elementi simili a HTML che possono essere utilizzati all'interno dei modelli della vostra applicazione angolare.

39
00:02:41,710 --> 00:02:45,510
Quindi il modo in cui usiamo i componenti con i loro selettori

40
00:02:45,510 --> 00:02:49,850
era un modo in cui abbiamo usato le direttive all'interno della nostra applicazione Angular.

41
00:02:49,850 --> 00:02:53,910
Quando abbiamo visto l'uso di direttive strutturali che sono stati applicati ai

42
00:02:53,910 --> 00:02:58,890
vari elementi HTML all'interno del nostro modello.

43
00:02:58,890 --> 00:03:02,590
Ora guardiamo le direttive degli attributi che ci permettono di cambiare

44
00:03:02,590 --> 00:03:06,930
alcune proprietà dei nostri elementi HTML.

45
00:03:06,930 --> 00:03:09,480
Quindi quali sono l'uso delle direttive sugli attributi?

46
00:03:09,480 --> 00:03:15,480
Le direttive degli attributi ascoltano e modificano il comportamento di altri elementi HTML

47
00:03:15,480 --> 00:03:21,410
o attributi o proprietà o componenti utilizzati all'interno dei modelli.

48
00:03:21,410 --> 00:03:25,630
Abbiamo effettivamente utilizzato alcune delle

49
00:03:25,630 --> 00:03:30,500
direttive sugli attributi incorporati già senza parlarne esplicitamente.

50
00:03:30,500 --> 00:03:34,880
Parlando delle direttive degli attributi incorporate che vengono come parte del tuo

51
00:03:34,880 --> 00:03:36,260
framework Angular.

52
00:03:36,260 --> 00:03:41,390
Hai già incontrato il modello Ng in alcune delle lezioni precedenti di

53
00:03:41,390 --> 00:03:46,410
questo corso, in particolare nell'area di associazione dati e

54
00:03:46,410 --> 00:03:52,620
anche quando abbiamo studiato i caratteri nel modulo precedente.

55
00:03:52,620 --> 00:03:55,520
Ci sono altri due tipi di direttive attributo integrate che

56
00:03:55,520 --> 00:03:59,180
potremmo incontrare è ngClass e ngStyle.

57
00:03:59,180 --> 00:04:03,430
Con il nome stesso puoi indovinare qual è il loro scopo.

58
00:04:03,430 --> 00:04:07,600
Allo stesso modo, ci sono alcuni altri moduli che si utilizzano all'interno

59
00:04:07,600 --> 00:04:13,190
delle applicazioni angolari come il FormsModule e anche il RouterModule che hanno il

60
00:04:13,190 --> 00:04:18,245
proprio set di direttive di attributi built-in che facciamo uso di.

61
00:04:18,245 --> 00:04:22,865
Infatti, abbiamo già fatto uso di loro quando definiamo moduli e

62
00:04:22,865 --> 00:04:28,645
anche l'uso del router all'interno della nostra applicazione angolare in precedenza.

63
00:04:28,645 --> 00:04:33,005
Ora, a questo punto, ti starai chiedendo, come faccio a creare la

64
00:04:33,005 --> 00:04:37,985
mia direttiva sugli attributi se sono interessato a creare una direttiva personalizzata, quindi

65
00:04:37,985 --> 00:04:44,950
questo è dove vedremo come puoi derivare una direttiva personalizzata.

66
00:04:44,950 --> 00:04:50,470
Esaminiamo brevemente le direttive personalizzate nella diapositiva successiva e

67
00:04:50,470 --> 00:04:53,040
nell'esercizio che segue.

68
00:04:53,040 --> 00:04:57,280
Quindi nelle direttive personalizzate la tua aspettativa è che saresti in grado di implementare

69
00:04:57,280 --> 00:04:58,990
ciò a cui sei interessato.

70
00:04:58,990 --> 00:05:03,310
In particolare, quindi è qui che possiamo creare le nostre direttive personalizzate.

71
00:05:03,310 --> 00:05:08,660
Utilizzando la CLI angolare, è possibile impalcare il codice bare bones per una direttiva

72
00:05:08,660 --> 00:05:13,130
e successivamente modificare quel codice per implementare la direttiva personalizzata.

73
00:05:13,130 --> 00:05:17,860
Quindi, quando implementi una direttiva personalizzata usando la CLI angolare,

74
00:05:17,860 --> 00:05:19,920
creerà una direttiva per te.

75
00:05:19,920 --> 00:05:24,490
E poi noterai immediatamente che all'interno della direttiva,

76
00:05:24,490 --> 00:05:29,880
userai quella

77
00:05:29,880 --> 00:05:35,290
classe decoratore di direttiva per convertire la classe in una direttiva e

78
00:05:35,290 --> 00:05:39,410
incontreremo una di queste nell'esercizio che segue.

79
00:05:39,410 --> 00:05:45,120
Inoltre, con il director, soprattutto quando si utilizzano direttive di attributo e

80
00:05:45,120 --> 00:05:50,490
si desidera modificare qualsiasi elemento che vengono utilizzati all'interno dei modelli.

81
00:05:50,490 --> 00:05:55,560
Un' altra classe che è utile per noi è chiamata elementRef.

82
00:05:55,560 --> 00:06:00,740
Questo è anche importante dal codice angolare, e questo viene iniettato nel

83
00:06:00,740 --> 00:06:06,130
costruttore di direttive, scritto la classe di direttiva.

84
00:06:06,130 --> 00:06:10,940
E poi questo ti consente di accedere agli elementi DOM e

85
00:06:10,940 --> 00:06:13,580
quindi apportare modifiche a loro.

86
00:06:13,580 --> 00:06:18,137
Quindi, con questa rapida comprensione di come è possibile creare direttive personalizzate,

87
00:06:18,137 --> 00:06:22,351
diamo un'occhiata a un esempio nell'esercizio che segue questa lezione.

88
00:06:22,351 --> 00:06:28,469
[ MUSIC]