1
00:00:00,031 --> 00:00:04,477
[MUSIC]

2
00:00:04,477 --> 00:00:09,184
Maintenant que nous avons eu une introduction rapide aux frameworks MVM et

3
00:00:09,184 --> 00:00:15,564
MVVM, aux services angulaires, ainsi qu'à l'injection de dépendance,

4
00:00:15,564 --> 00:00:21,003
passons maintenant à notre prochain exercice où nous allons créer notre premier service angulaire et ensuite l'injecter dans notre composant et

5
00:00:21,003 --> 00:00:26,442
en faire usage dans notre

6
00:00:26,442 --> 00:00:29,710
composant.

7
00:00:29,710 --> 00:00:34,370
Pour commencer, accédez à votre application dans

8
00:00:34,370 --> 00:00:38,629
le pad éditeur dans le dossier App,

9
00:00:38,629 --> 00:00:44,237
créez un nouveau sous-dossier et nommez-le en tant que Services.

10
00:00:44,237 --> 00:00:52,918
Maintenant, nous allons utiliser Angular CLI pour ajouter un nouveau service à notre application Angular.

11
00:00:52,918 --> 00:00:57,953
Pour ce faire, à l'invite, tapez ng

12
00:00:57,953 --> 00:01:04,673
générer le service, et services/plat.

13
00:01:04,673 --> 00:01:11,480
Ainsi, cela créera un nouveau service dans le dossier Services nommé service de vaisselle.

14
00:01:11,480 --> 00:01:16,815
Donc, une fois que cela est créé, vous voyez que deux fichiers sont créés

15
00:01:16,815 --> 00:01:23,837
par l'interface de ligne de commande angulaire appelée DishService.ts et dish.service.specter.ts.

16
00:01:23,837 --> 00:01:30,010
Celui-ci est utilisé pour tester notre service Angular pendant que nous en parlerons plus tard.

17
00:01:30,010 --> 00:01:35,361
Le second est où nous allons créer notre service de vaisselle et

18
00:01:35,361 --> 00:01:42,516
puis injecter cela dans notre module d'application et en faire usage dans notre composant de menu.

19
00:01:42,516 --> 00:01:47,550
En allant à l'éditeur, ouvrons le fichier dish.service.ts.

20
00:01:47,550 --> 00:01:52,618
Maintenant, lorsque vous ouvrez ce fichier, vous remarquez immédiatement ici la toute première déclaration

21
00:01:52,618 --> 00:01:58,108
qui dit, importez {Injectable} à partir de '@angular /core'.

22
00:01:58,108 --> 00:02:02,791
Donc, cet injectable nous permet de définir ce décorateur

23
00:02:02,791 --> 00:02:06,674
injectable à n'importe quelle classe que nous avons définie ici.

24
00:02:06,674 --> 00:02:10,730
Donc, vous pouvez voir que nous définissons une classe ici appelée DishService.

25
00:02:10,730 --> 00:02:15,532
En utilisant ce décorateur injectable à ce service de vaisselle,

26
00:02:15,532 --> 00:02:21,030
, nous rendons cet objet maintenant injectable dans notre application.

27
00:02:21,030 --> 00:02:25,481
C'est donc ce qui permet d'utiliser l'injection de dépendance dans notre application

28
00:02:25,481 --> 00:02:26,490
.

29
00:02:26,490 --> 00:02:30,345
Donc, une fois que vous avez déclaré la classe comme injectable,

30
00:02:30,345 --> 00:02:36,746
, nous allons maintenant configurer notre DishService pour nous fournir quelques informations.

31
00:02:36,746 --> 00:02:39,119
Donc ici, je vais importer,

32
00:02:42,757 --> 00:02:51,413
La classe Dish du dossier partagé,

33
00:02:51,413 --> 00:02:55,354
et aussi importer,

34
00:02:58,307 --> 00:03:01,887
La constante DISS de,

35
00:03:08,402 --> 00:03:11,574
Dossier partagé ici.

36
00:03:11,574 --> 00:03:14,353
Donc, une fois que j'ai importé ces deux,

37
00:03:14,353 --> 00:03:19,432
maintenant mon service peut être configuré pour nous fournir la valeur.

38
00:03:19,432 --> 00:03:24,246
Donc, à l'intérieur du service, je vais ajouter

39
00:03:24,246 --> 00:03:29,370
dans un nouvel appel de méthode getDays, et

40
00:03:29,370 --> 00:03:35,753
cette méthode retournera dans un tableau de plats ici.

41
00:03:35,753 --> 00:03:41,098
Et, donc cette méthode retournera la constante DISS

42
00:03:41,098 --> 00:03:45,722
que nous avons importée dans notre DishService.

43
00:03:45,722 --> 00:03:50,239
Avec cela, notre DishService est maintenant configuré pour

44
00:03:50,239 --> 00:03:54,866
fournir ce tableau d'objets JavaScript DISS à n'importe quelle

45
00:03:54,866 --> 00:03:59,398
autre partie de notre application qui en a besoin.

46
00:03:59,398 --> 00:04:03,862
Maintenant, avant que cela ne se produise, nous devons prendre ce service et

47
00:04:03,862 --> 00:04:06,660
puis injecter dans notre application.

48
00:04:06,660 --> 00:04:11,652
Pour ce faire, nous allons ouvrir le fichier .ts du module d'application.

49
00:04:11,652 --> 00:04:17,214
Donc, à l'intérieur du fichier .ts du module d'application, juste après avoir importé

50
00:04:17,214 --> 00:04:22,333
les composants juste là, je vais importer le,

51
00:04:25,974 --> 00:04:34,950
DishService juste là.

52
00:04:34,950 --> 00:04:36,618
Et ceci est importé à partir de,

53
00:04:42,730 --> 00:04:46,466
Services DishService ici.

54
00:04:46,466 --> 00:04:53,885
Donc, une fois que nous importons cela, alors nous déclarerons ce DishService en tant que fournisseur.

55
00:04:53,885 --> 00:04:58,121
Donc, si vous allez dans le décorateur de module ng, donc

56
00:04:58,121 --> 00:05:03,170
vous voyez cette troisième propriété ici appelée fournisseurs.

57
00:05:03,170 --> 00:05:05,960
Nous avons donc des déclarations, des importations et des fournisseurs.

58
00:05:05,960 --> 00:05:11,176
Donc, chaque fois que vous avez un service que vous voulez rendre disponible pour

59
00:05:11,176 --> 00:05:14,860
tous les composants d'une partie de ce module.

60
00:05:14,860 --> 00:05:21,170
Ensuite, vous allez spécifier cela en tant que fournisseur dans le module ici.

61
00:05:21,170 --> 00:05:25,618
Donc juste là, je vais dire, DishService, ici.

62
00:05:25,618 --> 00:05:31,036
Donc, avec cela, mon DishService devient maintenant disponible pour le reste de l'application.

63
00:05:31,036 --> 00:05:32,186
Maintenant, comment cela se produit-il ?

64
00:05:32,186 --> 00:05:36,948
La dépendance injectable Angular regarde cette information que nous avons déclarée ici, puis décide qu'elle a besoin de créer un DishService et

65
00:05:36,948 --> 00:05:44,382
l'injecte partout où elle est nécessaire.

66
00:05:44,382 --> 00:05:47,092
Maintenant, comment utilisons-nous ce service ?

67
00:05:47,092 --> 00:05:52,674
Nous voyons que dans le composant de menu, nous obtenions plus tôt

68
00:05:52,674 --> 00:06:00,180
la constante de la vaisselle directe en important à partir du fichier de vaisselle partagé ici.

69
00:06:00,180 --> 00:06:04,681
Maintenant, ce n'est pas le moyen idéal d'obtenir l'information,

70
00:06:04,681 --> 00:06:09,812
au lieu de lier l'information directement dans votre composant,

71
00:06:09,812 --> 00:06:14,685
vous devriez plutôt laisser un service récupérer cette information pour vous.

72
00:06:14,685 --> 00:06:24,579
Plus tard, nous pouvons reconcevoir notre service pour pouvoir aller chercher les mêmes informations à partir d'un serveur back-end si vous le souhaitez.

73
00:06:24,579 --> 00:06:28,396
En effet, c'est ce que nous ferons dans certains exercices ultérieurs.

74
00:06:28,396 --> 00:06:33,384
Donc, vous allez déléguer la responsabilité de récupérer les informations au service

75
00:06:33,384 --> 00:06:37,814
et ensuite vous ferez simplement usage du service dans ce composant de menu.

76
00:06:37,814 --> 00:06:43,627
Donc, nous allons supprimer ce composant vaisselle à partir de là et

77
00:06:43,627 --> 00:06:48,806
à la place, nous allons importer ce DishService ici.

78
00:06:48,806 --> 00:06:52,105
Et ce DishService est importé à partir du fichier

79
00:06:57,492 --> 00:07:04,140
services/dish.service ici.

80
00:07:04,140 --> 00:07:09,744
Donc, après avoir ajouté cela maintenant, nous avons fait une partie du travail.

81
00:07:09,744 --> 00:07:14,774
Maintenant, nous devons rendre ce service disponible pour que notre composant puisse l'utiliser.

82
00:07:14,774 --> 00:07:18,107
C'est donc là que nous allons descendre à ce constructeur ici.

83
00:07:18,107 --> 00:07:19,769
Dans ce constructeur, donc

84
00:07:19,769 --> 00:07:23,813
maintenant vous voyez l'utilisation du constructeur dans notre classe ici.

85
00:07:23,813 --> 00:07:28,814
Donc, dans ce constructeur, nous verrons

86
00:07:28,814 --> 00:07:35,609
DishService privé et DishService ici.

87
00:07:35,609 --> 00:07:38,377
Donc c'est du type DishService, donc

88
00:07:38,377 --> 00:07:43,914
lorsque vous déclarez cela dans le constructeur, lorsque ce composant est créé,

89
00:07:43,914 --> 00:07:48,771
puis ce DishService que vous avez injecté dans le module d'application.

90
00:07:48,771 --> 00:07:52,222
Lorsque vous injectez cela dans le module d'application,

91
00:07:52,222 --> 00:07:56,177
, il créera un seul objet DishService.

92
00:07:56,177 --> 00:08:00,956
Et cet objet DishService sera mis à votre disposition dans votre composant de menu

93
00:08:00,956 --> 00:08:02,123
ici.

94
00:08:02,123 --> 00:08:09,606
Alors maintenant, vous pouvez alors faire appel aux méthodes que ce DishService fournit pour vous

95
00:08:09,606 --> 00:08:13,780
afin de faire le travail en votre nom.

96
00:08:13,780 --> 00:08:15,847
Donc une fois que vous avez mis ça là-dedans,

97
00:08:15,847 --> 00:08:20,333
maintenant nous nous rendons compte que nous n'avons plus cette constante de vaisselle ici.

98
00:08:20,333 --> 00:08:24,311
J'ai donc besoin d'aller chercher cette information.

99
00:08:24,311 --> 00:08:29,138
Maintenant, c'est là que je vais tirer parti du service que j'ai à ma disposition pour

100
00:08:29,138 --> 00:08:31,023
chercher l'information pour nous.

101
00:08:31,023 --> 00:08:33,257
Où allons-nous chercher ces informations ?

102
00:08:33,257 --> 00:08:38,058
Donc, c'est là que nous allons prendre l'aide de cette méthode du cycle de vie appelée

103
00:08:38,058 --> 00:08:38,801
NGOnInit.

104
00:08:38,801 --> 00:08:43,861
Donc, lorsque vous déclarez cette méthode de cycle de vie appelée NGOnInit dans votre application

105
00:08:43,861 --> 00:08:49,561
, de sorte que vous voyez que dans la classe, vous dites implémente l'OnInit.

106
00:08:49,561 --> 00:08:54,239
Donc, l'implémentation de cette OnInit vous oblige à

107
00:08:54,239 --> 00:08:59,570
implémenter cette méthode NGOnInit dans le cadre de votre classe ici.

108
00:08:59,570 --> 00:09:02,461
Donc, à l'intérieur de cette méthode NGOnInit,

109
00:09:02,461 --> 00:09:07,450
, vous pouvez maintenant demander au service de récupérer ces informations.

110
00:09:07,450 --> 00:09:08,690
Pourquoi est-ce ainsi ?

111
00:09:08,690 --> 00:09:13,560
Cette méthode de cycle de vie sera exécutée

112
00:09:13,560 --> 00:09:19,040
par le framework Angular chaque fois que ce composant est instancié.

113
00:09:19,040 --> 00:09:23,770
Donc, chaque fois que ce composant est créé, cette méthode va être exécutée.

114
00:09:23,770 --> 00:09:34,623
Donc, quand cette méthode est exécutée, alors à ce moment-là, je peux aller chercher la vaisselle du DishService.

115
00:09:34,623 --> 00:09:36,839
Donc, je peux dire DishService, et

116
00:09:36,839 --> 00:09:42,700
alors vous saurez que vous avez la méthode getDishService dans le DishService.

117
00:09:42,700 --> 00:09:48,105
Vous pouvez invoquer la méthode pour récupérer les plats pour vous.

118
00:09:48,105 --> 00:09:52,511
Maintenant, quand nous faisons cela, alors l'objet vaisselle sera fourni par

119
00:09:52,511 --> 00:09:56,090
le service pour nous via cette méthode GetDats.

120
00:09:56,090 --> 00:10:03,829
Et qui peut être mis dans nos plats variable locale que nous avons définie ici.

121
00:10:03,829 --> 00:10:08,563
Donc, avec cela, nous terminons la mise à jour

122
00:10:08,563 --> 00:10:12,847
de tous nos fichiers d'application.

123
00:10:12,847 --> 00:10:18,993
Allons jeter un coup d'œil à l'application angulaire résultante.

124
00:10:18,993 --> 00:10:23,507
En passant au navigateur, vous pouvez maintenant voir que dans le navigateur l'application Angular

125
00:10:23,507 --> 00:10:26,030
s'affiche comme avant.

126
00:10:26,030 --> 00:10:30,342
Dans cette version comme vous l'avez vu, les informations sur les plats

127
00:10:30,342 --> 00:10:34,967
vont être récupérées dans votre composant en utilisant le service.

128
00:10:34,967 --> 00:10:38,847
Le service à son tour va chercher cette information pour vous.

129
00:10:38,847 --> 00:10:41,945
Maintenant, en ce moment, nous gardons le service très basique.

130
00:10:41,945 --> 00:10:46,105
Le service renvoie simplement cette valeur constante que nous avons définie ici.

131
00:10:46,105 --> 00:10:50,738
Plus tard, vous pouvez imaginer que vous étendriez le service pour aller et

132
00:10:50,738 --> 00:10:54,042
récupérer ces informations depuis le serveur back-end.

133
00:10:54,042 --> 00:10:55,428
Quand cela se produit,

134
00:10:55,428 --> 00:11:00,489
la récupération d'informations ne sera plus instantanée.

135
00:11:00,489 --> 00:11:04,911
C'est là que nous aurions besoin de l'aide des promesses et

136
00:11:04,911 --> 00:11:11,022
aussi de l'approche JavaScript réactive pour soutenir ce retard et

137
00:11:11,022 --> 00:11:17,881
traiter le retard dans la récupération des informations dans notre application.

138
00:11:17,881 --> 00:11:21,699
Nous en parlerons plus en détail dans le prochain module.

139
00:11:21,699 --> 00:11:26,683
Pour l'instant, notre application fonctionnera très bien, de sorte que vous pouvez sélectionner n'importe lequel de

140
00:11:26,683 --> 00:11:32,370
ces plats et les informations seront affichées comme avant.

141
00:11:32,370 --> 00:11:38,250
Avec cela, nous faisons concurrence à cet exercice où nous apprenons les bases des services Angular.

142
00:11:38,250 --> 00:11:41,700
Et nous avons également vu comment utiliser le service Angular,

143
00:11:41,700 --> 00:11:46,118
dans notre composant applications.

144
00:11:46,118 --> 00:11:51,682
C'est le bon moment pour vous de faire un commit git avec les services de base du message.

145
00:11:51,682 --> 00:11:57,797
[MUSIQUE].