1 00:00:03,649 --> 00:00:10,244 Hora de começar a primeira tarefa neste curso. 2 00:00:10,244 --> 00:00:14,564 Nesta tarefa, você estará trabalhando com componentes angulares. 3 00:00:14,564 --> 00:00:18,172 Você vai criar um novo componente chamado dishdetail 4 00:00:18,172 --> 00:00:21,690 para adicioná-lo à sua aplicação angular, 5 00:00:21,690 --> 00:00:29,399 e você vai atualizar seu modelo, para que ele mostre os detalhes de um prato específico. 6 00:00:29,399 --> 00:00:37,645 Anteriormente, no exercício anterior, introduzimos um cartão em nosso componente de menu. 7 00:00:37,645 --> 00:00:41,954 Vamos remover esse cartão e, em vez disso, incluir o componente 8 00:00:41,954 --> 00:00:46,929 dishdetail no lugar desse cartão para que o componente 9 00:00:46,929 --> 00:00:53,009 dishdetail possa exibir suas informações 10 00:00:53,009 --> 00:00:56,263 nessa parte da tela. 11 00:00:56,263 --> 00:01:01,435 Sua primeira tarefa é criar o componente dishdetail. 12 00:01:01,435 --> 00:01:08,060 No final da primeira tarefa, uma vez que você tenha criado o componente dishdetail, 13 00:01:08,060 --> 00:01:11,810 então, no arquivo de modelo de componentes do menu, 14 00:01:11,810 --> 00:01:18,020 você vai substituir esse cartão pelo seletor 15 00:01:18,020 --> 00:01:19,430 do componente dishdetail lá, 16 00:01:19,430 --> 00:01:23,510 para que os detalhes do componente dishdetail sejam exibidos 17 00:01:23,510 --> 00:01:27,579 logo abaixo do menu no componente menu. 18 00:01:27,579 --> 00:01:31,564 Já vimos como você pode adicionar esse seletor 19 00:01:31,564 --> 00:01:35,750 de um componente em outro componente. 20 00:01:35,750 --> 00:01:37,693 Quando criamos o componente do menu, 21 00:01:37,693 --> 00:01:41,500 incluímos isso no componente do aplicativo, 22 00:01:41,500 --> 00:01:48,710 de modo que no final da primeira tarefa, este seria o resultado em seu navegador, 23 00:01:48,710 --> 00:01:53,454 onde, em vez do cartão exibindo os detalhes do prato, 24 00:01:53,454 --> 00:01:58,920 você verá essas palavras chamadas “dishdetail works!” na parte inferior da página. 25 00:01:58,920 --> 00:02:02,390 Depois de concluir isso, você baixará 26 00:02:02,390 --> 00:02:09,349 um arquivo de modelo de componentes dishdetail pré-configurado com algumas peças faltando, 27 00:02:09,349 --> 00:02:18,474 e então substituirá no lugar no modelo do seu componente dishdetail. 28 00:02:18,474 --> 00:02:24,439 Depois de substituir o modelo do componente dishdetail fornecido, 29 00:02:24,439 --> 00:02:31,474 então você verá a página atualizada assim. 30 00:02:31,474 --> 00:02:35,692 Então, você verá duas partes na página aqui, uma que diz 31 00:02:35,692 --> 00:02:39,480 “Exibir os detalhes do prato aqui.” 32 00:02:39,480 --> 00:02:43,909 Você vai estar usando um componente de cartão para criar os detalhes do prato, 33 00:02:43,909 --> 00:02:47,145 e exibir esse prato aqui. 34 00:02:47,145 --> 00:02:52,009 Além disso, você também exibirá um conjunto de comentários sobre o prato 35 00:02:52,009 --> 00:02:58,444 na segunda parte deste componente aqui. 36 00:02:58,444 --> 00:03:04,270 Agora, para começar, nas instruções de atribuição, 37 00:03:04,270 --> 00:03:09,710 Eu forneci um novo objeto JavaScript 38 00:03:09,710 --> 00:03:11,719 contendo os detalhes do prato, 39 00:03:11,719 --> 00:03:15,770 incluindo os comentários sobre esse prato. 40 00:03:15,770 --> 00:03:18,875 Você vai usar essa informação para construir 41 00:03:18,875 --> 00:03:21,740 estes dois: o componente do cartão para exibir 42 00:03:21,740 --> 00:03:26,944 os detalhes do prato, e a lista de comentários aqui. 43 00:03:26,944 --> 00:03:32,699 Sua segunda tarefa é, em seguida, atualizar seu arquivo 44 00:03:32,699 --> 00:03:39,349 TypeScript para incluir a nova variável prato lá, 45 00:03:39,349 --> 00:03:45,379 e, em seguida, usar a variável prato com o componente do cartão, 46 00:03:45,379 --> 00:03:52,710 e, em seguida, preparar o componente do cartão aqui para exibir os detalhes do prato. 47 00:03:52,710 --> 00:03:55,400 Uma vez que você completar a segunda tarefa, 48 00:03:55,400 --> 00:03:59,330 em seu aplicativo você verá que, 49 00:03:59,330 --> 00:04:04,699 logo abaixo do menu, você verá os detalhes da informação do prato 50 00:04:04,699 --> 00:04:09,590 sendo exibido em um cartão como este aqui, 51 00:04:09,590 --> 00:04:13,520 para que você possa ver o título, a imagem, 52 00:04:13,520 --> 00:04:17,129 e também a descrição feita abaixo aqui. 53 00:04:17,129 --> 00:04:22,519 Agora, depois de concluir isso, você passará para a terceira tarefa. 54 00:04:22,519 --> 00:04:29,120 Na terceira tarefa, você usará os comentários que também estão dentro do prato 55 00:04:29,120 --> 00:04:35,239 que nós fornecemos a você no objeto JavaScript, 56 00:04:35,239 --> 00:04:40,819 e, em seguida, usará isso para construir e exibir uma lista de comentários aqui. 57 00:04:40,819 --> 00:04:43,235 No final da terceira tarefa, 58 00:04:43,235 --> 00:04:48,595 isso é o que você verá sendo exibido no lado direito do seu prato. 59 00:04:48,595 --> 00:04:52,235 Você pode ver que você tem um cabeçalho aqui com 60 00:04:52,235 --> 00:04:54,019 a palavra “Comentários”, 61 00:04:54,019 --> 00:04:58,149 e, em seguida, você tem uma lista de comentários que estão sendo exibidos aqui. 62 00:04:58,149 --> 00:05:03,480 As informações para construir esses comentários estão disponíveis dentro do objeto JavaScript 63 00:05:03,480 --> 00:05:07,699 dish que nós fornecemos para você. 64 00:05:07,699 --> 00:05:11,610 Em particular, note que este é o comentário real, 65 00:05:11,610 --> 00:05:15,505 este é o número de estrelas dado a esse comentário, 66 00:05:15,505 --> 00:05:21,259 e é aqui que mostramos o nome do autor com dois traços na frente, 67 00:05:21,259 --> 00:05:25,589 e nota, no final, mostramos a data aqui. 68 00:05:25,589 --> 00:05:28,774 Para ser capaz de construir esta data aqui, 69 00:05:28,774 --> 00:05:33,600 você precisa usar um tubo angular chamado Data. 70 00:05:33,600 --> 00:05:37,610 Nós já vimos o uso de um tubo embutido chamado maiúsculas 71 00:05:37,610 --> 00:05:39,939 no exercício anterior, 72 00:05:39,939 --> 00:05:45,379 então você simplesmente usar o pipe Data para criar esta data 73 00:05:45,379 --> 00:05:50,660 para ser exibido à direita do nome do autor aqui. 74 00:05:50,660 --> 00:05:53,839 Então, essas são as dicas para você começar com 75 00:05:53,839 --> 00:05:59,240 esta terceira tarefa em sua primeira tarefa. 76 00:05:59,240 --> 00:06:02,849 Divirta-se completando a primeira tarefa. 77 00:06:02,849 --> 00:06:04,620 Quaisquer recursos que você precisa, 78 00:06:04,620 --> 00:06:09,980 o arquivo de modelo semi-concluído pré-configurado 79 00:06:09,980 --> 00:06:14,115 e o objeto JavaScript prato estão disponíveis 80 00:06:14,115 --> 00:06:18,649 nas instruções para esta atribuição.