Es hora de empezar con la primera tarea de este curso.
En esta tarea, trabajarás con componentes angulares.
Crearás un nuevo componente llamado dishdetail
para añadirlo a tu aplicación angular,
y actualizarás su plantilla, para que muestre los detalles de un plato específico.
Anteriormente, en el ejercicio anterior, introdujimos una tarjeta en nuestro componente de menú.
Vamos a quitar esa tarjeta, y en su lugar incluir el componente de detalle
en lugar de esa tarjeta para que el componente
detalle pueda mostrar su información
en esa parte de la pantalla.
Su primera tarea es crear el componente dishdetail.
Al final de la primera tarea, una vez que haya creado el componente dishdetail,
luego, en el archivo de plantilla de componentes del menú,
va a reemplazar esa tarjeta por el selector
del componente dishdetail allí,
para que los detalles del componente dishdetail se muestren
justo debajo del menú en el componente de menú.
Ya hemos visto cómo se puede agregar ese selector
de un componente a otro componente.
Cuando creamos el componente de menú,
incluimos eso en el componente de aplicación,
para que al final de la primera tarea, este sería el resultado en su navegador,
donde, en lugar de la tarjeta que muestra los detalles del plato,
verá estas palabras llamadas «dishdetail works!» en la parte inferior de la página.
Una vez que complete esto, entonces descargará
un archivo de plantilla de componentes dishdetail preconfigurado con algunas piezas faltantes,
y luego reemplazará en su lugar en la plantilla de su componente dishdetail.
Una vez que reemplace la plantilla del componente dishdetail suministrado,
, verá la página actualizada así.
Por lo tanto, verá dos partes en la página aquí, una que dice
«Mostrar los detalles del plato aquí».
Vas a estar usando un componente de tarjeta para crear los detalles del plato,
y mostrar ese plato aquí.
Además, también mostrará un conjunto de comentarios sobre el plato
en la segunda parte de este componente aquí.
Ahora, para empezar, en las instrucciones de asignación,
te he suministrado un nuevo objeto JavaScript
que contiene los detalles del plato,
incluyendo los comentarios sobre ese plato.
Vas a utilizar esa información con el fin de construir
estos dos: el componente de la tarjeta para mostrar
los detalles del plato, y la lista de comentarios aquí.
Su segunda tarea es actualizar su archivo
TypeScript para incluir la nueva variable de plato,
y luego usar la variable de plato con el componente de tarjeta,
y luego preparar el componente de tarjeta aquí para mostrar los detalles del plato.
Una vez que complete la segunda tarea,
en su aplicación verá que,
justo debajo del menú, verá los detalles de la información del plato
dado que se muestra en una tarjeta como esta aquí,
para que pueda ver el título, la imagen,
y también la descripción hecha a continuación.
Ahora, después de completar esto, pasará a la tercera tarea.
En la tercera tarea, usará los comentarios que también están encerrados dentro del plato
que le hemos proporcionado en el objeto JavaScript,
y luego usará eso para construir y mostrar una lista de comentarios aquí.
Al final de la tercera tarea,
esto es lo que verás que se muestra en el lado derecho de tu plato.
Puede ver que tiene un encabezado aquí con
la palabra «Comentarios»,
y luego tiene una lista de comentarios que se muestran aquí.
La información para construir estos comentarios está disponible dentro del objeto JavaScript de plato
que hemos dado para usted.
En particular, tenga en cuenta que este es el comentario real,
este es el número de estrellas dadas a ese comentario,
y aquí es donde mostramos el nombre del autor con dos guiones al frente,
y nota, al final, mostramos la fecha aquí.
Para poder construir esta fecha aquí,
necesita usar una tubería angular llamada Fecha.
Ya hemos visto el uso de una tubería incorporada llamada Mayúscula
en el ejercicio anterior,
por lo que simplemente usa la tubería Fecha para crear esta fecha
que se mostrará a la derecha del nombre del autor aquí.
Así que, esas son las pistas para que comiences con
esta tercera tarea en tu primera tarea.
Diviértete completando la primera tarea.
Independientemente de los recursos que necesite,
el archivo de plantilla preconfigurado
y el objeto JavaScript del plato están disponibles
en las instrucciones para esta asignación.