1
00:00:00,000 --> 00:00:08,745
Agora que temos uma compreensão de aplicativos de página única,

2
00:00:08,745 --> 00:00:10,660
vamos continuar trabalhando em

3
00:00:10,660 --> 00:00:14,490
nossa aplicação angular que temos trabalhado nos exercícios até

4
00:00:14,490 --> 00:00:16,980
agora e desenvolvê-lo em

5
00:00:16,980 --> 00:00:21,535
o aplicativo de página única usando o suporte do módulo de roteador angular.

6
00:00:21,535 --> 00:00:25,110
Nós já incluímos vários componentes como parte de

7
00:00:25,110 --> 00:00:28,770
nossa aplicação angular no exercício anterior e já temos

8
00:00:28,770 --> 00:00:32,625
configurado para nossa aplicação angular para ser capaz de rotear

9
00:00:32,625 --> 00:00:37,410
entre dois componentes diferentes.

10
00:00:37,410 --> 00:00:40,970
Agora, vamos integrar mais em nossa aplicação angular e

11
00:00:40,970 --> 00:00:44,960
desenvolvê-lo na aplicação angular de pleno direito juntamente com

12
00:00:44,960 --> 00:00:49,040
a navegação entre os vários pontos de vista

13
00:00:49,040 --> 00:00:53,790
renderizados pelos vários componentes da nossa aplicação.

14
00:00:53,800 --> 00:00:58,275
Continuando com a nossa aplicação como está agora,

15
00:00:58,275 --> 00:01:05,990
temos a casa sendo renderizada quando você navega para a nossa aplicação

16
00:01:05,990 --> 00:01:09,740
agora e, em seguida, o modelo Home tem

17
00:01:09,740 --> 00:01:13,740
foi mostrado entre o cabeçalho eo rodapé e, em seguida, quando você vai para o Menu,

18
00:01:13,740 --> 00:01:19,920
o menu está sendo mostrado entre o cabeçalho e o rodapé na vista aqui.

19
00:01:19,920 --> 00:01:25,490
Agora, obviamente, precisamos integrar os outros componentes que

20
00:01:25,490 --> 00:01:28,700
incluímos em nossa aplicação angular

21
00:01:28,700 --> 00:01:32,715
para desenvolver isso como uma aplicação angular de pleno direito.

22
00:01:32,715 --> 00:01:36,135
Neste exercício, vamos integrar o ContactComponent,

23
00:01:36,135 --> 00:01:38,914
atualizaremos o modelo para o ContactComponent,

24
00:01:38,914 --> 00:01:43,190
também atualizaremos o modelo para o HomeComponent e daremos este

25
00:01:43,190 --> 00:01:48,600
um passo em frente em direção à nossa aplicação angular de página única.

26
00:01:48,600 --> 00:01:52,585
Vamos começar com o ContactComponent.

27
00:01:52,585 --> 00:01:56,630
Para começar, primeiro copie o modelo para

28
00:01:56,630 --> 00:02:01,070
o ContactComponent que lhe dei nas instruções de exercício e, em seguida,

29
00:02:01,070 --> 00:02:06,660
colá-lo no arquivo contactcomponent.html para que possamos liberar

30
00:02:06,660 --> 00:02:13,580
para fora a visão real do nosso ContactComponent com um pouco mais de detalhes aqui.

31
00:02:13,580 --> 00:02:18,680
Agora, você pode ver que eu cortei e colado o código para

32
00:02:18,680 --> 00:02:24,550
o arquivo de modelo das instruções em meu ContactComponent.

33
00:02:24,550 --> 00:02:27,650
Nós vamos completar a integração de

34
00:02:27,650 --> 00:02:30,665
o ContactComponent em nosso aplicativo e, em seguida, vamos olhar para

35
00:02:30,665 --> 00:02:33,590
como o ContactComponent parece e, em seguida, voltar

36
00:02:33,590 --> 00:02:36,940
e rapidamente olhar para este código um pouco mais tarde.

37
00:02:36,940 --> 00:02:41,660
Agora, para integrar o ContactComponent em nossa aplicação angular,

38
00:02:41,660 --> 00:02:46,910
precisamos incluir um caminho para o ContactComponent em nossas rotas.

39
00:02:46,910 --> 00:02:52,270
Então, indo para o arquivo routes.ts logo após o Menu,

40
00:02:52,270 --> 00:03:01,520
Eu vou incluir outro caminho para o ContactComponent Vou usar

41
00:03:01,520 --> 00:03:05,480
o URL como entre em contato conosco e

42
00:03:05,480 --> 00:03:15,375
o componente correspondente é ContactComponent aqui.

43
00:03:15,375 --> 00:03:19,815
Então, com isso, temos agora integrado nosso ContactComponent

44
00:03:19,815 --> 00:03:24,725
em nosso aplicativo e vamos salvar as alterações para

45
00:03:24,725 --> 00:03:30,935
isso e, em seguida, também vamos precisar atualizar o componente de cabeçalho e atualizar

46
00:03:30,935 --> 00:03:37,540
o um link no componente de cabeçalho para nos ajudar a navegar para o ContactComponent.

47
00:03:37,540 --> 00:03:43,680
Então, eu só vou copiar isso do menu um link na barra de ferramentas

48
00:03:43,680 --> 00:03:48,710
meu componente de cabeçalho lá e, em seguida, copiar isso para

49
00:03:48,710 --> 00:03:53,960
o ContactComponent e, em seguida, atualizá-lo como entre em contato conosco.

50
00:03:53,960 --> 00:03:57,680
Vamos salvar as alterações em todos os arquivos e

51
00:03:57,680 --> 00:04:02,469
então dar uma olhada no aplicativo resultante.

52
00:04:02,469 --> 00:04:05,725
Indo para o aplicativo em nosso navegador,

53
00:04:05,725 --> 00:04:08,570
se agora navegar para o ContactComponent,

54
00:04:08,570 --> 00:04:12,680
podemos ver que os detalhes do ContactComponent são exibidos

55
00:04:12,680 --> 00:04:16,790
aqui entre o cabeçalho e o rodapé como esperamos.

56
00:04:16,790 --> 00:04:18,590
Então, dentro do ContactComponent,

57
00:04:18,590 --> 00:04:22,370
temos o título ContactUs

58
00:04:22,370 --> 00:04:26,390
lá e, em seguida, algumas informações de localização onde eu exibia o endereço.

59
00:04:26,390 --> 00:04:28,490
Então, isso é semelhante ao endereço que

60
00:04:28,490 --> 00:04:30,740
temos no rodapé, então eu não vou explicar que no detalhe

61
00:04:30,740 --> 00:04:36,050
, então temos outra parte aqui onde incluímos o Mapa da nossa Localização.

62
00:04:36,050 --> 00:04:37,490
Nós não vamos fazer isso no momento,

63
00:04:37,490 --> 00:04:41,990
vamos apenas deixá-lo em branco e, em seguida, também você vê que eu tenho

64
00:04:41,990 --> 00:04:48,150
três botões que eu incluí aqui para Chamada, Skype e E-mail.

65
00:04:48,150 --> 00:04:52,354
Estes três botões são ativados em nosso aplicativo

66
00:04:52,354 --> 00:04:57,910
e eu estou usando o botão levantado tapete para renderizar esses três botões.

67
00:04:57,910 --> 00:05:00,980
Então, você pode ver que esses botões parecem diferentes de

68
00:05:00,980 --> 00:05:05,080
os outros botões que você incluiu em seu aplicativo lá.

69
00:05:05,080 --> 00:05:10,870
Então, este é um componente de botão elevado do nosso material angular lá.

70
00:05:10,870 --> 00:05:14,195
Então, tendo visto o ContactComponent e

71
00:05:14,195 --> 00:05:17,675
o fato de que somos capazes de navegar para o ContactComponent.

72
00:05:17,675 --> 00:05:20,560
Agora, a partir dos outros componentes,

73
00:05:20,560 --> 00:05:22,730
vamos dar uma olhada rápida em

74
00:05:22,730 --> 00:05:29,250
o código HTML que incluímos para o modelo para o nosso ContactComponent.

75
00:05:29,250 --> 00:05:33,335
Indo para contactcomponent.html, você verá que temos

76
00:05:33,335 --> 00:05:38,720
o título para esta página incluído usando este div

77
00:05:38,720 --> 00:05:42,965
aqui e o segundo div dentro aqui com FxFlex

78
00:05:42,965 --> 00:05:48,020
inclui as informações de localização e, em seguida, este dentro desta informação de localização,

79
00:05:48,020 --> 00:05:51,260
Estou novamente definindo outra div que me permitirá

80
00:05:51,260 --> 00:05:55,480
incluir várias visualizações neste outro div aqui.

81
00:05:55,480 --> 00:05:57,290
Então, dentro desta, eu estou definindo

82
00:05:57,290 --> 00:06:00,410
outra div com coluna de layout de efeitos e linha de camada de efeitos.

83
00:06:00,410 --> 00:06:09,675
Então, esta é uma maneira aninhada de definir minhas visualizações CSS Flex aqui.

84
00:06:09,675 --> 00:06:11,270
Então, dentro disso novamente,

85
00:06:11,270 --> 00:06:14,990
Eu estou usando uma visualização Flex div com FxFlex 50 para que

86
00:06:14,990 --> 00:06:18,900
ocupa metade e, em seguida, FxFlex offset 20 pixels.

87
00:06:18,900 --> 00:06:26,300
Então, esta visão CSS será deslocada para a direita por 20 pixels então eu

88
00:06:26,300 --> 00:06:29,300
tem alguma margem lá e, em seguida, temos

89
00:06:29,300 --> 00:06:33,800
o endereço incluído aqui e, em seguida, abaixo aqui,

90
00:06:33,800 --> 00:06:36,080
você pode ver que dentro de outra div,

91
00:06:36,080 --> 00:06:42,690
Eu tenho uma tag com tapete levantado botão associado com ele.

92
00:06:42,690 --> 00:06:45,740
Isso é o que faz com que os botões levantados que

93
00:06:45,740 --> 00:06:49,140
têm na parte inferior da página Contato lá.

94
00:06:49,140 --> 00:06:51,050
Então, três deles aqui.

95
00:06:51,050 --> 00:06:52,730
Um para o número de telefone.

96
00:06:52,730 --> 00:07:00,425
Um para o Skype e outro para o e-mail aqui e também note que eu estou fazendo uso de

97
00:07:00,425 --> 00:07:04,010
os ícones Font Awesome para cada um deles e, em seguida, o

98
00:07:04,010 --> 00:07:08,350
mapa de sua localização em outra div aqui.

99
00:07:08,350 --> 00:07:13,690
Então, ambos estes encerram dentro deste div externo que é fechado novamente dentro do div.

100
00:07:13,690 --> 00:07:20,555
Então, maneira aninhada de definir os layouts flexíveis para nossas diferentes partes aqui.

101
00:07:20,555 --> 00:07:23,465
Então, isso é sobre isso para o ContactComponent.

102
00:07:23,465 --> 00:07:29,329
Nós agora integramos isso em nosso aplicativo de página única.

103
00:07:29,329 --> 00:07:32,445
Agora, indo para o DishService.

104
00:07:32,445 --> 00:07:36,440
Agora, no DishService junto com o método getDishDishService,

105
00:07:36,440 --> 00:07:39,005
Vou introduzir mais dois métodos.

106
00:07:39,005 --> 00:07:42,350
Um método chamado getDish,

107
00:07:42,350 --> 00:07:50,950
um prato específico e, em seguida, vou identificar o prato com um id especificado aqui.

108
00:07:50,950 --> 00:07:52,460
Então, o id seria

109
00:07:52,460 --> 00:08:01,885
e que especificaria me dar o prato com o id correspondente a este número.

110
00:08:01,885 --> 00:08:04,640
Então isso será mais um método que eu vou adicionar

111
00:08:04,640 --> 00:08:09,870
e também adicionar em outro método chamado getFeaturedDish.

112
00:08:13,750 --> 00:08:17,495
Então, este prato em destaque usará

113
00:08:17,495 --> 00:08:22,460
a propriedade em destaque que adicionamos

114
00:08:22,460 --> 00:08:27,995
e, em seguida, retornar o prato para o qual o recurso é definido como verdadeiro.

115
00:08:27,995 --> 00:08:33,330
Então, essa é a maneira que você pode selecionar um prato específico e, em seguida, torná-lo disponível.

116
00:08:33,330 --> 00:08:37,970
Agora, a razão pela qual eu tenho essa bandeira em destaque é que quando o recurso é definido como verdadeiro,

117
00:08:37,970 --> 00:08:41,680
esse prato específico será renderizado no HomeComponent.

118
00:08:41,680 --> 00:08:44,455
Agora, como selecionamos esses pratos?

119
00:08:44,455 --> 00:08:47,185
Então, vamos adicionar o código para isso.

120
00:08:47,185 --> 00:08:49,050
Então, para o GetDish,

121
00:08:49,050 --> 00:08:57,650
Eu preciso devolver algo da constante de pratos que eu já tenho lá.

122
00:08:57,650 --> 00:08:59,600
Então, a partir da constante de pratos,

123
00:08:59,600 --> 00:09:05,525
Eu vou usar a maneira do JavaScript de fazer filtragem de um array.

124
00:09:05,525 --> 00:09:09,470
Então, a filtragem de uma matriz me ajudará a selecionar

125
00:09:09,470 --> 00:09:13,565
para fora apenas os elementos da matriz que

126
00:09:13,565 --> 00:09:16,985
correspondem a um critério específico que será especificado

127
00:09:16,985 --> 00:09:21,530
dentro do filtro aqui e, em seguida, entre eles, eu retornarei apenas o primeiro.

128
00:09:21,530 --> 00:09:25,050
Agora, acontece que quando eu especificar um id,

129
00:09:25,050 --> 00:09:28,960
ele selecionará apenas um item, mas então isso se tornará um array.

130
00:09:28,960 --> 00:09:33,150
Então, a partir dessa matriz, eu preciso extrair esse elemento nessa matriz.

131
00:09:33,150 --> 00:09:37,320
Então, é por isso que eu estou usando dentro de chaves zero lá.

132
00:09:37,320 --> 00:09:41,010
Então, isso vai me ajudar a identificar.

133
00:09:41,010 --> 00:09:43,005
Então, como faço para filtrar meus pratos?

134
00:09:43,005 --> 00:09:47,140
Então, para cada prato na minha lista de pratos,

135
00:09:47,140 --> 00:09:49,729
então este é o lugar onde eu vou usar

136
00:09:49,729 --> 00:09:55,610
outro recurso de tipescript chamado como funções de seta.

137
00:09:55,610 --> 00:10:01,575
A função de seta é uma forma abreviada de escrever uma função.

138
00:10:01,575 --> 00:10:04,090
Então, se você está acostumado a escrever funções,

139
00:10:04,090 --> 00:10:06,100
em vez de escrever a função elaboradamente dizendo

140
00:10:06,100 --> 00:10:09,850
função e, em seguida, dentro de parênteses prato e assim por diante,

141
00:10:09,850 --> 00:10:13,900
eu posso simplesmente escrevê-lo nos casos em que a função é muito simples,

142
00:10:13,900 --> 00:10:17,195
é muito fácil escrever isso como uma função de seta aqui.

143
00:10:17,195 --> 00:10:27,305
Então, aqui, eu vou especificar dizendo id prato é igual ao id.

144
00:10:27,305 --> 00:10:33,245
Então, o que eu estou especificando aqui é filtrar a matriz de pratos e extrair

145
00:10:33,245 --> 00:10:40,360
apenas os itens da matriz para os quais o id do prato.

146
00:10:40,360 --> 00:10:44,570
Então, cada item aqui está sendo identificado por este prato parâmetro aqui.

147
00:10:44,570 --> 00:10:47,090
Então, para o qual o id do prato corresponde ao ID

148
00:10:47,090 --> 00:10:50,360
que foi fornecido como um parâmetro para o prato.

149
00:10:50,360 --> 00:10:53,810
Então, desta forma você vai extrair esse prato específico de

150
00:10:53,810 --> 00:10:59,400
esta matriz e, em seguida, retornar esse prato a partir deste método GetDish.

151
00:10:59,710 --> 00:11:04,240
As funções de seta me ajudaram a escrever código de uma maneira mais simples.

152
00:11:04,240 --> 00:11:06,724
Se você não gosta de funções de seta

153
00:11:06,724 --> 00:11:09,710
então você pode escrevê-lo da maneira mais convencional dizendo,

154
00:11:09,710 --> 00:11:16,870
“prato de função”, e então a partir disso, então você vai retornar dish.id triplo igual a id,

155
00:11:16,870 --> 00:11:19,005
então isso vai retornar um booleano.

156
00:11:19,005 --> 00:11:22,960
Quando o filtro encontrar um verdadeiro aqui dentro,

157
00:11:22,960 --> 00:11:27,115
esses elementos dos pratos serão selecionados na matriz.

158
00:11:27,115 --> 00:11:31,980
Então, é aqui que seu conhecimento em JavaScript vem a sua vantagem.

159
00:11:31,980 --> 00:11:34,060
Então, você precisa saber como um filtro JavaScript

160
00:11:34,060 --> 00:11:38,085
funciona para ajudá-lo a entender como isso é feito.

161
00:11:38,085 --> 00:11:41,390
Ok, agora da mesma forma para o prato em destaque,

162
00:11:41,390 --> 00:11:47,365
Eu vou usar um método semelhante para extrair dos meus pratos

163
00:11:47,365 --> 00:11:51,620
matriz usando um filtro aqui, mas o filtro que

164
00:11:51,620 --> 00:11:57,000
eu vou definir aqui seria novamente uma função de seta aqui.

165
00:11:58,410 --> 00:12:03,260
Você vai se acostumar com funções de seta e, em seguida, uma vez que você se acostumar com eles,

166
00:12:03,260 --> 00:12:06,370
então você vai perceber o quão simples eles são muito certos.

167
00:12:06,370 --> 00:12:11,380
Então, aqui o caminho para me selecionar

168
00:12:11,380 --> 00:12:20,445
é a propriedade dish.featured porque este dish.feature já é um booleano lá.

169
00:12:20,445 --> 00:12:25,720
Então, isso vai me ajudar a devolver o prato em destaque.

170
00:12:25,720 --> 00:12:27,355
Então, para qualquer que seja o prato,

171
00:12:27,355 --> 00:12:29,120
a característica do prato é verdadeira.

172
00:12:29,120 --> 00:12:31,710
Esse prato em particular será filtrado de

173
00:12:31,710 --> 00:12:35,330
a matriz de pratos e, em seguida, haverá apenas um dia.

174
00:12:35,330 --> 00:12:38,280
De qualquer forma, você deve ter certeza de que

175
00:12:38,280 --> 00:12:42,210
para que você vai definir destaque apenas para verdadeiro para um desses,

176
00:12:42,210 --> 00:12:50,630
e então eu uso isso porque este filtro vai retornar uma sub-matriz da matriz de pratos,

177
00:12:50,630 --> 00:12:52,300
então eu preciso selecionar esse elemento.

178
00:12:52,300 --> 00:12:55,600
Haverá um único elemento lá no índice zero.

179
00:12:55,600 --> 00:12:59,150
Então, eu estou usando o índice zero para selecionar esse elemento e retornar

180
00:12:59,150 --> 00:13:03,680
que do método prato get destaque aqui.

181
00:13:03,680 --> 00:13:09,985
Então, que completa a atualização para o serviço de pratos.

182
00:13:09,985 --> 00:13:15,140
Para construir o nosso modelo de casa,

183
00:13:15,140 --> 00:13:21,195
vamos apresentar na vista de casa um prato selecionado,

184
00:13:21,195 --> 00:13:24,545
uma promoção atual selecionada pelo restaurante,

185
00:13:24,545 --> 00:13:29,785
e um líder corporativo selecionado da lista de leitores.

186
00:13:29,785 --> 00:13:34,260
O líder corporativo que está em destaque na primeira página vai

187
00:13:34,260 --> 00:13:38,550
fazer parte de sua tarefa que segue esta lição em particular.

188
00:13:38,550 --> 00:13:40,380
Mas vamos agora incluir,

189
00:13:40,380 --> 00:13:45,775
temos um prato em destaque e a promoção em destaque na primeira página.

190
00:13:45,775 --> 00:13:50,170
Então, o que significa que eu preciso de um serviço de promoção que retorna

191
00:13:50,170 --> 00:13:55,250
o conjunto de promoções que estão sendo conduzidas por este restaurante em particular.

192
00:13:55,250 --> 00:14:01,095
Então, deixe-me adicionar um serviço de promoções para o meu aplicativo.

193
00:14:01,095 --> 00:14:04,005
Então, para fazer isso, na pasta compartilhada,

194
00:14:04,005 --> 00:14:12,140
Vou criar um novo arquivo chamado promotion.ts.

195
00:14:12,560 --> 00:14:18,410
Na promotion.ts, criarei uma promoção de classe,

196
00:14:18,870 --> 00:14:29,125
classe e devolverei esta promoção aqui.

197
00:14:29,125 --> 00:14:32,460
Então, o que essa classe de promoção contém?

198
00:14:32,460 --> 00:14:36,529
Contém uma propriedade id,

199
00:14:36,529 --> 00:14:43,010
em seguida, contém o nome para a promoção do restaurante.

200
00:14:43,010 --> 00:14:47,310
Assim, por exemplo, a promoção poderia ser como buffet de fim de semana.

201
00:14:47,310 --> 00:14:52,320
Ou 10% de todos os dias na hora do almoço

202
00:14:52,320 --> 00:14:57,845
e coisas assim podem ser destaque na primeira página dos seus restaurantes.

203
00:14:57,845 --> 00:15:01,280
Então, nome então eu também vou incluir uma imagem,

204
00:15:01,280 --> 00:15:05,635
que é para ser do tipo string a URL da imagem,

205
00:15:05,635 --> 00:15:10,625
então rótulo que será uma string.

206
00:15:10,625 --> 00:15:13,895
Preço também uma string.

207
00:15:13,895 --> 00:15:15,330
Agora, o trabalho implica,

208
00:15:15,330 --> 00:15:17,260
você não me vê usando-os no momento,

209
00:15:17,260 --> 00:15:25,780
vamos trazê-los para uso em um dos exercícios posteriores apresentados Boolean.

210
00:15:25,780 --> 00:15:29,965
Então, você vê o sinalizador em destaque novamente aparecendo na promoção também,

211
00:15:29,965 --> 00:15:34,960
e, em seguida, string de descrição.

212
00:15:34,960 --> 00:15:38,380
Então, você vê que a promoção estruturada é praticamente

213
00:15:38,380 --> 00:15:42,840
semelhante à estrutura do prato que vimos anteriormente.

214
00:15:42,840 --> 00:15:46,010
Então, esta é a aula de promoção aqui.

215
00:15:46,010 --> 00:15:48,090
Agora, junto com a classe de promoção,

216
00:15:48,090 --> 00:15:50,980
Eu preciso criar outra classe que

217
00:15:50,980 --> 00:16:00,615
exporta o conjunto de promoção dizer constante com promoções aqui.

218
00:16:00,615 --> 00:16:04,240
Então aqui, eu vou importar

219
00:16:06,920 --> 00:16:11,024
a classe de promoção

220
00:16:11,024 --> 00:16:18,400
do arquivo promotion.ts,

221
00:16:18,400 --> 00:16:25,290
e então eu exportaria uma constante chamada promoção.

222
00:16:25,290 --> 00:16:32,395
Então, você vê que eu estou usando uma estrutura muito semelhante aos pratos aqui.

223
00:16:32,395 --> 00:16:36,290
Então, você começa a ver que,

224
00:16:36,660 --> 00:16:40,790
essa estrutura que usamos anteriormente para

225
00:16:40,790 --> 00:16:46,465
as promoções para os pratos também é útil para declarar promoções.

226
00:16:46,465 --> 00:16:47,910
Se você tem uma estrutura diferente,

227
00:16:47,910 --> 00:16:50,990
você verá que com os líderes a estrutura será um pouco

228
00:16:50,990 --> 00:16:55,315
diferente para o objeto JavaScript aqui. As promoções.

229
00:16:55,315 --> 00:17:00,160
Agora, os detalhes de uma promoção específica que eu dei nas instruções,

230
00:17:00,160 --> 00:17:02,790
então eu sugiro que você copie e cole de

231
00:17:02,790 --> 00:17:05,550
lá em vez de eu digitar a coisa toda aqui.

232
00:17:05,550 --> 00:17:07,390
Então, deixe-me ir em frente e copiar e colar

233
00:17:07,390 --> 00:17:11,800
esse objeto JavaScript nesta matriz de objetos JavaScript aqui,

234
00:17:11,800 --> 00:17:13,510
então lá vai você.

235
00:17:13,510 --> 00:17:20,475
A promoção tem apenas um único objeto no momento.

236
00:17:20,475 --> 00:17:22,715
No futuro, podemos adicionar mais.

237
00:17:22,715 --> 00:17:26,375
Neste ponto, eu tenho apenas um então eu acabei de adicioná-lo lá,

238
00:17:26,375 --> 00:17:31,265
e eu vou usar isso e que é a promoção destaque para o meu restaurante lá.

239
00:17:31,265 --> 00:17:33,045
Isso é apenas promoção,

240
00:17:33,045 --> 00:17:35,820
então deixe-me atualizar que promoções,

241
00:17:35,820 --> 00:17:37,465
isso é o que eu preciso.

242
00:17:37,465 --> 00:17:42,120
Então, eu vou apenas salvar as alterações no arquivo promotion.ts.

243
00:17:42,120 --> 00:17:46,820
Em seguida, criarei outro serviço chamado serviço de promoção.

244
00:17:46,820 --> 00:17:53,285
Então, para fazer isso, vamos para a linha de comando no prompt de comando digite

245
00:17:53,285 --> 00:18:02,005
ng gerar serviços de pesquisas.

246
00:18:02,005 --> 00:18:05,105
Então, o serviço de promoção sendo criado lá.

247
00:18:05,105 --> 00:18:08,500
Então, agora o PromotionService está no lugar.

248
00:18:08,500 --> 00:18:13,575
Então, vamos adicionar os recursos para o PromotionService.

249
00:18:13,575 --> 00:18:18,070
Então, indo para o PromotionService,

250
00:18:18,070 --> 00:18:25,690
você vê que o PromotionService agora está incluído em sua pasta de serviços aqui,

251
00:18:25,690 --> 00:18:28,615
então precisamos preparar um PromotionService.

252
00:18:28,615 --> 00:18:30,715
Então, no PromotionService,

253
00:18:30,715 --> 00:18:33,170
Eu vou importar

254
00:18:37,170 --> 00:18:48,355
promoção de compartilhado/promoção,

255
00:18:48,355 --> 00:18:55,010
a classe de promoção, e também importar promoções

256
00:18:57,000 --> 00:19:09,985
da classe compartilhada/promoções lá.

257
00:19:09,985 --> 00:19:11,885
As promoções constantes de lá.

258
00:19:11,885 --> 00:19:14,590
Agora, assim como tínhamos para o serviço de prato,

259
00:19:14,590 --> 00:19:19,840
precisamos criar três métodos dentro do PromotionsService.

260
00:19:19,840 --> 00:19:25,080
Então, o que eu vou fazer é me poupar do trabalho,

261
00:19:25,080 --> 00:19:27,450
Eu vou para o dish.service,

262
00:19:27,450 --> 00:19:29,750
e então apenas copiar estes três,

263
00:19:29,750 --> 00:19:33,445
e depois colá-lo em meu serviço de promoção,

264
00:19:33,445 --> 00:19:35,570
em seguida, basta editar o código.

265
00:19:35,570 --> 00:19:38,965
Ok, então a partir do serviço de promoção,

266
00:19:38,965 --> 00:19:46,505
Eu preciso devolver GetPromotions e

267
00:19:46,505 --> 00:19:54,340
este é do tipo de promoção e então isso retornará PROMOÇÕES,

268
00:19:54,340 --> 00:20:00,670
e então obter o segundo seria promoção

269
00:20:00,670 --> 00:20:08,505
que novamente recebe o id da promoção,

270
00:20:08,505 --> 00:20:10,615
então eu vou devolver

271
00:20:10,615 --> 00:20:20,830
PROMOÇÕES.filter promo.id é id.

272
00:20:20,830 --> 00:20:26,780
Em seguida, a promoção getFeatured.

273
00:20:26,780 --> 00:20:31,860
Então, você pode ver que a estrutura do Serviço de Promoção é muito semelhante a

274
00:20:31,860 --> 00:20:39,920
o serviço de pratos e isso não seria do tipo de promoção,

275
00:20:39,920 --> 00:20:41,875
e isso retornará

276
00:20:41,875 --> 00:20:52,145
promotions.Filter promo e isso será promo.featured e é isso.

277
00:20:52,145 --> 00:20:55,030
Meu PromotionService está pronto.

278
00:20:55,030 --> 00:20:59,695
Agora, eu vou para o componente de casa, e preparar isso,

279
00:20:59,695 --> 00:21:02,115
para que no meu componente de casa,

280
00:21:02,115 --> 00:21:07,560
eu vou exibir um prato em destaque e uma promoção em destaque.

281
00:21:07,560 --> 00:21:10,820
O característica/prato e característica/promoção será exibido em

282
00:21:10,820 --> 00:21:15,690
o componente de casa usando o componente de cartão de material angular.

283
00:21:15,690 --> 00:21:19,675
Então, precisamos primeiro obter os dados em nosso componente inicial,

284
00:21:19,675 --> 00:21:24,690
de modo que é isso que vamos fazer no arquivo de script do tipo de componentes home lá.

285
00:21:24,690 --> 00:21:29,630
Então, indo para os componentes home type file script, home component.ts.

286
00:21:29,630 --> 00:21:44,330
Aqui, eu preciso importar o prato

287
00:21:44,330 --> 00:21:52,060
do compartilhado/prato e também o

288
00:21:52,060 --> 00:22:07,430
correspondente dish.service de serviços/dish.service.

289
00:22:12,330 --> 00:22:17,495
Ok, agora eu vou também fazer a mesma coisa para promoções,

290
00:22:17,495 --> 00:22:21,465
então eu vou apenas copiar isso e colá-lo aqui,

291
00:22:21,465 --> 00:22:23,120
e depois editar este,

292
00:22:23,120 --> 00:22:26,735
então isso seria promoção,

293
00:22:26,735 --> 00:22:31,315
isso seria PromotionService,

294
00:22:31,315 --> 00:22:42,350
e depois promoção, e então isso seria PromotionService.

295
00:22:42,790 --> 00:22:46,800
Então, com isso, temos tanto os serviços de prato e

296
00:22:46,800 --> 00:22:50,205
prato e serviço de promoção disponíveis para nós,

297
00:22:50,205 --> 00:22:52,485
dentro do nosso componente de casa.

298
00:22:52,485 --> 00:22:54,660
Chegando agora ao construtor.

299
00:22:54,660 --> 00:23:01,180
Vamos agora injetar os dois serviços aqui,

300
00:23:02,280 --> 00:23:12,590
e torná-los disponíveis para nossas aplicações ou serviço de prato,

301
00:23:25,490 --> 00:23:30,240
eo serviço de promoção injetado aqui.

302
00:23:30,240 --> 00:23:34,610
Então, com isso, temos acesso a ambos os serviços.

303
00:23:34,610 --> 00:23:38,650
Então, agora dentro do método NGoninit,

304
00:23:38,650 --> 00:23:43,779
Eu vou buscar os dois pratos em destaque.

305
00:23:43,779 --> 00:23:51,770
Então, eu diria This.DisishService.GetFeaturedDish

306
00:23:51,770 --> 00:23:59,520
e também promoção,

307
00:24:03,690 --> 00:24:11,510
PromotionService e GetFeaturedPromotion.

308
00:24:14,400 --> 00:24:18,820
Só para ser completo,

309
00:24:18,820 --> 00:24:23,185
deixe-me declarar o prato aqui a partir de

310
00:24:23,185 --> 00:24:32,025
tipo de prato e a promoção a partir do tipo Promoção aqui.

311
00:24:32,025 --> 00:24:38,830
Então, isso deve esclarecer todos os valores que estamos usando aqui dentro.

312
00:24:38,830 --> 00:24:46,665
Então, com isso, concluímos a atualização para o nosso arquivo de digitação de componentes domésticos.

313
00:24:46,665 --> 00:24:49,710
Vamos agora mudar para o arquivo de modelo,

314
00:24:49,710 --> 00:24:55,815
e, em seguida, adicionar os dois cartões para exibir o prato em destaque e a promoção em destaque.

315
00:24:55,815 --> 00:25:00,310
Agora, para isso, eu lhe dei o código nas instruções.

316
00:25:00,310 --> 00:25:02,995
Então, eu só vou copiar esse código e colá-lo aqui.

317
00:25:02,995 --> 00:25:05,640
Você já sabe como criar cartões,

318
00:25:05,640 --> 00:25:10,590
para que você possa facilmente seguir o código que eu colar aqui.

319
00:25:10,590 --> 00:25:17,095
Então, o modelo de componentes domésticos também é atualizado,

320
00:25:17,095 --> 00:25:20,830
para que você possa ver que ele tem dois cartões aqui.

321
00:25:20,830 --> 00:25:26,550
Para um, exibindo o prato e o outro exibindo a promoção aqui,

322
00:25:26,550 --> 00:25:33,030
e fechado dentro de um div FxLayout aqui.

323
00:25:33,030 --> 00:25:38,175
Então, vamos salvar as alterações e, em seguida, dar uma olhada rápida em nosso aplicativo.

324
00:25:38,175 --> 00:25:41,095
Depois de criar o serviço de promoção,

325
00:25:41,095 --> 00:25:45,470
também precisamos incluir o serviço de promoção no AppModule,

326
00:25:45,470 --> 00:25:47,750
e disponibilizá-lo para a nossa aplicação.

327
00:25:47,750 --> 00:25:49,840
Então, eu vou entrar aqui,

328
00:25:49,840 --> 00:25:53,350
e, em seguida, importar

329
00:25:53,350 --> 00:26:00,950
o serviço de promoção aqui.

330
00:26:03,150 --> 00:26:07,915
Em seguida, declarou o serviço de promoção

331
00:26:07,915 --> 00:26:16,030
como um dos provedores

332
00:26:16,030 --> 00:26:19,720
no meu arquivo AppModule.ts aqui.

333
00:26:19,720 --> 00:26:21,580
Então, no arquivo AppModule,

334
00:26:21,580 --> 00:26:23,415
Eu estou exigindo essas alterações,

335
00:26:23,415 --> 00:26:25,480
e, em seguida, salvando as alterações.

336
00:26:25,480 --> 00:26:27,055
Indo para o navegador,

337
00:26:27,055 --> 00:26:29,455
agora você pode ver que no navegador,

338
00:26:29,455 --> 00:26:34,150
o componente inicial agora mostra os dois cartões,

339
00:26:34,150 --> 00:26:40,580
um para o prato em destaque e outro para a promoção em destaque aqui.

340
00:26:40,580 --> 00:26:43,850
Então, você pode ver que os dois carros são exibidos aqui.

341
00:26:43,850 --> 00:26:50,505
Agora eu posso navegar para a página Menu,

342
00:26:50,505 --> 00:26:54,405
e, em seguida, também para a página Contato.

343
00:26:54,405 --> 00:26:56,690
A página Sobre ainda não está lá,

344
00:26:56,690 --> 00:27:02,070
você vai preencher a página Sobre como parte da sua segunda atribuição.

345
00:27:02,070 --> 00:27:07,490
Olhando para o mesmo aplicativo em um tamanho de tela menor,

346
00:27:07,490 --> 00:27:11,200
então esta é uma tela do iPhone 6 Plus.

347
00:27:11,200 --> 00:27:16,225
Vejamos o componente principal e a tela do iPhone 6 Plus.

348
00:27:16,225 --> 00:27:24,490
Você pode ver o prato em destaque e a promoção em destaque na página inicial lá.

349
00:27:24,490 --> 00:27:29,820
Em seguida, o menu que vimos anteriormente,

350
00:27:29,820 --> 00:27:35,150
e também a página Contato sendo exibido aqui.

351
00:27:35,150 --> 00:27:41,395
Então, você pode ver que agora nosso aplicativo de página única está muito mais configurado.

352
00:27:41,395 --> 00:27:43,120
Exceto para o Sobre,

353
00:27:43,120 --> 00:27:46,875
que faremos na segunda atribuição.

354
00:27:46,875 --> 00:27:54,345
Mais uma pequena alteração que você pode fazer em seu arquivo HTML componentes de cabeçalho,

355
00:27:54,345 --> 00:27:57,470
é que, juntamente com a diretiva de link do roteador,

356
00:27:57,470 --> 00:28:06,880
a Rota Angular também suporta mais uma diretiva chamada RouteLinkActive.

357
00:28:06,880 --> 00:28:14,660
Isso nos permite aplicar algumas classes ao elemento particular aqui.

358
00:28:14,660 --> 00:28:16,305
Então, neste caso,

359
00:28:16,305 --> 00:28:20,090
se este link se tornar ativo do que o que eu especificar aqui,

360
00:28:20,090 --> 00:28:24,980
será aplicado como uma classe para este item em particular lá.

361
00:28:24,980 --> 00:28:28,309
Então, eu vou especificar uma classe chamada ativa.

362
00:28:28,309 --> 00:28:32,280
Então aqui, estou especificando RouterLinkActive com ativo.

363
00:28:32,280 --> 00:28:35,265
Então, se eu definir uma classe CSS chamada active,

364
00:28:35,265 --> 00:28:39,300
então a classe será aplicada a este link,

365
00:28:39,300 --> 00:28:46,975
sempre que esta visão particular está sendo mostrada na página de aplicativos aqui.

366
00:28:46,975 --> 00:28:53,250
Vou copiar a mesma coisa e aplicá-la a todos os botões restantes,

367
00:28:53,250 --> 00:28:56,735
onde já defini o link do roteador.

368
00:28:56,735 --> 00:28:59,600
Então, eu vou aplicar a classe RouterLinkActive,

369
00:28:59,600 --> 00:29:04,195
para o Início, o Menu e o Fale Conosco.

370
00:29:04,195 --> 00:29:08,535
Agora, isso também significa que eu deveria definir uma classe CSS ativa.

371
00:29:08,535 --> 00:29:14,360
Então, para fazer isso, eu vou para o arquivo SESS componentes de cabeçalho,

372
00:29:14,360 --> 00:29:16,590
e, em seguida, definir uma classe ativa aqui,

373
00:29:16,590 --> 00:29:21,400
então eu vou definir a classe ativa ali.

374
00:29:21,400 --> 00:29:22,870
Para definir a classe ativa,

375
00:29:22,870 --> 00:29:31,220
Vou adicionar mais uma variável de cor aqui chamada background-moredark.

376
00:29:33,030 --> 00:29:39,080
Em seguida, a cor correspondente é 4527A0,

377
00:29:39,900 --> 00:29:47,480
esta é uma versão mais escura desta cor escura de fundo, 4527A0.

378
00:29:47,480 --> 00:29:50,055
Então, para o meu ativo,

379
00:29:50,055 --> 00:29:52,720
o que eu vou fazer é, da classe ativa,

380
00:29:52,720 --> 00:29:57,725
Eu vou deixar a classe definir um fundo,

381
00:29:57,725 --> 00:29:59,560
definir o fundo de

382
00:29:59,560 --> 00:30:09,410
esse elemento para a cor de fundo mais escura.

383
00:30:10,170 --> 00:30:18,270
Então, quando essa visão particular é selecionada e mostrada na página,

384
00:30:18,270 --> 00:30:21,630
então esta classe ativa será aplicada a

385
00:30:21,630 --> 00:30:24,670
que particular Uma tag

386
00:30:24,670 --> 00:30:30,340
lá pela diretiva ativa do link do roteador que aplicamos aqui.

387
00:30:30,340 --> 00:30:34,750
Agora, que mudança isso causa em nossa página web.

388
00:30:34,750 --> 00:30:36,460
Agora, indo para a nossa página web,

389
00:30:36,460 --> 00:30:40,685
vamos ver o que isso introduz em nossa página web.

390
00:30:40,685 --> 00:30:43,390
Indo para a nossa aplicação,

391
00:30:43,390 --> 00:30:45,360
agora você vê que quando estamos em

392
00:30:45,360 --> 00:30:52,125
a vista inicial no componente de casa sendo exibido aqui, sua visão correspondente.

393
00:30:52,125 --> 00:30:59,870
Em seguida, o botão Home aqui tem uma cor de fundo diferente que é

394
00:30:59,870 --> 00:31:03,670
aplicada porque a classe ativa foi adicionada em porque nós

395
00:31:03,670 --> 00:31:08,150
definimos o RouterLinkActive para ativo aqui.

396
00:31:08,150 --> 00:31:09,510
Então, essa classe é aplicada.

397
00:31:09,510 --> 00:31:11,985
Da mesma forma, quando você seleciona o menu,

398
00:31:11,985 --> 00:31:17,205
então você vê que o menu é destacado no cabeçalho,

399
00:31:17,205 --> 00:31:20,025
e a exibição de menus é mostrada aqui,

400
00:31:20,025 --> 00:31:21,795
e de forma semelhante para o conteúdo.

401
00:31:21,795 --> 00:31:29,035
Agora, isso nos permite ver em um relance em que pagar determinada visualização VR,

402
00:31:29,035 --> 00:31:31,760
em nosso aplicativo de página única.

403
00:31:31,760 --> 00:31:38,145
Então, este é um pouco adicional de oferta de bits para a interface do usuário,

404
00:31:38,145 --> 00:31:42,255
que nos permite ver algumas características interessantes.

405
00:31:42,255 --> 00:31:46,004
Embora, ele não adiciona muito à funcionalidade do aplicativo,

406
00:31:46,004 --> 00:31:54,370
mas basta adicionar algum pequeno recurso que será uma adição útil ao seu aplicativo.

407
00:31:54,370 --> 00:31:58,615
Então, com isso, completamos este exercício.

408
00:31:58,615 --> 00:32:02,275
Neste exercício, trabalhamos para integrar

409
00:32:02,275 --> 00:32:07,495
o componente de contato em nosso aplicativo de página única.

410
00:32:07,495 --> 00:32:15,800
Nós também projetamos alguns cartões que incluímos no componente inicial,

411
00:32:15,800 --> 00:32:20,180
e adicionamos alguns novos recursos para nossa aplicação.

412
00:32:20,180 --> 00:32:28,310
Este é um bom momento para você salvar as alterações no seu repositório Git com a mensagem

413
00:32:28,310 --> 00:32:31,520
Página Única Parte 1 do Aplicativo.