Hora de começar a primeira tarefa neste curso.
Nesta tarefa, você estará trabalhando com componentes angulares.
Você vai criar um novo componente chamado dishdetail
para adicioná-lo à sua aplicação angular,
e você vai atualizar seu modelo, para que ele mostre os detalhes de um prato específico.
Anteriormente, no exercício anterior, introduzimos um cartão em nosso componente de menu.
Vamos remover esse cartão e, em vez disso, incluir o componente
dishdetail no lugar desse cartão para que o componente
dishdetail possa exibir suas informações
nessa parte da tela.
Sua primeira tarefa é criar o componente dishdetail.
No final da primeira tarefa, uma vez que você tenha criado o componente dishdetail,
então, no arquivo de modelo de componentes do menu,
você vai substituir esse cartão pelo seletor
do componente dishdetail lá,
para que os detalhes do componente dishdetail sejam exibidos
logo abaixo do menu no componente menu.
Já vimos como você pode adicionar esse seletor
de um componente em outro componente.
Quando criamos o componente do menu,
incluímos isso no componente do aplicativo,
de modo que no final da primeira tarefa, este seria o resultado em seu navegador,
onde, em vez do cartão exibindo os detalhes do prato,
você verá essas palavras chamadas “dishdetail works!” na parte inferior da página.
Depois de concluir isso, você baixará
um arquivo de modelo de componentes dishdetail pré-configurado com algumas peças faltando,
e então substituirá no lugar no modelo do seu componente dishdetail.
Depois de substituir o modelo do componente dishdetail fornecido,
então você verá a página atualizada assim.
Então, você verá duas partes na página aqui, uma que diz
“Exibir os detalhes do prato aqui.”
Você vai estar usando um componente de cartão para criar os detalhes do prato,
e exibir esse prato aqui.
Além disso, você também exibirá um conjunto de comentários sobre o prato
na segunda parte deste componente aqui.
Agora, para começar, nas instruções de atribuição,
Eu forneci um novo objeto JavaScript
contendo os detalhes do prato,
incluindo os comentários sobre esse prato.
Você vai usar essa informação para construir
estes dois: o componente do cartão para exibir
os detalhes do prato, e a lista de comentários aqui.
Sua segunda tarefa é, em seguida, atualizar seu arquivo
TypeScript para incluir a nova variável prato lá,
e, em seguida, usar a variável prato com o componente do cartão,
e, em seguida, preparar o componente do cartão aqui para exibir os detalhes do prato.
Uma vez que você completar a segunda tarefa,
em seu aplicativo você verá que,
logo abaixo do menu, você verá os detalhes da informação do prato
sendo exibido em um cartão como este aqui,
para que você possa ver o título, a imagem,
e também a descrição feita abaixo aqui.
Agora, depois de concluir isso, você passará para a terceira tarefa.
Na terceira tarefa, você usará os comentários que também estão dentro do prato
que nós fornecemos a você no objeto JavaScript,
e, em seguida, usará isso para construir e exibir uma lista de comentários aqui.
No final da terceira tarefa,
isso é o que você verá sendo exibido no lado direito do seu prato.
Você pode ver que você tem um cabeçalho aqui com
a palavra “Comentários”,
e, em seguida, você tem uma lista de comentários que estão sendo exibidos aqui.
As informações para construir esses comentários estão disponíveis dentro do objeto JavaScript
dish que nós fornecemos para você.
Em particular, note que este é o comentário real,
este é o número de estrelas dado a esse comentário,
e é aqui que mostramos o nome do autor com dois traços na frente,
e nota, no final, mostramos a data aqui.
Para ser capaz de construir esta data aqui,
você precisa usar um tubo angular chamado Data.
Nós já vimos o uso de um tubo embutido chamado maiúsculas
no exercício anterior,
então você simplesmente usar o pipe Data para criar esta data
para ser exibido à direita do nome do autor aqui.
Então, essas são as dicas para você começar com
esta terceira tarefa em sua primeira tarefa.
Divirta-se completando a primeira tarefa.
Quaisquer recursos que você precisa,
o arquivo de modelo semi-concluído pré-configurado
e o objeto JavaScript prato estão disponíveis
nas instruções para esta atribuição.