1
00:00:03,650 --> 00:00:10,075
Nous venons d'avoir une brève introduction aux directives attribuées dans la conférence précédente.

2
00:00:10,075 --> 00:00:16,440
Construisons maintenant une directive d'attribut personnalisée pour notre application angulaire, puis

3
00:00:16,440 --> 00:00:23,025
en faire usage dans les vues de certains des composants de notre application angulaire.

4
00:00:23,025 --> 00:00:26,340
En cours de route, nous allons apprendre comment créer des directives personnalisées

5
00:00:26,340 --> 00:00:30,795
et les utiliser dans notre application Angular.

6
00:00:30,795 --> 00:00:36,275
Nous allons utiliser l'interface de ligne de commande angulaire pour créer la directive personnalisée et par la suite,

7
00:00:36,275 --> 00:00:39,830
la mettre à jour pour effectuer le type de fonctionnalités

8
00:00:39,830 --> 00:00:45,245
dont nous avons besoin par cette directive attributaire.

9
00:00:45,245 --> 00:00:51,220
Sous la directive garder la directive dans un dossier distinct nommé Directives,

10
00:00:51,220 --> 00:00:52,700
dans mon dossier d'application.

11
00:00:52,700 --> 00:00:56,805
Alors, permettez-moi de créer un nouveau dossier nommé Directives.

12
00:00:56,805 --> 00:01:02,820
Maintenant, je vais créer ma directive personnalisée dans ce dossier Directives.

13
00:01:02,820 --> 00:01:07,170
prendra l'aide de l'interface de ligne de commande angulaire pour créer notre directive personnalisée.

14
00:01:07,170 --> 00:01:08,495
Donc, à l'invite,

15
00:01:08,495 --> 00:01:20,400
type ng generate ou g detectives/highlight.

16
00:01:20,780 --> 00:01:26,110
Donc, cette directive particulière va s'appeler la directive Highlight.

17
00:01:26,110 --> 00:01:28,790
Donc, avec cela, nous allons créer

18
00:01:28,790 --> 00:01:34,460
une nouvelle directive appelée la directive highlight, puis nous allons maintenant aller

19
00:01:34,460 --> 00:01:38,600
et éditer ces fichiers de directive highlight que

20
00:01:38,600 --> 00:01:43,175
ont été créés pour créer notre directive personnalisée.

21
00:01:43,175 --> 00:01:46,895
Qu'est-ce que j'essaie de réaliser exactement avec cette directive ?

22
00:01:46,895 --> 00:01:52,910
Laissez-moi vous emmener à la vue du menu dans notre application Angular.

23
00:01:52,910 --> 00:01:54,355
Dans la vue du menu,

24
00:01:54,355 --> 00:01:58,420
quand je veux sélectionner l'un de ces éléments actuellement,

25
00:01:58,420 --> 00:02:01,495
Je n'ai aucune idée exactement où je suis.

26
00:02:01,495 --> 00:02:08,520
Maintenant, quand ma souris passe sur l'un de ces éléments de ma liste de grille,

27
00:02:08,520 --> 00:02:13,340
, je veux pouvoir mettre en évidence un élément pour indiquer que si je clique,

28
00:02:13,340 --> 00:02:15,870
je vais sélectionner cet élément particulier.

29
00:02:15,870 --> 00:02:19,220
Donc, c'est ce que la fonctionnalité que je vais concevoir

30
00:02:19,220 --> 00:02:23,825
en utilisant ma directive de surbrillance que je viens de créer.

31
00:02:23,825 --> 00:02:28,410
Pour ce faire, ouvrons le fichier directive.ts de la mise en évidence.

32
00:02:28,410 --> 00:02:33,935
Donc, vous voyez que nous avons les échafaudages nus disponibles pour la directive

33
00:02:33,935 --> 00:02:36,500
déjà ici et vous verrez que

34
00:02:36,500 --> 00:02:39,845
a déjà importé le directeur à partir du code Angular.

35
00:02:39,845 --> 00:02:45,230
Maintenant, je vais ajouter quelques importations supplémentaires.

36
00:02:45,230 --> 00:02:52,055
Donc, nous allons importer ElementreF et ensuite nous importerons Renderer2 ici.

37
00:02:52,055 --> 00:02:57,215
Now Renderer2 est disponible uniquement avec Angular quatre et au-dessus.

38
00:02:57,215 --> 00:02:59,710
La version antérieure de rendu s'appelait

39
00:02:59,710 --> 00:03:04,290
renderush et elle a été dupliquée maintenant avec Angular quatre.

40
00:03:04,290 --> 00:03:06,920
Renderer2 est maintenant une nouvelle implémentation du rendu

41
00:03:06,920 --> 00:03:11,030
avec un meilleur support pour d'autres fonctionnalités.

42
00:03:11,030 --> 00:03:18,045
Donc, je vais appliquer le Renderer2 pour créer la directive de surbrillance.

43
00:03:18,045 --> 00:03:20,005
Maintenant, pourquoi utilisons-nous ce moteur de rendu ?

44
00:03:20,005 --> 00:03:23,690
Maintenant, lorsque vous créez des directives dans votre application Angular,

45
00:03:23,690 --> 00:03:25,640
à partir de votre application Angular elle-même,

46
00:03:25,640 --> 00:03:30,750
bien qu'au moment où notre application Angular soit rendue principalement dans le navigateur,

47
00:03:30,750 --> 00:03:33,740
vous pouvez utiliser le même code d'échafaudage pour

48
00:03:33,740 --> 00:03:37,420
votre application Angular pour créer une application à d'autres fins.

49
00:03:37,420 --> 00:03:42,985
Dans le cours de saut natif que nous verrons plus tard dans cette spécialisation,

50
00:03:42,985 --> 00:03:50,385
nous verrons une autre utilisation de ce code pour créer des applications utilisant NativeScript.

51
00:03:50,385 --> 00:03:54,470
Donc, dans ce cas, le rendu serait fait d'une manière différente,

52
00:03:54,470 --> 00:03:56,160
pas dans un navigateur.

53
00:03:56,160 --> 00:04:00,455
Donc, nous devons utiliser ce Renderer2,

54
00:04:00,455 --> 00:04:03,710
qui nous permet de s'adapter automatiquement à

55
00:04:03,710 --> 00:04:08,120
la plate-forme appropriée sur laquelle le rendu de cette vue est fait.

56
00:04:08,120 --> 00:04:13,320
Donc, c'est la raison pour laquelle j'utilise le rendu ici.

57
00:04:13,660 --> 00:04:20,460
Aussi, une chose de plus que je veux importer est HostListener.

58
00:04:20,460 --> 00:04:24,650
Le HostListener écoutera les mouvements de la souris depuis l'écran

59
00:04:24,650 --> 00:04:28,755
et répondra de manière appropriée dans ces circonstances.

60
00:04:28,755 --> 00:04:34,099
Nous verrons leur utilisation lorsque nous créerons la directive dans quelques instants.

61
00:04:34,099 --> 00:04:37,010
Alors maintenant, que nous avons importé les choses dont nous avons besoin,

62
00:04:37,010 --> 00:04:40,620
, nous allons injecter quelques choses dans notre constructeur.

63
00:04:40,620 --> 00:04:47,180
Donc, nous allons d'abord utiliser un el,

64
00:04:47,180 --> 00:04:52,625
qui est du type ElementRef et

65
00:04:52,625 --> 00:04:59,569
aussi le second que nous utiliserons est le rendu,

66
00:04:59,569 --> 00:05:04,265
qui est du type Renderer2.

67
00:05:04,265 --> 00:05:11,254
Maintenant avec ceci, ce que nous allons faire est que nous allons utiliser

68
00:05:11,254 --> 00:05:20,360
le HostListener et ensuite ils indiqueraient que pour HostListener,

69
00:05:20,360 --> 00:05:28,094
lorsque l'événement mouseenter se produit,

70
00:05:28,094 --> 00:05:38,340
alors nous appellerons la méthode onmouseenter

71
00:05:38,340 --> 00:05:41,400
et dans la méthode onmouseenter, nous allons faire quelque chose.

72
00:05:41,400 --> 00:05:43,790
De même, je vais créer un autre

73
00:05:43,790 --> 00:05:55,005
appelé HostListener et mouseleave.

74
00:05:55,005 --> 00:05:58,310
Alors quand la souris quitte une région particulière,

75
00:05:58,310 --> 00:06:02,790
alors que vas-tu faire sur mouseleave ?

76
00:06:02,950 --> 00:06:06,470
Nous allons faire une autre opération.

77
00:06:06,470 --> 00:06:11,660
Donc, ce que nous allons faire est quand la souris entre dans une région particulière, dans ce cas,

78
00:06:11,660 --> 00:06:15,710
nous utilisons cette directive d'attribut afin de mettre en évidence

79
00:06:15,710 --> 00:06:22,130
l'élément spécifique de ma liste de grille sur lequel la souris a plané.

80
00:06:22,130 --> 00:06:24,935
Donc, c'est le but de l'implémentation de ces

81
00:06:24,935 --> 00:06:28,050
et lorsque le pointeur de la souris s'éloigne de cet élément,

82
00:06:28,050 --> 00:06:29,580
qui ne sera plus mis en surbrillance.

83
00:06:29,580 --> 00:06:31,575
Donc, c'est le but de cette directive,

84
00:06:31,575 --> 00:06:33,850
la directive de mise en évidence que je crée ici.

85
00:06:33,850 --> 00:06:40,715
Donc, quand la souris entre dans une zone particulière.

86
00:06:40,715 --> 00:06:47,245
Donc, je vais utiliser le rendu et le rendu fournit une méthode appelée addClass.

87
00:06:47,245 --> 00:06:55,990
Donc, cette méthode sera utilisée pour ajouter une classe à l'élément de grille dans ma liste de grille.

88
00:06:55,990 --> 00:06:58,755
Donc, la classe que je vais ajouter,

89
00:06:58,755 --> 00:07:08,160
la façon dont elle est configurée dira this.el.NativeElement et

90
00:07:08,160 --> 00:07:12,260
le deuxième paramètre est

91
00:07:12,260 --> 00:07:17,240
le nom de classe que vous allez appliquer lorsque vous vous aventurez dans cette zone.

92
00:07:17,240 --> 00:07:21,965
Donc, nous appliquerons cette classe de surbrillance à cet élément lorsque

93
00:07:21,965 --> 00:07:27,425
votre souris se déplace dans la région où cet élément est rendu dans la vue.

94
00:07:27,425 --> 00:07:34,765
Maintenant, la même chose. Je vais faire une autre méthode quand la souris part,

95
00:07:34,765 --> 00:07:37,200
Je vais supprimer cette classe.

96
00:07:37,200 --> 00:07:41,275
Donc, la méthode RemoveClass est également supportée par Renderer2.

97
00:07:41,275 --> 00:07:42,530
Donc, dans ce cas,

98
00:07:42,530 --> 00:07:44,780
lorsque la souris se déplace dans cette région,

99
00:07:44,780 --> 00:07:49,270
cette classe de surbrillance sera ajoutée à cet élément de grille.

100
00:07:49,270 --> 00:07:52,250
Lorsque la souris quitte cet élément de grille particulier,

101
00:07:52,250 --> 00:07:54,890
la classe de surbrillance sera supprimée des éléments de la grille.

102
00:07:54,890 --> 00:07:57,685
Donc, voici comment utiliser cette directive attributaire,

103
00:07:57,685 --> 00:08:00,540
j'ajoute et supprime des classes,

104
00:08:00,540 --> 00:08:06,840
classes CSS à mon élément de grille dans ma page GridView.

105
00:08:06,840 --> 00:08:12,070
Maintenant, l'étape suivante est bien sûr de créer cette classe appelée comme classe de surbrillance.

106
00:08:12,070 --> 00:08:16,535
Donc, pour ce faire, je vais aller dans le fichier styles.scss

107
00:08:16,535 --> 00:08:21,495
où nous avons les styles globaux stockés ici.

108
00:08:21,495 --> 00:08:23,900
Donc, dans le fichier styles.scss,

109
00:08:23,900 --> 00:08:32,385
je vais ajouter dans la classe CSS de highlight là-bas.

110
00:08:32,385 --> 00:08:37,340
La classe CSS de surbrillance que je définirai comme background-color.

111
00:08:37,340 --> 00:08:42,825
Je vais appliquer background-pale,

112
00:08:42,825 --> 00:08:46,810
que j'ai déjà défini plus tôt et puis,

113
00:08:46,810 --> 00:08:52,140
j'appliquerais une bordure d'un pixel,

114
00:08:52,140 --> 00:08:55,780
bordure solide de la couleur,

115
00:08:55,860 --> 00:09:04,595
primary-color-dark, que j'ai également défini précédemment

116
00:09:04,595 --> 00:09:13,335
comme une variable CSS et je vais également augmenter l'index z à un.

117
00:09:13,335 --> 00:09:18,750
Ce qui signifie que cet objet sera soulevé sur les autres éléments.

118
00:09:18,750 --> 00:09:24,790
Je suis sûr de votre connaissance de CSS que vous comprenez ce qui est fait.

119
00:09:24,790 --> 00:09:31,870
De plus, je vais faire un peu de transformation sur l'article là-bas,

120
00:09:31,870 --> 00:09:36,495
Je vais juste l'escalader d'une petite quantité,

121
00:09:36,495 --> 00:09:39,570
par l'échelle jusqu'à 1,01.

122
00:09:39,570 --> 00:09:42,220
Donc, petit peu levé et ensuite apparu,

123
00:09:42,220 --> 00:09:46,115
de sorte que le met en évidence sur l'écran.

124
00:09:46,115 --> 00:09:50,370
Donc, c'est la classe CSS que

125
00:09:50,370 --> 00:09:54,535
je vais appliquer en utilisant la directive personnalisée que j'ai créée là-bas.

126
00:09:54,535 --> 00:09:57,530
Maintenant, où vais-je appliquer cette directive personnalisée ?

127
00:09:57,530 --> 00:10:04,340
Nous allons utiliser cette directive personnalisée dans notre fichier de modèle de composants de menu.

128
00:10:04,340 --> 00:10:06,170
Maintenant, avant de faire cela,

129
00:10:06,170 --> 00:10:08,840
revenons à mettre en évidence la directive et

130
00:10:08,840 --> 00:10:11,610
vous remarquerez que dans la directive highlight,

131
00:10:11,610 --> 00:10:17,555
vous avez ce décorateur de directive ici où vous avez une propriété appelée sélecteur,

132
00:10:17,555 --> 00:10:20,355
qui a été définie sur l'application highlight.

133
00:10:20,355 --> 00:10:23,360
Donc, où que vous vouliez utiliser cette directive,

134
00:10:23,360 --> 00:10:25,430
, vous utiliserez un attribut appelé

135
00:10:25,430 --> 00:10:30,110
AppHighlight dans cet élément particulier de votre modèle.

136
00:10:30,110 --> 00:10:33,940
Donc, c'est ainsi que cette directive est créée.

137
00:10:33,940 --> 00:10:36,910
Donc, appliquons cette application de mise en évidence de l'attribut

138
00:10:36,910 --> 00:10:41,165
directive dans notre fichier de modèle de composants de menu.

139
00:10:41,165 --> 00:10:44,749
Donc, en allant dans le fichier de modèle de composants de menu,

140
00:10:44,749 --> 00:10:50,090
Je vais appliquer cette directive de mise en évidence à ce mat-grid-tile ici.

141
00:10:50,090 --> 00:10:52,330
Donc, dans cette tuile de grille,

142
00:10:52,330 --> 00:11:01,950
, j'appliquerai cette directive d'attribut AppHighlight à cet élément particulier ici.

143
00:11:01,950 --> 00:11:04,485
Avec cela, nous avons terminé toutes les mises à jour.

144
00:11:04,485 --> 00:11:11,005
Sauvegardons les modifications puis allons jeter un oeil à notre application après ce changement.

145
00:11:11,005 --> 00:11:13,680
Aller à notre application dans le navigateur.

146
00:11:13,680 --> 00:11:20,270
Maintenant, avec l'application de la directive AppHighlight que nous venons de créer,

147
00:11:20,270 --> 00:11:27,050
vous remarquerez exactement ce qui se passe lorsque nous naviguons sur un élément dans notre vue de menu ici.

148
00:11:27,050 --> 00:11:32,010
Donc, vous remarquez que chaque fois que vous passez le curseur sur un élément de la vue,

149
00:11:32,010 --> 00:11:36,770
la classe CSS de surbrillance est appliquée à chacun d'eux,

150
00:11:36,770 --> 00:11:41,150
où quel élément particulier est mis en surbrillance dans le menu,

151
00:11:41,150 --> 00:11:46,270
de sorte que cela donne une meilleure expérience utilisateur pour l'utilisateur.

152
00:11:46,270 --> 00:11:50,719
Vous pouvez voir que la taille de cet élément est jamais si légèrement

153
00:11:50,719 --> 00:11:55,840
augmenté et présenté dans la vue ici.

154
00:11:55,840 --> 00:11:58,910
Ceci termine l'implémentation de

155
00:11:58,910 --> 00:12:03,470
la directive d'attribut personnalisé que nous avons fait dans cet exercice.

156
00:12:03,470 --> 00:12:09,810
C'est le bon moment pour vous de faire un commit git avec la directive message.