1
00:00:03,649 --> 00:00:10,244
Il est temps de commencer la toute première affectation de ce cours.

2
00:00:10,244 --> 00:00:14,564
Dans cette mission, vous allez travailler avec des composants angulaires.

3
00:00:14,564 --> 00:00:18,172
Vous allez créer un nouveau composant appelé dishdetail

4
00:00:18,172 --> 00:00:21,690
pour l'ajouter dans votre application angulaire,

5
00:00:21,690 --> 00:00:29,399
et vous mettrez à jour son modèle, afin qu'il affiche les détails d'un plat spécifique.

6
00:00:29,399 --> 00:00:37,645
Plus tôt, dans l'exercice précédent, nous avons introduit une carte dans notre composant de menu.

7
00:00:37,645 --> 00:00:41,954
Nous allons supprimer cette carte, et plutôt inclure le composant

8
00:00:41,954 --> 00:00:46,929
dishdetail à la place de cette carte afin que le composant

9
00:00:46,929 --> 00:00:53,009
dishdetail puisse afficher ses informations

10
00:00:53,009 --> 00:00:56,263
dans cette partie de l'écran.

11
00:00:56,263 --> 00:01:01,435
Votre première tâche consiste à créer le composant Daisdetail.

12
00:01:01,435 --> 00:01:08,060
À la fin de la première tâche, une fois que vous avez créé le composant dishdetail,

13
00:01:08,060 --> 00:01:11,810
puis, dans le fichier modèle de composants de menu,

14
00:01:11,810 --> 00:01:18,020
vous allez remplacer cette carte par le sélecteur

15
00:01:18,020 --> 00:01:19,430
du composant dishdetail là-dedans,

16
00:01:19,430 --> 00:01:23,510
afin que les détails du composant dishdetail soient affichés

17
00:01:23,510 --> 00:01:27,579
juste en dessous du menu dans le composant de menu.

18
00:01:27,579 --> 00:01:31,564
Nous avons déjà vu comment vous pouvez ajouter ce sélecteur

19
00:01:31,564 --> 00:01:35,750
d'un composant dans un autre composant.

20
00:01:35,750 --> 00:01:37,693
Lorsque nous avons créé le composant menu,

21
00:01:37,693 --> 00:01:41,500
nous l'avons inclus dans le composant app,

22
00:01:41,500 --> 00:01:48,710
de sorte qu'à la fin de la première tâche, ce serait le résultat sur votre navigateur,

23
00:01:48,710 --> 00:01:53,454
où, au lieu de la carte affichant les détails du plat,

24
00:01:53,454 --> 00:01:58,920
vous verrez ces mots appelés « dishdetail works ! » au bas de la page.

25
00:01:58,920 --> 00:02:02,390
Une fois que vous avez terminé cela, vous allez télécharger

26
00:02:02,390 --> 00:02:09,349
un fichier de modèle de composants de dishdetail préconfiguré avec quelques pièces manquantes,

27
00:02:09,349 --> 00:02:18,474
, puis le remplacer en place dans le modèle de votre composant de dishdetail.

28
00:02:18,474 --> 00:02:24,439
Une fois que vous avez remplacé le modèle du composant dishdetail fourni,

29
00:02:24,439 --> 00:02:31,474
alors vous verrez la page mise à jour comme ceci.

30
00:02:31,474 --> 00:02:35,692
Donc, vous verrez deux parties dans la page ici, l'une qui dit

31
00:02:35,692 --> 00:02:39,480
« Affichez les détails du plat ici. »

32
00:02:39,480 --> 00:02:43,909
Vous allez utiliser un composant de carte pour créer les détails du plat,

33
00:02:43,909 --> 00:02:47,145
et afficher ce plat ici.

34
00:02:47,145 --> 00:02:52,009
De plus, vous afficherez également un ensemble de commentaires sur le plat

35
00:02:52,009 --> 00:02:58,444
dans la deuxième partie de ce composant ici.

36
00:02:58,444 --> 00:03:04,270
Maintenant, pour commencer, dans les instructions d'affectation,

37
00:03:04,270 --> 00:03:09,710
Je vous ai fourni un nouvel objet JavaScript

38
00:03:09,710 --> 00:03:11,719
contenant les détails du plat,

39
00:03:11,719 --> 00:03:15,770
y compris les commentaires sur ce plat.

40
00:03:15,770 --> 00:03:18,875
Vous allez utiliser ces informations pour construire

41
00:03:18,875 --> 00:03:21,740
ces deux : le composant carte pour afficher

42
00:03:21,740 --> 00:03:26,944
les détails du plat, et la liste des commentaires ici.

43
00:03:26,944 --> 00:03:32,699
Votre deuxième tâche consiste à mettre à jour votre fichier

44
00:03:32,699 --> 00:03:39,349
TypeScript pour y inclure la nouvelle variable de plat,

45
00:03:39,349 --> 00:03:45,379
, puis utiliser la variable de plat avec le composant de carte,

46
00:03:45,379 --> 00:03:52,710
, puis préparer le composant de carte ici pour afficher les détails du plat.

47
00:03:52,710 --> 00:03:55,400
Une fois que vous avez terminé la deuxième tâche,

48
00:03:55,400 --> 00:03:59,330
dans votre application, vous verrez que,

49
00:03:59,330 --> 00:04:04,699
juste en dessous du menu, vous verrez les détails de l'information sur le plat de

50
00:04:04,699 --> 00:04:09,590
étant affichés dans une carte comme celle-ci,

51
00:04:09,590 --> 00:04:13,520
de sorte que vous pouvez voir le titre, l'image,

52
00:04:13,520 --> 00:04:17,129
et aussi la description faite ci-dessous.

53
00:04:17,129 --> 00:04:22,519
Maintenant, après avoir terminé cela, vous passerez à la troisième tâche.

54
00:04:22,519 --> 00:04:29,120
Dans la troisième tâche, vous utiliserez les commentaires qui sont également inclus dans le plat

55
00:04:29,120 --> 00:04:35,239
que nous vous avons fourni dans l'objet JavaScript,

56
00:04:35,239 --> 00:04:40,819
, puis utiliserez cela pour construire et afficher une liste de commentaires ici.

57
00:04:40,819 --> 00:04:43,235
A la fin de la troisième tâche,

58
00:04:43,235 --> 00:04:48,595
c'est ce que vous verrez être affiché sur le côté droit de votre plat.

59
00:04:48,595 --> 00:04:52,235
Vous pouvez voir que vous avez un en-tête ici avec

60
00:04:52,235 --> 00:04:54,019
le mot « Commentaires »,

61
00:04:54,019 --> 00:04:58,149
et ensuite vous avez une liste de commentaires affichés ici.

62
00:04:58,149 --> 00:05:03,480
Les informations pour construire ces commentaires sont disponibles dans l'objet JavaScript

63
00:05:03,480 --> 00:05:07,699
dish que nous avons donné pour vous.

64
00:05:07,699 --> 00:05:11,610
Notons en particulier que c'est le commentaire réel,

65
00:05:11,610 --> 00:05:15,505
c'est le nombre d'étoiles donné à ce commentaire,

66
00:05:15,505 --> 00:05:21,259
et c'est là que nous affichons le nom de l'auteur avec deux tirets devant,

67
00:05:21,259 --> 00:05:25,589
et note, à la fin, nous affichons la date ici.

68
00:05:25,589 --> 00:05:28,774
Pour pouvoir construire cette date ici,

69
00:05:28,774 --> 00:05:33,600
vous devez utiliser un tuyau angulaire nommé Date.

70
00:05:33,600 --> 00:05:37,610
Nous avons déjà vu l'utilisation d'un tuyau intégré appelé Uppercase

71
00:05:37,610 --> 00:05:39,939
dans l'exercice précédent,

72
00:05:39,939 --> 00:05:45,379
donc vous utilisez simplement le tuyau Date pour créer cette date

73
00:05:45,379 --> 00:05:50,660
à afficher à droite du nom de l'auteur ici.

74
00:05:50,660 --> 00:05:53,839
Donc, ce sont les conseils pour vous aider à démarrer avec

75
00:05:53,839 --> 00:05:59,240
cette troisième tâche de votre première mission.

76
00:05:59,240 --> 00:06:02,849
Amusez-vous à terminer la première mission.

77
00:06:02,849 --> 00:06:04,620
Quelles que soient les ressources dont vous avez besoin,

78
00:06:04,620 --> 00:06:09,980
le fichier template pré-configuré

79
00:06:09,980 --> 00:06:14,115
et l'objet JavaScript plat sont tous deux disponibles

80
00:06:14,115 --> 00:06:18,649
dans les instructions pour cette affectation.