Il est temps de commencer la toute première affectation de ce cours.
Dans cette mission, vous allez travailler avec des composants angulaires.
Vous allez créer un nouveau composant appelé dishdetail
pour l'ajouter dans votre application angulaire,
et vous mettrez à jour son modèle, afin qu'il affiche les détails d'un plat spécifique.
Plus tôt, dans l'exercice précédent, nous avons introduit une carte dans notre composant de menu.
Nous allons supprimer cette carte, et plutôt inclure le composant
dishdetail à la place de cette carte afin que le composant
dishdetail puisse afficher ses informations
dans cette partie de l'écran.
Votre première tâche consiste à créer le composant Daisdetail.
À la fin de la première tâche, une fois que vous avez créé le composant dishdetail,
puis, dans le fichier modèle de composants de menu,
vous allez remplacer cette carte par le sélecteur
du composant dishdetail là-dedans,
afin que les détails du composant dishdetail soient affichés
juste en dessous du menu dans le composant de menu.
Nous avons déjà vu comment vous pouvez ajouter ce sélecteur
d'un composant dans un autre composant.
Lorsque nous avons créé le composant menu,
nous l'avons inclus dans le composant app,
de sorte qu'à la fin de la première tâche, ce serait le résultat sur votre navigateur,
où, au lieu de la carte affichant les détails du plat,
vous verrez ces mots appelés « dishdetail works ! » au bas de la page.
Une fois que vous avez terminé cela, vous allez télécharger
un fichier de modèle de composants de dishdetail préconfiguré avec quelques pièces manquantes,
, puis le remplacer en place dans le modèle de votre composant de dishdetail.
Une fois que vous avez remplacé le modèle du composant dishdetail fourni,
alors vous verrez la page mise à jour comme ceci.
Donc, vous verrez deux parties dans la page ici, l'une qui dit
« Affichez les détails du plat ici. »
Vous allez utiliser un composant de carte pour créer les détails du plat,
et afficher ce plat ici.
De plus, vous afficherez également un ensemble de commentaires sur le plat
dans la deuxième partie de ce composant ici.
Maintenant, pour commencer, dans les instructions d'affectation,
Je vous ai fourni un nouvel objet JavaScript
contenant les détails du plat,
y compris les commentaires sur ce plat.
Vous allez utiliser ces informations pour construire
ces deux : le composant carte pour afficher
les détails du plat, et la liste des commentaires ici.
Votre deuxième tâche consiste à mettre à jour votre fichier
TypeScript pour y inclure la nouvelle variable de plat,
, puis utiliser la variable de plat avec le composant de carte,
, puis préparer le composant de carte ici pour afficher les détails du plat.
Une fois que vous avez terminé la deuxième tâche,
dans votre application, vous verrez que,
juste en dessous du menu, vous verrez les détails de l'information sur le plat de
étant affichés dans une carte comme celle-ci,
de sorte que vous pouvez voir le titre, l'image,
et aussi la description faite ci-dessous.
Maintenant, après avoir terminé cela, vous passerez à la troisième tâche.
Dans la troisième tâche, vous utiliserez les commentaires qui sont également inclus dans le plat
que nous vous avons fourni dans l'objet JavaScript,
, puis utiliserez cela pour construire et afficher une liste de commentaires ici.
A la fin de la troisième tâche,
c'est ce que vous verrez être affiché sur le côté droit de votre plat.
Vous pouvez voir que vous avez un en-tête ici avec
le mot « Commentaires »,
et ensuite vous avez une liste de commentaires affichés ici.
Les informations pour construire ces commentaires sont disponibles dans l'objet JavaScript
dish que nous avons donné pour vous.
Notons en particulier que c'est le commentaire réel,
c'est le nombre d'étoiles donné à ce commentaire,
et c'est là que nous affichons le nom de l'auteur avec deux tirets devant,
et note, à la fin, nous affichons la date ici.
Pour pouvoir construire cette date ici,
vous devez utiliser un tuyau angulaire nommé Date.
Nous avons déjà vu l'utilisation d'un tuyau intégré appelé Uppercase
dans l'exercice précédent,
donc vous utilisez simplement le tuyau Date pour créer cette date
à afficher à droite du nom de l'auteur ici.
Donc, ce sont les conseils pour vous aider à démarrer avec
cette troisième tâche de votre première mission.
Amusez-vous à terminer la première mission.
Quelles que soient les ressources dont vous avez besoin,
le fichier template pré-configuré
et l'objet JavaScript plat sont tous deux disponibles
dans les instructions pour cette affectation.