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

2
00:00:04,549 --> 00:00:08,557
Dans le tout premier module, nous avons passé brièvement en revue les directives et

3
00:00:08,557 --> 00:00:11,590
nous examinons les directives structurelles.

4
00:00:11,590 --> 00:00:15,410
Nous avons vu comment les directives structurelles nous permettent de concevoir les modèles.

5
00:00:15,410 --> 00:00:17,880
Pour nos composants Angular.

6
00:00:17,880 --> 00:00:21,160
Dans cette leçon, nous allons passer en revue les directives d'attribut.

7
00:00:21,160 --> 00:00:23,770
Le troisième type de directive.

8
00:00:23,770 --> 00:00:28,790
Et nous allons également examiner comment nous pouvons concevoir une directive personnalisée

9
00:00:28,790 --> 00:00:31,350
dans l'exercice qui suit cette conférence.

10
00:00:33,240 --> 00:00:37,490
Donc, comme nous l'avons réalisé, les directives sont un moyen

11
00:00:37,490 --> 00:00:42,360
de concevoir les deux modèles Angular et nous permettent de faire

12
00:00:42,360 --> 00:00:47,820
diverses parties de la manipulation du barrage avec une vue d'applications Angular R.

13
00:00:47,820 --> 00:00:53,280
Donc, nous avons vu l'utilisation de directives pour donner des instructions à la répétition angulaire et

14
00:00:53,280 --> 00:00:56,750
comment rendre les modèles dans le DOM.

15
00:00:56,750 --> 00:01:01,090
Et nous avons déjà appris que dans l'application Angular,

16
00:01:01,090 --> 00:01:06,020
l'utilisation de directives structurelles dans les modèles nous permet de concevoir

17
00:01:06,020 --> 00:01:10,080
nos vues de notre application Angular.

18
00:01:10,080 --> 00:01:15,060
Nous avons également appris que le composant que nous avons utilisé si

19
00:01:15,060 --> 00:01:20,640
largement dans les différents exercices de ce cours.

20
00:01:20,640 --> 00:01:26,410
C'est un type particulier de directive qui a un modèle ou une vue attaché à elle.

21
00:01:27,430 --> 00:01:29,560
Et nous avons aussi appris plus tôt que

22
00:01:29,560 --> 00:01:35,330
, il y a deux autres types de directives que nous pouvons utiliser dans nos modèles.

23
00:01:35,330 --> 00:01:39,390
Les directives structurelles et les directives d'attributs.

24
00:01:39,390 --> 00:01:44,060
Nous avons examiné quelques directives structurelles intégrées dans le tout premier module

25
00:01:44,060 --> 00:01:46,990
de ce cours.

26
00:01:46,990 --> 00:01:52,380
Et nous avons vu comment nous pouvons utiliser des directives structurelles comme le NG4 ou le NGF et

27
00:01:52,380 --> 00:01:59,060
plus dans ces exercices dans les parties précédentes de ce cours.

28
00:01:59,060 --> 00:02:04,230
Maintenant, nous allons regarder l'autre type de directive, la directive attributaire.

29
00:02:04,230 --> 00:02:05,630
Qu'est-ce qu'une directive d'attribut et

30
00:02:05,630 --> 00:02:10,360
comment cela nous aide lors de la conception de notre application Angular.

31
00:02:10,360 --> 00:02:12,650
Alors, quelles sont les directives d'attribut ?Les directives d'attribut

32
00:02:12,650 --> 00:02:18,790
sont utilisées comme attributs pour les éléments de votre modèle.

33
00:02:18,790 --> 00:02:23,460
Donc, tout comme ça, vous avez votre code HTML que vous écrivez dans votre modèle et

34
00:02:23,460 --> 00:02:26,900
les éléments HTML, vous pouvez appliquer une directive d'attribut

35
00:02:26,900 --> 00:02:28,410
à ces éléments HTML.

36
00:02:28,410 --> 00:02:31,940
Nous avons également vu la directive structurelle de l'utilisateur.

37
00:02:31,940 --> 00:02:37,020
Et nous avons vu les composants peuvent eux-mêmes ajouter des éléments

38
00:02:37,020 --> 00:02:41,710
de type HTML supplémentaires qui peuvent être utilisés dans les modèles de votre application Angular.

39
00:02:41,710 --> 00:02:45,510
Donc, la façon dont nous utilisons les composants avec leurs sélecteurs

40
00:02:45,510 --> 00:02:49,850
était une façon dont nous avons utilisé les directives dans notre application Angular.

41
00:02:49,850 --> 00:02:53,910
Quand nous avons vu l'utilisation de directives structurelles qui ont été appliquées à

42
00:02:53,910 --> 00:02:58,890
les différents éléments HTML de notre modèle.

43
00:02:58,890 --> 00:03:02,590
Maintenant, nous regardons les directives d'attribut qui nous permettent de changer

44
00:03:02,590 --> 00:03:06,930
certaines propriétés de nos éléments HTML.

45
00:03:06,930 --> 00:03:09,480
Alors, quelle est l'utilisation des directives d'attribut ?

46
00:03:09,480 --> 00:03:15,480
Les directives attributaires écoutent et modifient le comportement d'autres éléments HTML ou d'attributs

47
00:03:15,480 --> 00:03:21,410
ou de propriétés ou de composants que vous utilisez dans vos modèles.

48
00:03:21,410 --> 00:03:25,630
Nous avons effectivement utilisé une partie de la directive d'attributs

49
00:03:25,630 --> 00:03:30,500
intégrée sans en parler explicitement.

50
00:03:30,500 --> 00:03:34,880
Parler des directives attributaires intégrées qui font partie de votre framework angulaire

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

52
00:03:36,260 --> 00:03:41,390
Vous avez déjà rencontré le modèle Ng dans certaines des leçons précédentes

53
00:03:41,390 --> 00:03:46,410
de ce cours, en particulier dans la zone de liaison de données et

54
00:03:46,410 --> 00:03:52,620
aussi lorsque nous avons étudié les polices dans le module précédent.

55
00:03:52,620 --> 00:03:55,520
Il existe deux autres types de directives attributaires intégrées que nous

56
00:03:55,520 --> 00:03:59,180
pourrions rencontrer est ngClass et ngStyle.

57
00:03:59,180 --> 00:04:03,430
Par le nom lui-même, vous pouvez deviner quel est leur but.

58
00:04:03,430 --> 00:04:07,600
De même, il y a d'autres modules que vous utilisez dans vos applications Angular

59
00:04:07,600 --> 00:04:18,245
comme le FormsModule et aussi le RouterModule qui ont leur propre ensemble de directives d'attribut intégrées que nous utilisons.

60
00:04:18,245 --> 00:04:22,865
En effet, nous en avons déjà fait usage lorsque nous définissons des formulaires et

61
00:04:22,865 --> 00:04:28,645
aussi l'utilisation du routeur dans notre application Angular plus tôt.

62
00:04:28,645 --> 00:04:33,005
Maintenant, à ce stade, vous vous demandez peut-être, comment puis-je créer ma propre directive d'attribut

63
00:04:33,005 --> 00:04:37,985
si je suis intéressé à créer une directive personnalisée, donc

64
00:04:37,985 --> 00:04:44,950
c'est là que nous allons examiner comment vous pouvez dériver une directive personnalisée.

65
00:04:44,950 --> 00:04:50,470
Examinons brièvement les directives personnalisées dans la diapositive suivante et

66
00:04:50,470 --> 00:04:53,040
dans l'exercice qui suit.

67
00:04:53,040 --> 00:04:57,280
Donc, dans les directives personnalisées, votre attente est que vous seriez en mesure d'implémenter

68
00:04:57,280 --> 00:04:58,990
ce qui vous intéresse.

69
00:04:58,990 --> 00:05:03,310
En particulier, c'est donc là que nous pouvons créer nos propres directives personnalisées.

70
00:05:03,310 --> 00:05:08,660
En utilisant l'interface de ligne de commande Angular, vous pouvez échafauder le code os nu pour une directive

71
00:05:08,660 --> 00:05:13,130
et ensuite modifier ce code afin d'implémenter votre directive personnalisée.

72
00:05:13,130 --> 00:05:17,860
Donc, lorsque vous implémentez une directive personnalisée en utilisant l'interface de ligne de commande angulaire,

73
00:05:17,860 --> 00:05:19,920
, il va créer une directive pour vous.

74
00:05:19,920 --> 00:05:24,490
Et puis vous remarquerez immédiatement que dans la directive,

75
00:05:24,490 --> 00:05:29,880
vous utiliserez cette classe

76
00:05:29,880 --> 00:05:35,290
décorateur de directive afin de convertir la classe en une directive et

77
00:05:35,290 --> 00:05:39,410
nous rencontrerons une telle dans l'exercice qui suit.

78
00:05:39,410 --> 00:05:45,120
De plus, avec le directeur, surtout lorsque vous utilisez des directives attributaires et

79
00:05:45,120 --> 00:05:50,490
, vous voulez modifier n'importe quel élément utilisé dans vos modèles.

80
00:05:50,490 --> 00:05:55,560
Une autre classe qui nous est utile est appelée ElementreF.

81
00:05:55,560 --> 00:06:00,740
Ceci est également important à partir du code Angular, et ceci est injecté dans votre constructeur de directives

82
00:06:00,740 --> 00:06:06,130
, écrit votre classe de directive.

83
00:06:06,130 --> 00:06:10,940
Et puis cela vous permet d'accéder aux éléments DOM et

84
00:06:10,940 --> 00:06:13,580
puis d'y apporter des modifications.

85
00:06:13,580 --> 00:06:18,137
Donc, avec cette compréhension rapide de la façon dont vous pouvez créer des directives personnalisées,

86
00:06:18,137 --> 00:06:22,351
regardons un exemple dans l'exercice qui suit cette conférence.

87
00:06:22,351 --> 00:06:28,469
[MUSIQUE]