1
00:00:00,000 --> 00:00:06,150
Agora vamos passar para

2
00:00:06,150 --> 00:00:09,045
nosso próximo exercício onde vamos criar

3
00:00:09,045 --> 00:00:13,275
um novo componente e adicioná-lo à nossa aplicação Angular.

4
00:00:13,275 --> 00:00:17,430
Em seguida, vamos fazer uso desse componente para controlar uma parte

5
00:00:17,430 --> 00:00:22,380
da tela que nós projetamos para a nossa aplicação Angular.

6
00:00:22,380 --> 00:00:27,380
A tela para a nossa aplicação Angular é muito chata no momento.

7
00:00:27,380 --> 00:00:32,240
Tudo o que temos é uma barra de ferramentas no topo e, em seguida, uma tela branca

8
00:00:32,240 --> 00:00:35,595
aqui, mas isso também nos dá ideias.

9
00:00:35,595 --> 00:00:39,560
Agora podemos pegar conteúdo adicional e, em seguida,

10
00:00:39,560 --> 00:00:43,970
colocar isso nesta parte da tela aqui. Como fazemos isso?

11
00:00:43,970 --> 00:00:46,850
Podemos criar um novo componente e, em seguida, entregar

12
00:00:46,850 --> 00:00:49,460
sobre esta parte da tela para esse componente e dizer,

13
00:00:49,460 --> 00:00:53,450
“Você cuida de renderizar o que quiser nessa parte da tela.”

14
00:00:53,450 --> 00:00:58,055
Então, essa visão será controlada pelo novo componente.

15
00:00:58,055 --> 00:01:03,345
Como fazemos isso? Vamos passar pelo exercício agora.

16
00:01:03,345 --> 00:01:06,610
Para começar o exercício,

17
00:01:06,610 --> 00:01:10,620
vá para as instruções de exercício que seguem este vídeo em particular.

18
00:01:10,620 --> 00:01:12,555
Em seguida, nas instruções de exercício,

19
00:01:12,555 --> 00:01:15,680
você verá alguns recursos de exercício,

20
00:01:15,680 --> 00:01:18,290
que é um arquivo zip disponível para você.

21
00:01:18,290 --> 00:01:23,085
Baixe esse arquivo zip para o seu computador,

22
00:01:23,085 --> 00:01:28,320
e isso lhe dará um arquivos.zip images.zip.

23
00:01:28,320 --> 00:01:36,340
Então, basta salvá-lo como images.zip arquivo em sua pasta de downloads,

24
00:01:36,340 --> 00:01:39,140
descompactá-lo, e então isso lhe dará

25
00:01:39,140 --> 00:01:42,200
uma pasta de imagens contendo

26
00:01:42,200 --> 00:01:46,700
um conjunto de imagens que vamos fazer uso em nosso aplicativo.

27
00:01:46,700 --> 00:01:51,379
Descompacte o arquivo images.zip que você acabou de baixar,

28
00:01:51,379 --> 00:01:56,415
e mova esse arquivo images.zip para o seu projeto,

29
00:01:56,415 --> 00:01:58,130
e dentro do seu projeto,

30
00:01:58,130 --> 00:02:02,695
para a pasta de fontes e ativos aqui.

31
00:02:02,695 --> 00:02:08,645
Então, novamente, mova a pasta de imagens que você obtém por

32
00:02:08,645 --> 00:02:15,110
descompactando o arquivo images.zip e, em seguida, mova essa pasta de imagens para seu aplicativo,

33
00:02:15,110 --> 00:02:17,465
assim, dentro de seu aplicativo,

34
00:02:17,465 --> 00:02:22,670
sob fontes e ativos subpasta.

35
00:02:22,670 --> 00:02:26,975
Estas imagens que são fornecidas aqui estarão

36
00:02:26,975 --> 00:02:31,690
disponíveis para uso dentro da sua aplicação Angular.

37
00:02:31,690 --> 00:02:37,310
Agora, vamos fazer uso do Angular CLI para

38
00:02:37,310 --> 00:02:43,025
gerar automaticamente um componente para nós e adicioná-lo ao nosso aplicativo Angular.

39
00:02:43,025 --> 00:02:45,750
Então, no terminal,

40
00:02:45,750 --> 00:02:50,420
ir para a pasta que contém seu aplicativo Angular e digite

41
00:02:50,420 --> 00:02:56,960
ng gerar menu componente.

42
00:02:56,960 --> 00:03:00,570
Então, vamos nomear este componente como o MenuComponent.

43
00:03:00,570 --> 00:03:03,980
Este menuComponent conterá o menu para

44
00:03:03,980 --> 00:03:08,390
o restaurante para o qual estamos preparando nosso aplicativo Angular.

45
00:03:08,390 --> 00:03:10,460
Então, quando você digitar isso,

46
00:03:10,460 --> 00:03:11,975
isso irá gerar automaticamente

47
00:03:11,975 --> 00:03:16,350
o menuComponent e, em seguida, adicioná-lo ao seu aplicativo Angular.

48
00:03:16,350 --> 00:03:19,970
Este menuComponent será criado e adicionado em

49
00:03:19,970 --> 00:03:27,300
a pasta fonte/app/menu do seu aplicativo.

50
00:03:27,300 --> 00:03:33,050
Então, ele irá criar um conjunto de arquivos na pasta do menu.

51
00:03:33,050 --> 00:03:35,550
Então, você pode ver que ele cria um arquivo SCSS,

52
00:03:35,550 --> 00:03:38,310
um arquivo HTML, e o arquivo ts,

53
00:03:38,310 --> 00:03:40,630
e então algo chamado arquivo ts espectral.

54
00:03:40,630 --> 00:03:42,495
Voltaremos a isso mais tarde.

55
00:03:42,495 --> 00:03:48,140
Em seguida, também, ele atualizará o arquivo module.ts do aplicativo.

56
00:03:48,140 --> 00:03:52,920
Então, vamos dar uma olhada no que acabou de acontecer quando você

57
00:03:52,920 --> 00:03:58,415
criou este menuComponent e o adicionou ao seu aplicativo Angular.

58
00:03:58,415 --> 00:04:01,040
Vamos ao Editor.

59
00:04:01,040 --> 00:04:03,930
Chegando ao nosso Editor,

60
00:04:03,930 --> 00:04:05,245
você agora vai notar que,

61
00:04:05,245 --> 00:04:06,650
na pasta do aplicativo,

62
00:04:06,650 --> 00:04:09,380
há uma nova pasta chamada menu lá,

63
00:04:09,380 --> 00:04:16,210
e esta pasta de menu contém todos os arquivos relacionados MenuComponent aqui.

64
00:04:16,210 --> 00:04:22,385
A Angular CLI segue o guia de estilo padrão Angular.

65
00:04:22,385 --> 00:04:25,715
O guia de estilos sugere que cada componente deve ser colocado

66
00:04:25,715 --> 00:04:29,765
em sua própria pasta como são vistos aqui,

67
00:04:29,765 --> 00:04:34,220
e eu praticamente gosto disso porque eu sou muito obsessivo sobre

68
00:04:34,220 --> 00:04:38,840
mantê-lo limpo hierarquia para minhas pastas de aplicativos aqui.

69
00:04:38,840 --> 00:04:41,825
Então, isso funciona muito bem para mim.

70
00:04:41,825 --> 00:04:44,545
Algumas pessoas gostam de uma hierarquia plana,

71
00:04:44,545 --> 00:04:46,570
mas eu só fico confuso com essa parte.

72
00:04:46,570 --> 00:04:51,455
Então, eu prefiro armazenar cada componente em sua própria pasta.

73
00:04:51,455 --> 00:04:53,480
Então, funciona bem para mim.

74
00:04:53,480 --> 00:04:58,430
Agora, se você abrir o arquivo app module.ts,

75
00:04:58,430 --> 00:05:02,390
você notará que o arquivo app module.ts foi atualizado

76
00:05:02,390 --> 00:05:06,810
incluindo outra importação para o arquivo app module.ts.

77
00:05:06,810 --> 00:05:09,435
Então, você vê que, juntamente com o AppComponent,

78
00:05:09,435 --> 00:05:15,235
o menuComponent foi adicionado automaticamente como uma importação para o módulo do aplicativo.

79
00:05:15,235 --> 00:05:17,570
Então, isso significa que o MenuComponent está agora

80
00:05:17,570 --> 00:05:20,470
disponível para o seu aplicativo Angular a ser usado.

81
00:05:20,470 --> 00:05:26,590
Além disso, se você verificar a propriedade declarations dentro do decorador ngModule,

82
00:05:26,590 --> 00:05:29,160
você verá que na propriedade declarations,

83
00:05:29,160 --> 00:05:31,465
além do AppComponent,

84
00:05:31,465 --> 00:05:34,120
você também tem o menuComponent incluído.

85
00:05:34,120 --> 00:05:37,270
Esta é a razão pela qual eu amo Angular CLI,

86
00:05:37,270 --> 00:05:40,035
porque simplifica tudo isso funcionou para mim.

87
00:05:40,035 --> 00:05:41,945
Se eu fosse fazê-lo à mão,

88
00:05:41,945 --> 00:05:48,710
Eu vou ter que ir manualmente para o app module.ts e, em seguida, digitar todo esse código lá,

89
00:05:48,710 --> 00:05:53,830
e há uma alta probabilidade de que eu acabe cometendo erros lá.

90
00:05:53,830 --> 00:05:57,800
Então, estamos economizando muitos problemas usando o Angular CLI.

91
00:05:57,800 --> 00:05:59,720
Então, é por isso que eu me apaixonei por

92
00:05:59,720 --> 00:06:04,455
Angular CLI para criar meus aplicativos Angular.

93
00:06:04,455 --> 00:06:07,965
Então, com isso, nós configuramos

94
00:06:07,965 --> 00:06:11,570
nosso menuComponent para estar disponível para nossa aplicação Angular.

95
00:06:11,570 --> 00:06:14,505
Agora, onde vou fazer uso do menuComponent?

96
00:06:14,505 --> 00:06:21,460
Vou fazer uso do menuComponent dentro do meu modelo AppComponents.

97
00:06:21,460 --> 00:06:25,275
Então, eu vou para o modelo AppComponents e, em seguida,

98
00:06:25,275 --> 00:06:29,810
incluir o menuComponent aqui no meu AppComponent.

99
00:06:29,810 --> 00:06:37,795
Então, isso vai essencialmente passar essa parte da tela para meu menuComponent.

100
00:06:37,795 --> 00:06:38,980
Como fazemos isso?

101
00:06:38,980 --> 00:06:44,300
Para fazer isso, primeiro vamos dar uma olhada rápida no arquivo MenuComponent.ts.

102
00:06:44,300 --> 00:06:47,425
Então, quando você abrir o arquivo MenuComponent.ts,

103
00:06:47,425 --> 00:06:54,225
você verá que o seletor para o MenuComponent foi definido como app-menu.

104
00:06:54,225 --> 00:07:02,615
Então, este é o nome do seletor padrão que o Angular CLI fornece para seus componentes.

105
00:07:02,615 --> 00:07:04,840
Você pode alterar isso se quiser,

106
00:07:04,840 --> 00:07:07,970
mas qualquer seletor que você especificar aqui,

107
00:07:07,970 --> 00:07:15,670
que formaria as tags que você usa para incluí-lo em seu arquivo de modelo.

108
00:07:15,670 --> 00:07:20,195
Então, voltando para AppComponent.html,

109
00:07:20,195 --> 00:07:23,795
agora, se eu quiser incluir o arquivo de menu aqui,

110
00:07:23,795 --> 00:07:24,930
então eu vou apenas dizer,

111
00:07:24,930 --> 00:07:31,775
app menu tag e voila,

112
00:07:31,775 --> 00:07:35,360
que parte da tela agora é entregue ao meu menuComponent,

113
00:07:35,360 --> 00:07:40,640
e cabe ao menuComponent decidir o que ele quer colocar lá.

114
00:07:40,640 --> 00:07:42,420
Então, seja o que for definido,

115
00:07:42,420 --> 00:07:49,535
o modelo MenuComponents será colocado no lugar aqui.

116
00:07:49,535 --> 00:07:53,630
Então, agora, tudo o que nos resta é ir e preparar

117
00:07:53,630 --> 00:07:58,695
nosso menuComponent para mostrar as informações apropriadas para nós.

118
00:07:58,695 --> 00:08:00,885
Vamos salvar as alterações,

119
00:08:00,885 --> 00:08:04,825
e, em seguida, vamos mudar para

120
00:08:04,825 --> 00:08:11,715
o próximo passo onde vamos criar o menu para o nosso restaurante usando o MenuComponent.

121
00:08:11,715 --> 00:08:14,845
Antes de fazer isso,

122
00:08:14,845 --> 00:08:17,625
o que eu vou fazer é,

123
00:08:17,625 --> 00:08:19,830
ir para a pasta do aplicativo aqui,

124
00:08:19,830 --> 00:08:22,090
e depois na pasta do aplicativo,

125
00:08:22,090 --> 00:08:29,660
Eu vou criar uma nova subpasta e nomeá-la como subpasta compartilhada.

126
00:08:29,660 --> 00:08:34,015
Agora, todos os arquivos que eu vou compartilhar em vários componentes,

127
00:08:34,015 --> 00:08:37,040
Eu vou colocá-lo na pasta compartilhada aqui.

128
00:08:37,040 --> 00:08:39,160
Agora, dentro da pasta compartilhada,

129
00:08:39,160 --> 00:08:45,895
Vou criar um novo arquivo chamado dish.ts.

130
00:08:45,895 --> 00:08:51,650
Dentro deste prato.ts, eu vou criar uma classe para definir

131
00:08:51,650 --> 00:08:59,050
um prato e torná-lo disponível para os componentes restantes para usar.

132
00:08:59,050 --> 00:09:02,555
Então, para definir uma classe TypeScript aqui,

133
00:09:02,555 --> 00:09:04,240
Eu vou dizer exportação,

134
00:09:04,240 --> 00:09:07,525
então eu estou exportando esta classe TypeScript aqui,

135
00:09:07,525 --> 00:09:13,550
classe de exportação, e então eu vou nomear a classe como prato.

136
00:09:13,550 --> 00:09:16,230
Dentro desta classe de prato,

137
00:09:16,230 --> 00:09:20,175
Agora posso definir várias propriedades.

138
00:09:20,175 --> 00:09:21,550
Então, para a classe dish,

139
00:09:21,550 --> 00:09:23,050
eu vou definir uma propriedade,

140
00:09:23,050 --> 00:09:27,425
que é um ID, que eu defino como uma string.

141
00:09:27,425 --> 00:09:31,330
Agora, observe, se você está vindo do mundo JavaScript,

142
00:09:31,330 --> 00:09:35,975
em JavaScript, você não precisa especificar o tipo de qualquer variável.

143
00:09:35,975 --> 00:09:43,380
TypeScript traz este recurso para você especificar o tipo para cada variável.

144
00:09:43,380 --> 00:09:46,405
Então, se você especificar nome, coluna e string,

145
00:09:46,405 --> 00:09:51,785
isso significa que a variável de nome será sempre do tipo string.

146
00:09:51,785 --> 00:09:55,595
Então, se você tentar atribuir um inteiro para o nome,

147
00:09:55,595 --> 00:09:58,400
então compilador TypeScript irá automaticamente

148
00:09:58,400 --> 00:10:01,850
pegar isso para você e, em seguida, dizer-lhe que há um erro.

149
00:10:01,850 --> 00:10:04,855
Essa é a razão, usando TypeScript,

150
00:10:04,855 --> 00:10:08,155
você pode reduzir o número de erros que você pode causar.

151
00:10:08,155 --> 00:10:11,850
JavaScript tradicionalmente não faz essa verificação de erro

152
00:10:11,850 --> 00:10:16,790
porque ele não tem nenhum conceito de tipos de dados.

153
00:10:16,790 --> 00:10:22,025
Mas se você está vindo de uma linguagem de programação tradicional como C++ ou Java,

154
00:10:22,025 --> 00:10:24,945
você está muito familiarizado com os tipos de dados,

155
00:10:24,945 --> 00:10:28,565
os tipos de dados primitivos e

156
00:10:28,565 --> 00:10:33,290
outros tipos de tipos de dados que já estão definidos na linguagem.

157
00:10:33,290 --> 00:10:41,315
TypeScript traz esse recurso para JavaScript ou melhor, como parte de TypeScript,

158
00:10:41,315 --> 00:10:47,865
e que permite definir variáveis e anexar tipos a essas variáveis,

159
00:10:47,865 --> 00:10:49,950
daí o nome TypeScript.

160
00:10:49,950 --> 00:10:51,500
Então, para o prato,

161
00:10:51,500 --> 00:10:53,970
Eu vou criar uma propriedade de nome.

162
00:10:53,970 --> 00:10:57,870
Então eu vou criar uma propriedade de imagem,

163
00:10:57,870 --> 00:10:59,640
que também é uma string.

164
00:10:59,640 --> 00:11:03,710
Esta string de imagem será uma string que aponta para

165
00:11:03,710 --> 00:11:08,635
a URL da imagem que eu vou usar para este prato em particular.

166
00:11:08,635 --> 00:11:18,230
Então eu vou definir uma categoria para este prato como também outra string destaque como Booleano,

167
00:11:18,230 --> 00:11:21,130
rótulo como uma string.

168
00:11:21,150 --> 00:11:31,810
Preço como uma string e, em seguida, descrição como uma string.

169
00:11:31,810 --> 00:11:37,695
Então, estas são propriedades que eu associo com a classe de prato.

170
00:11:37,695 --> 00:11:43,440
Então, isso vai definir vários pratos no meu menu do meu restaurante,

171
00:11:43,440 --> 00:11:48,060
e para cada prato eu preciso especificar todas essas várias propriedades.

172
00:11:48,060 --> 00:11:49,325
Agora, por que eu precisaria disso?

173
00:11:49,325 --> 00:11:54,400
Isso vai me ajudar a construir o menu para o meu restaurante como você vai ver muito em breve.

174
00:11:54,400 --> 00:12:02,890
Então, com isso, completamos a definição da minha classe lá.

175
00:12:02,890 --> 00:12:06,940
Vamos salvar as alterações no arquivo dish.ts.

176
00:12:06,940 --> 00:12:11,300
Agora, este arquivo dish.ts está exportando uma classe.

177
00:12:11,300 --> 00:12:15,820
Agora, eu posso importar essa classe para qualquer um dos

178
00:12:15,820 --> 00:12:22,485
os arquivos de script do tipo de componente do meu aplicativo.

179
00:12:22,485 --> 00:12:28,550
Em seguida, vou mudar para o meu arquivo menu.component.ts.

180
00:12:28,550 --> 00:12:34,484
Dentro do arquivo menu.component.ts, além de importar o componente,

181
00:12:34,484 --> 00:12:38,420
Eu também verei que você está importando um OnInit lá.

182
00:12:38,420 --> 00:12:41,885
Chegaremos à parte OnInit em um dos exercícios posteriores.

183
00:12:41,885 --> 00:12:45,475
Eu vou explicar o que isso faz em um exercício posterior.

184
00:12:45,475 --> 00:12:53,820
Nós também importaremos a nova classe que criamos chamada classe Dish.

185
00:12:53,820 --> 00:12:56,160
Por que importamos esta classe de prato?

186
00:12:56,160 --> 00:13:03,180
Para que possamos usar isso como um tipo para uma variável que estou definindo aqui.

187
00:13:03,180 --> 00:13:04,850
Então, onde é essa aula de prato?

188
00:13:04,850 --> 00:13:13,955
Está em../shared/dish pasta.

189
00:13:13,955 --> 00:13:17,890
Então, isso está na pasta de prato compartilhado acima lá.

190
00:13:17,890 --> 00:13:22,460
Então você verá que definimos o componente de menu aqui.

191
00:13:22,460 --> 00:13:23,640
Então, você pode ver que ele diz,

192
00:13:23,640 --> 00:13:27,950
“Exportar componente de menu de classe” e, em seguida, ele diz, “Implementar nele”.

193
00:13:27,950 --> 00:13:30,630
Nós vamos voltar a isso em um pouco mais tarde.

194
00:13:30,630 --> 00:13:37,130
Você também vê que há um construtor e há mais um método aqui chamado NGUnit.

195
00:13:37,130 --> 00:13:40,170
Vamos usá-los em alguns dos exercícios posteriores.

196
00:13:40,170 --> 00:13:42,970
Então, vamos deixá-lo lá como tal e vamos

197
00:13:42,970 --> 00:13:46,565
voltar a entender o que é em pouco tempo.

198
00:13:46,565 --> 00:13:48,940
Além disso, observe que para este componente,

199
00:13:48,940 --> 00:13:52,040
o modelo é definido no ponto de componente de menu HTML,

200
00:13:52,040 --> 00:13:56,070
e os URLs de estilo definidos lá.

201
00:13:56,070 --> 00:14:02,170
Agora, além disso, na minha classe componente de menu,

202
00:14:02,170 --> 00:14:07,100
Eu vou incluir uma nova variável chamada como

203
00:14:07,100 --> 00:14:14,660
pratos que seria uma matriz do tipo de prato.

204
00:14:14,660 --> 00:14:21,540
Ok? Então eu vou simplesmente incluir o conjunto de pratos

205
00:14:21,540 --> 00:14:29,955
na minha variável pratos que eu defini aqui.

206
00:14:29,955 --> 00:14:35,040
Agora, para digitar toda a coisa à mão vai levar muito tempo.

207
00:14:35,040 --> 00:14:39,060
Então, em vez disso, o que eu sugiro para você fazer é apenas ir e copiar

208
00:14:39,060 --> 00:14:45,780
o conteúdo diretamente das instruções que seguem este vídeo.

209
00:14:45,780 --> 00:14:47,350
Então, isso é o que eu vou fazer.

210
00:14:47,350 --> 00:14:50,810
Então volte e cole isso aqui.

211
00:14:50,810 --> 00:14:55,720
Agora você pode ver que eu cortei e colado a informação para

212
00:14:55,720 --> 00:15:00,120
todos os meus pratos a partir das instruções aqui.

213
00:15:00,120 --> 00:15:07,045
Então, isso completa a matriz de todos os pratos que são definidos nas minhas instruções.

214
00:15:07,045 --> 00:15:11,035
Então, essa é a maneira mais fácil de obter essas informações.

215
00:15:11,035 --> 00:15:13,525
Então, basta cortar e colar de lá.

216
00:15:13,525 --> 00:15:16,800
Agora, observe que para este prato,

217
00:15:16,800 --> 00:15:20,885
cada um deles é um objeto JavaScript aqui.

218
00:15:20,885 --> 00:15:25,240
Então, que pode ser mapeado para a classe de script de tipo correspondente lá.

219
00:15:25,240 --> 00:15:28,700
Então, você pode ver que cada objeto JavaScript tem propriedades lá,

220
00:15:28,700 --> 00:15:35,245
e essas propriedades correspondem exatamente às propriedades que eu defini para minha classe dish.

221
00:15:35,245 --> 00:15:37,080
Então, uma vez que eu definir isso,

222
00:15:37,080 --> 00:15:39,430
então esses pratos agora se tornarão uma variedade de pratos

223
00:15:39,430 --> 00:15:42,020
e isso agora ficará disponível para

224
00:15:42,020 --> 00:15:48,420
me usar quando eu definir meu modelo HTML para o meu menu.

225
00:15:48,420 --> 00:15:53,715
Vamos salvar as alterações que fizemos até agora e então vamos

226
00:15:53,715 --> 00:15:59,410
abrir o arquivo menu.component.html.

227
00:15:59,410 --> 00:16:02,580
Então, vamos para o arquivo menu.component.html.

228
00:16:02,580 --> 00:16:06,280
Você verá que no arquivo menu.component.html,

229
00:16:06,280 --> 00:16:11,390
você atualmente tem apenas um P com menu funciona aqui.

230
00:16:11,390 --> 00:16:17,390
Então, se você simplesmente colado lá e, em seguida, ver o aplicativo funcionando,

231
00:16:17,390 --> 00:16:20,500
você teria visto apenas este menu funciona na tela.

232
00:16:20,500 --> 00:16:25,640
Eu vou substituir isso pelo meu próprio código de modelo aqui.

233
00:16:25,640 --> 00:16:31,230
Este é o lugar onde eu vou pegar a ajuda do layout flexível angular para me ajudar

234
00:16:31,230 --> 00:16:37,125
a colocar meu conteúdo bem na minha tela.

235
00:16:37,125 --> 00:16:38,885
Então, para começar,

236
00:16:38,885 --> 00:16:41,490
Vou começar com um div,

237
00:16:41,490 --> 00:16:46,480
ao qual vou aplicar uma classe chamada container.

238
00:16:46,480 --> 00:16:49,710
Vou definir a classe de contêiner usando

239
00:16:49,710 --> 00:16:55,360
algum código CSS um pouco mais tarde neste exercício.

240
00:16:55,360 --> 00:16:57,715
Então, vou aplicar o recipiente de classe aqui.

241
00:16:57,715 --> 00:17:04,640
Eu também vou definir uma propriedade chamada fxlayout.

242
00:17:04,640 --> 00:17:07,545
Um atributo chamado fxlayout.

243
00:17:07,545 --> 00:17:10,205
Agora, este fxlayout é um atributo

244
00:17:10,205 --> 00:17:15,015
que o layout flexível angular me permite aplicar a um div.

245
00:17:15,015 --> 00:17:20,295
Especifica se os vários conteúdos

246
00:17:20,295 --> 00:17:25,440
que incluo dentro dessas div devem ser dispostos horizontalmente ou verticalmente.

247
00:17:25,440 --> 00:17:28,755
Então, eu vou especificar isso para ser uma coluna.

248
00:17:28,755 --> 00:17:32,675
Então, qualquer conteúdo que eu incluir dentro deste div,

249
00:17:32,675 --> 00:17:36,105
será colocado verticalmente um abaixo do outro na minha tela.

250
00:17:36,105 --> 00:17:43,855
Se você já viu a maneira grade de trabalhar com conteúdo no Bootstrap,

251
00:17:43,855 --> 00:17:47,100
você veria que isso essencialmente me diz que eu estou indo para

252
00:17:47,100 --> 00:17:50,970
colocar tudo em uma única coluna lá embaixo.

253
00:17:50,970 --> 00:17:55,700
Não confunda esta coluna com a coluna do Bootstrap da grade do Bootstrap.

254
00:17:55,700 --> 00:17:57,185
São duas coisas diferentes.

255
00:17:57,185 --> 00:18:01,290
Aqui, o atributo é fxlayout e eu especifico coluna.

256
00:18:01,290 --> 00:18:03,240
Eu também posso especificar isso como linha,

257
00:18:03,240 --> 00:18:07,470
o que significa que o conteúdo será colocado horizontalmente.

258
00:18:07,470 --> 00:18:14,590
Agora também, mais um atributo que eu vou especificar para isso é fxLayoutGap,

259
00:18:14,590 --> 00:18:18,705
que vou especificar como 10 pixels.

260
00:18:18,705 --> 00:18:23,330
Então, o que isso significa é que qualquer conteúdo que eu incluir aqui

261
00:18:23,330 --> 00:18:27,690
será separado um do outro por intervalo de 10 pixels entre cada um deles.

262
00:18:27,690 --> 00:18:33,745
A partir do conhecimento de Bootstraps, você vê o que é um ponto de corte aqui.

263
00:18:33,745 --> 00:18:38,050
Isso define uma separação de corte entre

264
00:18:38,050 --> 00:18:42,925
duas partes de conteúdo no meu modelo de aplicativo.

265
00:18:42,925 --> 00:18:46,945
Então, com isso, vamos fechar o div aqui.

266
00:18:46,945 --> 00:18:49,080
Agora, dentro desta div,

267
00:18:49,080 --> 00:18:57,735
Eu vou definir o conteúdo real que irá para o meu arquivo menu.component.html.

268
00:18:57,735 --> 00:19:04,035
Agora aqui, eu vou fazer uso de outro componente que

269
00:19:04,035 --> 00:19:10,745
material design fornece para mim chamado como um componente de lista de tapete.

270
00:19:10,745 --> 00:19:14,470
Então, este componente permite-me criar uma lista de

271
00:19:14,470 --> 00:19:19,215
itens que incluo no meu modelo aqui.

272
00:19:19,215 --> 00:19:25,360
Então, este é um componente de lista de materiais angular.

273
00:19:25,360 --> 00:19:30,980
Do Bootstrap, você percebe que no Bootstrap tínhamos o objeto de mídia.

274
00:19:30,980 --> 00:19:36,430
Então, a lista de esteiras é como o objeto de mídia em algum sentido do Bootstrap.

275
00:19:36,430 --> 00:19:39,470
Agora, vou aplicar uma classe,

276
00:19:39,470 --> 00:19:42,095
um atributo chamado como FxFlex.

277
00:19:42,095 --> 00:19:49,990
Agora, o que isso significa é que tudo isso será tratado como uma unidade ou um pedaço de conteúdo

278
00:19:49,990 --> 00:19:58,180
que eles serão definidos pelo meu layout flexível aqui.

279
00:19:58,180 --> 00:20:01,100
Então, se você estiver familiarizado com o layout flexível CSS.

280
00:20:01,100 --> 00:20:05,505
Então, este é um pedaço de conteúdo que será apresentado pelo meu layout flexível CSS.

281
00:20:05,505 --> 00:20:09,420
Então, aplique FxFlex aqui,

282
00:20:09,420 --> 00:20:16,610
e, em seguida, dentro aqui vou definir mat-list-item.

283
00:20:16,610 --> 00:20:18,380
Então, este é um item de lista aqui.

284
00:20:18,380 --> 00:20:22,250
Então, a partir do seu conhecimento HTML,

285
00:20:22,250 --> 00:20:28,090
se a tag LI que você usa em HTML é semelhante a esta aqui.

286
00:20:28,090 --> 00:20:31,240
Então, este é um item de lista mg aqui.

287
00:20:31,240 --> 00:20:34,705
Então, obviamente, dentro deste item da lista,

288
00:20:34,705 --> 00:20:39,220
você vai estar definindo a lista de coisas.

289
00:20:39,220 --> 00:20:45,750
Agora, angular fornece algumas diretivas estruturais que você pode aplicar

290
00:20:45,750 --> 00:20:53,455
para suas tags aqui que permite que você crie seu conteúdo.

291
00:20:53,455 --> 00:20:58,375
Agora, eu vou usar uma diretiva estrutural chamada ngFor.

292
00:20:58,375 --> 00:21:01,990
Vamos ver como usá-lo neste modelo.

293
00:21:01,990 --> 00:21:04,050
Então, mais tarde, após este exercício,

294
00:21:04,050 --> 00:21:07,250
Vou explicar brevemente para vocês quais são as diretivas estruturais e

295
00:21:07,250 --> 00:21:11,625
qual o propósito que servem na definição de seus modelos aqui.

296
00:21:11,625 --> 00:21:15,960
Então, dentro deste item de lista vazia, eu vou dizer,

297
00:21:15,960 --> 00:21:21,480
estrela, anote a sintaxe, estrela NgFor.

298
00:21:22,470 --> 00:21:25,500
Então, esta é a directiva estrutural,

299
00:21:25,500 --> 00:21:29,585
a NGpara a directiva estrutural em angular.

300
00:21:29,585 --> 00:21:34,690
O que esta diretiva estrutural NGFor permite que você faça é

301
00:21:34,690 --> 00:21:40,855
para iterar sobre uma matriz de itens.

302
00:21:40,855 --> 00:21:48,805
Lembre-se que nós definimos pratos como uma matriz de objetos de prato em nosso código.

303
00:21:48,805 --> 00:21:51,040
Agora, no meu modelo,

304
00:21:51,040 --> 00:21:54,095
Eu vou ter acesso a esse objeto pratos.

305
00:21:54,095 --> 00:21:56,945
Então aqui, se eu quiser iterar sobre ele,

306
00:21:56,945 --> 00:21:59,160
da maneira que eu especifico é eu vou dizer,

307
00:21:59,160 --> 00:22:04,950
“Deixe prato de pratos.”

308
00:22:04,950 --> 00:22:11,495
É assim que a sintaxe funciona para a diretiva estrutural NGFor.

309
00:22:11,495 --> 00:22:14,020
Então, deixe prato de pratos.

310
00:22:14,020 --> 00:22:21,805
O que isso significa é que os pratos são a matriz de objetos de prato.

311
00:22:21,805 --> 00:22:24,245
Quando selecionamos dizer deixe prato de pratos,

312
00:22:24,245 --> 00:22:27,130
isso me permitirá acessar cada elemento de

313
00:22:27,130 --> 00:22:30,460
a matriz e, em seguida, ele me ajuda a iterar sobre a matriz.

314
00:22:30,460 --> 00:22:32,085
Isto é como um loop for,

315
00:22:32,085 --> 00:22:36,210
se você estiver familiarizado com loops de programação.

316
00:22:36,210 --> 00:22:40,630
Então, isso age como um loop for para você e, em seguida, ele ajuda você a iterar

317
00:22:40,630 --> 00:22:46,855
sobre todos os elementos da matriz de pratos aqui.

318
00:22:46,855 --> 00:22:51,050
Este prato se torna um objeto JavaScript que me permite

319
00:22:51,050 --> 00:22:55,350
acessar cada elemento dessa matriz lá.

320
00:22:55,350 --> 00:23:00,680
Agora, a partir disso, também podemos agora obter acesso

321
00:23:00,680 --> 00:23:06,775
às propriedades de cada objeto individual dentro da minha matriz de pratos.

322
00:23:06,775 --> 00:23:13,335
Então, então, eu posso fazer uso deles para definir meu modelo aqui.

323
00:23:13,335 --> 00:23:16,120
Deixe-me colocar o modelo e, em seguida, vamos voltar e

324
00:23:16,120 --> 00:23:19,185
olhar como esses dois estão inter-relacionados aqui.

325
00:23:19,185 --> 00:23:21,760
Agora, dentro da minha lista vazia item,

326
00:23:21,760 --> 00:23:28,480
eu posso incluir uma imagem com o atributo como MatlistAvatar.

327
00:23:30,040 --> 00:23:38,625
Então, isso me permite incluir uma imagem e, em seguida, com a fonte sendo especificada aqui.

328
00:23:38,625 --> 00:23:44,275
Agora, curiosamente, olhe para a sintaxe que estou usando aqui.

329
00:23:44,275 --> 00:23:48,380
Dentro de aparelhos duplos, eu vou dizer dish.image.

330
00:23:48,560 --> 00:23:55,985
O que isso significa é que esta é uma interpolação unidirecional de que estamos falando.

331
00:23:55,985 --> 00:23:58,885
Aqui, quando eu especificar isso,

332
00:23:58,885 --> 00:24:07,635
o que isso significa é que esta fonte vai obter o valor de dish.image que definiu em

333
00:24:07,635 --> 00:24:10,515
meu objeto JavaScript que eu defini em

334
00:24:10,515 --> 00:24:17,050
minha classe de script de tipo lá e que está disponível para mim para fazer o layout aqui.

335
00:24:17,050 --> 00:24:22,510
Assim, que o valor dish.image estará disponível para mim e também para esta imagem,

336
00:24:22,510 --> 00:24:28,255
vou especificar um valor alternativo como dish.name.

337
00:24:28,255 --> 00:24:33,770
Lembre-se que o meu prato também tinha a propriedade nome disponível para

338
00:24:33,770 --> 00:24:39,240
me para que define uma imagem para a minha lista aqui.

339
00:24:39,240 --> 00:24:42,460
Você vai muito em breve perceber como esta lista parece em

340
00:24:42,460 --> 00:24:46,010
a tela quando concluímos este modelo aqui.

341
00:24:46,010 --> 00:24:53,140
Além disso, eu vou usar um h1 com tag MatLine.

342
00:24:53,140 --> 00:24:56,500
Novamente, este é o uso de

343
00:24:56,500 --> 00:25:04,900
o componente material angular lista para definir meu modelo aqui.

344
00:25:04,900 --> 00:25:12,800
Então, eu digo h1 MatLine então isso me ajuda a definir uma linha aqui e depois lá dentro,

345
00:25:12,800 --> 00:25:17,170
Eu vou usar o aparelho duplo e dizer dish.name aqui.

346
00:25:17,170 --> 00:25:24,930
Então, isso me permite obter o valor do nome do prato lá.

347
00:25:24,930 --> 00:25:33,140
Então, que define uma linha e, em seguida, o na próxima linha eu vou dizer p MatLine.

348
00:25:33,140 --> 00:25:36,370
Então, eu vou usar a tag p aqui e, em seguida, fechar

349
00:25:36,370 --> 00:25:39,655
fora da tag p e, em seguida, dentro da tag p,

350
00:25:39,655 --> 00:25:48,000
Eu vou usar um span para definir dish.description.

351
00:25:48,000 --> 00:25:52,025
Então, se você está familiarizado com objetos JavaScript,

352
00:25:52,025 --> 00:25:56,180
você agora vê como eu estou acessando as propriedades do

353
00:25:56,180 --> 00:26:02,030
meu objeto JavaScript aqui, dish.description aqui.

354
00:26:02,030 --> 00:26:06,595
Por nota, rodando por isso mais uma vez

355
00:26:06,595 --> 00:26:13,630
o atributo ngFor me permite iterar sobre uma matriz de objetos aqui.

356
00:26:13,630 --> 00:26:17,700
Então, pratos aqui é uma variedade de objetos de prato.

357
00:26:17,700 --> 00:26:20,865
Então, quando eu digo deixar prato de pratos,

358
00:26:20,865 --> 00:26:28,070
este prato vai me dar acesso a cada elemento de

359
00:26:28,070 --> 00:26:32,170
minha matriz de pratos e eu iterar sobre cada elemento da matriz

360
00:26:32,170 --> 00:26:36,525
e então eu vou estar criando este conteúdo para cada um deles.

361
00:26:36,525 --> 00:26:39,205
Então, este item de lista vazia,

362
00:26:39,205 --> 00:26:43,500
essencialmente age como um loop for de

363
00:26:43,500 --> 00:26:47,830
sua linguagem de computador tradicional e, em seguida, ele itera sobre

364
00:26:47,830 --> 00:26:52,890
a lista de pratos e, em seguida, apresenta cada um deles na minha tela.

365
00:26:52,890 --> 00:26:54,895
Então, com essa mudança,

366
00:26:54,895 --> 00:27:00,145
vamos salvar o arquivo componente do menu.

367
00:27:00,145 --> 00:27:06,800
Em seguida, vamos para o app.module.ts e precisamos importar o módulo MATList para isso.

368
00:27:06,800 --> 00:27:11,840
Então, dizemos, importar MatlistModule

369
00:27:11,840 --> 00:27:20,380
de Angular/material/list.Uma vez que temos importado isso lá,

370
00:27:20,380 --> 00:27:25,390
então vamos para baixo e, em seguida, atualizar as importações em

371
00:27:25,390 --> 00:27:30,320
o decorador módulo Ng e adicionar em

372
00:27:30,320 --> 00:27:36,435
o módulo MatList para a lista de importações lá.

373
00:27:36,435 --> 00:27:42,430
Este meu aplicativo module.ts agora é atualizado e, em seguida, também,

374
00:27:42,430 --> 00:27:47,770
Eu vou para o arquivo styles.scss e, em seguida, adicionar

375
00:27:47,770 --> 00:27:53,575
na classe recipiente aqui.

376
00:27:53,575 --> 00:27:55,890
O que a classe de contêiner define aqui?

377
00:27:55,890 --> 00:28:00,995
A classe de contêiner é a margem 20 pixels

378
00:28:00,995 --> 00:28:07,830
e exibir flex e salvar as alterações.

379
00:28:07,830 --> 00:28:12,210
Agora, vamos dar uma olhada na nossa página web.

380
00:28:12,210 --> 00:28:14,180
Indo para a nossa página web.

381
00:28:14,180 --> 00:28:15,885
Voilá. Lá vai você.

382
00:28:15,885 --> 00:28:22,250
O menu para o nosso restaurante mostrado em todo o seu esplendor na tela.

383
00:28:22,250 --> 00:28:25,365
Você vê como este menu foi criado.

384
00:28:25,365 --> 00:28:30,455
Veja a matriz de objetos JavaScript que você viu.

385
00:28:30,455 --> 00:28:35,250
Veja como cada uma das propriedades da matriz de objetos JavaScript foi usada e

386
00:28:35,250 --> 00:28:40,490
mapeada para os quatro itens na minha lista.

387
00:28:40,490 --> 00:28:44,170
Veja como as imagens correspondentes foram incluídas aqui

388
00:28:44,170 --> 00:28:48,430
usando o MatlistAvatar aqui.

389
00:28:48,430 --> 00:28:55,150
Então, isso cria imagens redondas aqui e, em seguida, observe como o nome de

390
00:28:55,150 --> 00:29:03,155
o prato é exibido aqui e, em seguida, a descrição do prato incluído aqui.

391
00:29:03,155 --> 00:29:09,010
Maravilhoso. Agora, temos o menu para o nosso restaurante em

392
00:29:09,010 --> 00:29:14,925
a tela usando um componente de menu em Angular.

393
00:29:14,925 --> 00:29:17,625
Isso conclui este exercício.

394
00:29:17,625 --> 00:29:21,860
Neste exercício, aprendemos a criar um novo componente.

395
00:29:21,860 --> 00:29:25,165
adicioná-lo em nosso aplicativo Angular,

396
00:29:25,165 --> 00:29:28,270
como incluir esse componente no modelo de

397
00:29:28,270 --> 00:29:32,365
outro componente para que crie a hierarquia dos componentes.

398
00:29:32,365 --> 00:29:39,255
Então vimos como podemos fazer uso do layout flexível angular e também

399
00:29:39,255 --> 00:29:42,700
os componentes de design de material para projetar

400
00:29:42,700 --> 00:29:47,560
o modelo para o nosso componente de menu para exibir o conteúdo aqui.

401
00:29:47,560 --> 00:29:52,710
Agora, se você me perguntar como eu me lembro de todas essas coisas.

402
00:29:52,710 --> 00:29:54,535
Bem, para ser honesto,

403
00:29:54,535 --> 00:29:59,435
você não pode se lembrar de tudo, mas você precisa entender a abordagem.

404
00:29:59,435 --> 00:30:03,035
Isso é mais importante do que tentar memorizar qualquer uma dessas coisas.

405
00:30:03,035 --> 00:30:06,735
Agora, se você me perguntar onde eu consigo a informação sobre

406
00:30:06,735 --> 00:30:12,740
o componente de lista de material angular.

407
00:30:12,740 --> 00:30:16,560
Podemos classificar a documentação do material angular e lá você

408
00:30:16,560 --> 00:30:21,005
terá os detalhes sobre como um componente de lista deve ser preparado.

409
00:30:21,005 --> 00:30:29,405
Agora, onde obtemos os detalhes sobre como projetamos um componente em angular?

410
00:30:29,405 --> 00:30:33,240
Nós apenas examinamos um pouco disso e, em seguida, neste exercício,

411
00:30:33,240 --> 00:30:41,080
aprendemos a criar um novo componente e depois aplicá-lo em nossa aplicação angular.

412
00:30:41,080 --> 00:30:44,790
Então, este é um bom ponto para você fazer um

413
00:30:44,790 --> 00:30:48,905
obter comentário com os componentes da mensagem parte um.

414
00:30:48,905 --> 00:30:50,540
No próximo exercício,

415
00:30:50,540 --> 00:30:54,895
vamos melhorar isso um pouco mais usando outro tipo

416
00:30:54,895 --> 00:31:00,920
de componente material angular para colocar o conteúdo na minha tela.