1
00:00:00,000 --> 00:00:04,965
[MÚSICA]

2
00:00:04,965 --> 00:00:10,050
Neste exercício vamos olhar para como podemos aproveitar o módulo de roteamento

3
00:00:10,050 --> 00:00:14,397
do Angular para ser capaz de suportar vários componentes, e

4
00:00:14,397 --> 00:00:19,830
ser capaz de navegar para qualquer um desses componentes em nossa aplicação Angular.

5
00:00:21,690 --> 00:00:26,280
Olhando rapidamente o estado da nossa aplicação.

6
00:00:26,280 --> 00:00:29,647
No final do último exercício,

7
00:00:29,647 --> 00:00:36,135
já notamos que nesta aplicação, no cabeçalho,

8
00:00:36,135 --> 00:00:42,520
temos links para quatro páginas de aspas diferentes aqui.

9
00:00:42,520 --> 00:00:47,334
Agora, em termos angulares, isso seria suportado usando

10
00:00:47,334 --> 00:00:52,371
componentes diferentes, como veremos neste exercício.

11
00:00:52,371 --> 00:00:55,706
Então aqui vemos que quando clicamos no Início,

12
00:00:55,706 --> 00:01:01,840
queremos ser capazes de ver os detalhes do que deve estar presente na página inicial.

13
00:01:01,840 --> 00:01:07,182
E da mesma forma, o Sobre e o Menu é claro que você já vê-lo ali mesmo,

14
00:01:07,182 --> 00:01:12,608
e, em seguida, o contato, provavelmente exibe algumas informações sobre o conteúdo para

15
00:01:12,608 --> 00:01:15,040
este restaurante particular.

16
00:01:15,040 --> 00:01:18,450
Então, como eles vão sobre apoiar algo assim?

17
00:01:18,450 --> 00:01:23,490
Primeiro, ao dar uma olhada rápida, vemos que o Menu é

18
00:01:23,490 --> 00:01:28,470
já suportado exibindo as informações sobre o menu aqui, e

19
00:01:28,470 --> 00:01:32,720
isso já está facilitado com o uso do componente Menu.

20
00:01:32,720 --> 00:01:37,720
Então, vemos que o componente Menu é justaposto entre o cabeçalho e

21
00:01:37,720 --> 00:01:42,270
o rodapé e é capaz de exibir as informações ali mesmo.

22
00:01:42,270 --> 00:01:48,270
Agora, como podemos aproveitar o uso do módulo Roteador Angular para permitir

23
00:01:48,270 --> 00:01:54,270
nós para suportar esses vários componentes e ser capaz de navegar entre eles.

24
00:01:54,270 --> 00:01:58,810
Agora, para começar, primeiro, é claro, precisamos de vários componentes,

25
00:01:58,810 --> 00:02:04,370
cada um deles mostrando sua respectiva visualização para que possamos navegar entre as visualizações.

26
00:02:04,370 --> 00:02:09,390
Então vamos adicionar mais três componentes à nossa aplicação Angular,

27
00:02:09,390 --> 00:02:13,300
o Início, o Sobre e o Contato.

28
00:02:13,300 --> 00:02:17,500
Você já sabe como fazer isso, então vamos para o próximo passo.

29
00:02:17,500 --> 00:02:22,959
No prompt, digite ng g component

30
00:02:22,959 --> 00:02:28,616
home para criar o componente home.

31
00:02:28,616 --> 00:02:33,094
Da mesma forma gerar

32
00:02:33,094 --> 00:02:38,362
o componente sobre e

33
00:02:38,362 --> 00:02:43,100
também enquanto estamos nele

34
00:02:43,100 --> 00:02:48,641
o componente de contato.

35
00:02:48,641 --> 00:02:53,031
Então, agora temos três componentes adicionados junto com o novo componente que

36
00:02:53,031 --> 00:02:53,903
já tem.

37
00:02:53,903 --> 00:02:58,445
O componente de detalhe do disco já está sendo usado nos componentes do menu, portanto

38
00:02:58,445 --> 00:03:00,833
não o consideramos no momento.

39
00:03:00,833 --> 00:03:05,652
Mas agora temos componentes de casa, sobre, contato e menu, e

40
00:03:05,652 --> 00:03:08,339
precisamos de uma maneira de ir entre eles.

41
00:03:08,339 --> 00:03:09,882
Então, como vamos fazer isso?

42
00:03:09,882 --> 00:03:14,806
Então é aí que eu faço uso do módulo Roteador Angular.

43
00:03:14,806 --> 00:03:20,618
Para começar a usar o módulo do roteador para nos permitir navegar

44
00:03:20,618 --> 00:03:26,225
entre esses componentes, vamos adicionar um novo módulo Angular.

45
00:03:26,225 --> 00:03:32,012
Agora este padrão de usar o módulo de roteador é algo que é sugerido para

46
00:03:32,012 --> 00:03:35,841
aplicações angulares ligeiramente mais complexas, mas

47
00:03:35,841 --> 00:03:41,735
se fizermos isso como uma prática padrão, ele vai um longo caminho para nos ajudar no futuro.

48
00:03:41,735 --> 00:03:46,653
Então eu estou começando até mesmo a aplicação simples com

49
00:03:46,653 --> 00:03:52,032
colocando o módulo roteador em seu próprio módulo separado.

50
00:03:52,032 --> 00:03:58,470
Assim, que engloba todas as nossas necessidades de roteamento em um módulo separado.

51
00:03:58,470 --> 00:04:04,170
Para começar, usamos novamente o Angular CLI para

52
00:04:04,170 --> 00:04:10,450
criar outro módulo, e vamos chamar esse módulo como roteamento de aplicativo.

53
00:04:10,450 --> 00:04:15,237
Então, este módulo de roteamento de aplicativos que vamos criar vai aproveitar

54
00:04:15,237 --> 00:04:20,599
o módulo Angular Slotting para fornecer recursos de roteamento para nossa aplicação.

55
00:04:20,599 --> 00:04:26,296
E então vamos fazer uso disso em nosso módulo de aplicativo para habilitar o roteamento.

56
00:04:26,296 --> 00:04:30,927
Para criar um novo módulo chamado roteamento de aplicativo,

57
00:04:30,927 --> 00:04:35,814
no prompt digite ng g módulo app-routing,

58
00:04:35,814 --> 00:04:40,960
e que deve criar um módulo de roteamento de aplicativo e

59
00:04:40,960 --> 00:04:49,211
colocar um arquivo app-routing.module.ts nessa pasta específica lá.

60
00:04:49,211 --> 00:04:52,635
Agora este módulo de roteamento de aplicativo é apenas deixado lá.

61
00:04:52,635 --> 00:04:58,138
Precisamos incluir explicitamente isso em nosso módulo de aplicativo,

62
00:04:58,138 --> 00:05:01,662
, então ele tem que ser capaz de fazer uso dele.

63
00:05:01,662 --> 00:05:06,669
Indo para o editor, agora vemos que agora temos outra pasta aqui

64
00:05:06,669 --> 00:05:12,328
chamada app-routing e dentro que temos um ApproutingModule aqui,

65
00:05:12,328 --> 00:05:18,374
escolhemos um módulo Angular genérico que a Angular CLI gerou para nós.

66
00:05:18,374 --> 00:05:22,034
Isso não tem nada específico sobre roteamento como tal no momento,

67
00:05:22,034 --> 00:05:24,737
mas vamos adicionar esses recursos lá.

68
00:05:24,737 --> 00:05:30,633
Mas, antes de fazer isso, vamos usar este ApproutingModule em nosso app.module,

69
00:05:30,633 --> 00:05:34,028
o módulo raiz para nossa aplicação Angular.

70
00:05:34,028 --> 00:05:38,271
Para fazer isso, abra o app.module, e

71
00:05:38,271 --> 00:05:44,452
enquanto estamos aqui, deixe-me fazer um pouco de limpeza aqui.

72
00:05:44,452 --> 00:05:48,489
Eu tendem a não gostar de código desorganizado, então

73
00:05:48,489 --> 00:05:52,407
Eu só vou mover todo esse código para

74
00:05:52,407 --> 00:05:57,040
os componentes juntos em um só lugar lá e

75
00:05:57,040 --> 00:06:02,650
então eu tenho meus serviços sendo necessários para baixo aqui.

76
00:06:02,650 --> 00:06:09,180
Agora temos um novo módulo que estamos recebendo

77
00:06:09,180 --> 00:06:13,846
do ApproutingModule,

78
00:06:13,846 --> 00:06:17,764
que acabamos de criar e

79
00:06:17,764 --> 00:06:22,614
então eu vou exigir que

80
00:06:22,614 --> 00:06:27,108
ApproutingModule no meu módulo

81
00:06:34,609 --> 00:06:37,040
Route ou o AppModule aqui.

82
00:06:37,040 --> 00:06:43,080
Então, eu incluo o ApproutingModule importando-o primeiro lá.

83
00:06:43,080 --> 00:06:47,625
E depois disso, nas importações, eu entro e

84
00:06:47,625 --> 00:06:50,880
depois adiciono o ApproutingModule.

85
00:06:53,440 --> 00:06:56,970
Ali mesmo, ApproutingModule.

86
00:06:56,970 --> 00:07:01,380
Então, com isso, meu módulo de aplicativo,

87
00:07:01,380 --> 00:07:05,640
o módulo raiz, agora é corrigido para fazer uso do ApproutingModule.

88
00:07:05,640 --> 00:07:11,420
Agora isso me dá a liberdade de desenvolver minha parte de roteamento em

89
00:07:11,420 --> 00:07:18,540
meu ApproutingModule com total confiança de que ele será usado pelo meu módulo de aplicativo.

90
00:07:18,540 --> 00:07:21,370
Então vamos salvar as alterações no módulo do aplicativo, e

91
00:07:21,370 --> 00:07:25,357
então vamos voltar e abrir o ApproutingModule aqui.

92
00:07:26,400 --> 00:07:30,470
E aqui vamos fazer uso de

93
00:07:30,470 --> 00:07:34,050
o módulo roteador que Angular fornece para nós.

94
00:07:34,050 --> 00:07:37,749
Então aqui deixe-me importar o,

95
00:07:41,156 --> 00:07:46,174
RouterModule aqui, e também o módulo de rotas

96
00:07:46,174 --> 00:07:51,608
companheiro que está disponível a partir Angular.

97
00:07:51,608 --> 00:07:56,428
E então eu vou importar isso de Angular,

98
00:07:56,428 --> 00:08:00,320
e, em seguida, RouterModule aqui.

99
00:08:00,320 --> 00:08:04,540
Então, a partir da biblioteca de roteador angular, eu importe tanto o RouterModule quanto

100
00:08:04,540 --> 00:08:06,120
o módulo Routes.

101
00:08:06,120 --> 00:08:14,590
Então, uma vez que eu fizer isso, obviamente, eu preciso ser capaz de incluir o RouterModule aqui.

102
00:08:14,590 --> 00:08:21,015
Então, além do CommonModule que eu importei lá,

103
00:08:21,015 --> 00:08:25,330
Eu preciso também usar o RouterModule aqui.

104
00:08:25,330 --> 00:08:28,803
Agora, eu vou deixá-lo neste momento.

105
00:08:28,803 --> 00:08:33,835
Vamos desenvolver as rotas para a nossa aplicação Angular e

106
00:08:33,835 --> 00:08:38,054
, em seguida, voltar e corrigir isso um pouco mais tarde.

107
00:08:38,054 --> 00:08:44,225
Então, com isso, deixe-me salvar as alterações no módulo de roteamento do aplicativo.

108
00:08:44,225 --> 00:08:49,925
E o que eu vou fazer é, apenas para manter meu código limpo e

109
00:08:49,925 --> 00:08:56,574
organizado, eu vou definir todas as rotas para minha aplicação em outro arquivo.

110
00:08:56,574 --> 00:09:00,673
Mas eu vou criar na pasta app-routing e

111
00:09:00,673 --> 00:09:03,863
então vou nomeá-lo como routes.ts5.

112
00:09:03,863 --> 00:09:08,601
Agora, dentro deste arquivo, vou criar todas as rotas que eu preciso.

113
00:09:08,601 --> 00:09:12,994
Então aqui, eu vou importar,

114
00:09:15,508 --> 00:09:23,255
As rotas de, @angular /roteador,

115
00:09:23,255 --> 00:09:29,570
e depois usar isso para construir as rotas para minha aplicação.

116
00:09:29,570 --> 00:09:33,453
Agora, além disso, eu preciso ser capaz de importar todos os

117
00:09:33,453 --> 00:09:37,745
os componentes que eu tenho dentro do meu aplicativo.

118
00:09:37,745 --> 00:09:41,303
Porque eu quero ser capaz de navegar para todos os componentes.

119
00:09:41,303 --> 00:09:44,158
Então, onde eu tenho a lista de todos os componentes?

120
00:09:44,158 --> 00:09:46,780
Eu os tenho no app_module.

121
00:09:46,780 --> 00:09:48,475
Então deixe-me ir para o app_module.

122
00:09:50,917 --> 00:09:58,300
Eu tento não digitar as coisas o mais longe possível para manter as coisas sob controle.

123
00:09:58,300 --> 00:10:03,720
Então eu vou para o app_module, e então eu copiar em todos os componentes que eu tenho.

124
00:10:03,720 --> 00:10:08,681
Eu não preciso do AppComponent porque eu não vou estar navegando diretamente para isso no meu aplicativo

125
00:10:08,681 --> 00:10:11,925
, mas os restantes eu vou precisar.

126
00:10:11,925 --> 00:10:18,441
Então eu vou simplesmente copiar todos esses e

127
00:10:18,441 --> 00:10:25,510
, em seguida, incluí-los no meu arquivo de rotas, aqui.

128
00:10:25,510 --> 00:10:30,080
Então agora eu tenho o MenuComponent, o Dishdetail, Cabeçalho, Pé.

129
00:10:30,080 --> 00:10:33,190
Na verdade, também não preciso do cabeçalho e do rodapé.

130
00:10:33,190 --> 00:10:34,516
Não vou precisar do cabeçalho e

131
00:10:34,516 --> 00:10:39,040
FooterComponent porque não vou navegar até eles usando rotas.

132
00:10:39,040 --> 00:10:43,322
Então deixe-me excluir os componentes de cabeçalho e rodapé.

133
00:10:43,322 --> 00:10:46,842
Só preciso do Menu, Início, Sobre, Contatos.

134
00:10:46,842 --> 00:10:53,532
Eu incluí o Dishdetail, vamos chegar a isso em um dos exercícios posteriores.

135
00:10:53,532 --> 00:10:57,949
Então, agora que incluímos todos estes, o próximo passo é para

136
00:10:57,949 --> 00:11:02,289
me definir as várias rotas que estão disponíveis aqui.

137
00:11:02,289 --> 00:11:06,884
Vou definir uma constante aqui

138
00:11:06,884 --> 00:11:12,247
rotas nomeadas do tipo Rotas.

139
00:11:12,247 --> 00:11:17,908
Então agora você vê por que eu tenho rotas importantes do roteador Angular lá.

140
00:11:17,908 --> 00:11:23,148
Então isso me permitirá definir uma matriz especificando

141
00:11:23,148 --> 00:11:28,651
as várias rotas que fazem parte da minha aplicação.

142
00:11:28,651 --> 00:11:32,940
Aqui, deixe-me especificar todas as rotas aqui.

143
00:11:32,940 --> 00:11:37,854
Agora, quando você especificar rotas em seu aplicativo Angular

144
00:11:37,854 --> 00:11:42,776
, você especificará o caminho.

145
00:11:42,776 --> 00:11:48,303
Que eu vou começar com o HomeComponent,

146
00:11:48,303 --> 00:11:53,139
e, em seguida, quando eu navegar para o caminho home,

147
00:11:53,139 --> 00:11:59,368
o componente correspondente é o HomeComponent.

148
00:12:00,630 --> 00:12:05,940
Então, quando meu URL incluir home,

149
00:12:05,940 --> 00:12:08,930
então eu estarei navegando para o homeComponent.

150
00:12:09,930 --> 00:12:14,905
Na palestra anterior, já vimos como usamos o HTML

151
00:12:14,905 --> 00:12:21,513
pushState () para reconhecer a navegação

152
00:12:21,513 --> 00:12:27,010
interna, usando o suporte HTML para o pushState ().

153
00:12:27,010 --> 00:12:33,481
Então é isso que eu estou aproveitando aqui, a fim de definir essas várias rotas aqui.

154
00:12:33,481 --> 00:12:38,003
Então, quando eu digo localhost:4200/home,

155
00:12:38,003 --> 00:12:43,387
então que está apontando para o homeComponent, aqui.

156
00:12:43,387 --> 00:12:48,850
Então essa é a maneira que eu vou navegar para o HomeComponent.

157
00:12:48,850 --> 00:12:55,909
Da mesma forma, podemos definir para os outros componentes em nossa aplicação.

158
00:12:55,909 --> 00:13:03,213
O próximo caminho que vou definir é para o MenuComponent.

159
00:13:03,213 --> 00:13:09,006
Para este exercício, eu só vou definir apenas estes dois.

160
00:13:09,006 --> 00:13:14,119
Os restantes serão preenchidos como parte

161
00:13:14,119 --> 00:13:21,371
de alguns dos exercícios e tarefas posteriores que se seguem.

162
00:13:21,371 --> 00:13:25,791
Então temos dois deles configurados, Home e Menu.

163
00:13:25,791 --> 00:13:29,400
Agora, eu também devo fornecer a rota padrão aqui.

164
00:13:29,400 --> 00:13:35,379
Então, quando o usuário navega para localhost:4200,

165
00:13:35,379 --> 00:13:40,670
, então você vai acabar no local padrão.

166
00:13:40,670 --> 00:13:46,054
Então, nesse caso, vou simplesmente redirecionar o usuário para o HomeComponent,

167
00:13:46,054 --> 00:13:50,828
que é o que será exibido no aplicativo Angular.

168
00:13:50,828 --> 00:13:58,748
Então, para fazer isso, vou digitar na propriedade ReDirectTo.

169
00:13:58,748 --> 00:14:03,838
E então defina que seja /home.

170
00:14:03,838 --> 00:14:10,507
O que significa que quando você navega sem fornecer um caminho de URL lá,

171
00:14:10,507 --> 00:14:16,708
então você navegaria automaticamente para o HomeComponent,

172
00:14:16,708 --> 00:14:20,490
e isso deve corresponder completo aqui.

173
00:14:20,490 --> 00:14:25,023
Então estes três, vou fornecer para as rotas aqui, para o momento.

174
00:14:25,023 --> 00:14:26,610
Os restantes,

175
00:14:26,610 --> 00:14:31,580
como eu disse, serão adicionados como parte do resto dos exercícios.

176
00:14:31,580 --> 00:14:36,658
Agora, obviamente você vê essas linhas vermelhas squiggly

177
00:14:36,658 --> 00:14:40,889
lá porque estas são todas em

178
00:14:40,889 --> 00:14:46,011
../Então deixe-me consertar essas.

179
00:14:46,011 --> 00:14:50,232
Então, agora, a partir do arquivo routes.ts,

180
00:14:50,232 --> 00:14:55,721
estamos preparando esta constante Rotas aqui e

181
00:14:55,721 --> 00:14:58,971
, em seguida, tornando-a disponível.

182
00:14:58,971 --> 00:15:04,111
Então, agora que isso está pronto para nós, vamos voltar para o app-routing.module.

183
00:15:04,111 --> 00:15:09,282
E no app-routing.module,

184
00:15:09,282 --> 00:15:15,141
Eu vou importar a constante de rotas,

185
00:15:15,141 --> 00:15:17,908
Rutas constante.

186
00:15:17,908 --> 00:15:24,542
Se você quiser dizer que como rotas, rotas constantes, e usá-lo aqui.

187
00:15:24,542 --> 00:15:26,516
Agora, como faço uso disso aqui?

188
00:15:26,516 --> 00:15:31,451
Agora, o RouterModule toma como

189
00:15:31,451 --> 00:15:36,029
um parâmetro para o ForRoot,

190
00:15:38,737 --> 00:15:42,261
O parâmetro é a configuração de rotas.

191
00:15:42,261 --> 00:15:50,154
Então eu vou fornecer as rotas como o parâmetro para isso, o RouterModule.

192
00:15:50,154 --> 00:15:56,520
Ok, então isso corrige nossa configuração de roteamento para nossa aplicação.

193
00:15:56,520 --> 00:16:01,480
Uma mudança final que precisamos corrigir é que a partir do app-routing.module,

194
00:16:01,480 --> 00:16:05,360
queremos ser capazes de exportar o RouterModule para o nosso app-module para

195
00:16:05,360 --> 00:16:07,120
que ele também possa fazer uso dele.

196
00:16:07,120 --> 00:16:11,796
Então é aqui que fazemos uso da propriedade export

197
00:16:11,796 --> 00:16:16,346
em nosso decorador ngModule.

198
00:16:16,346 --> 00:16:22,907
E disponibilize nosso RouterModule para o AppModule.

199
00:16:22,907 --> 00:16:27,990
Então vamos salvar as alterações também até agora.

200
00:16:27,990 --> 00:16:30,845
Agora, quando você roteia para uma dessas partes,

201
00:16:30,845 --> 00:16:36,040
o que quer que você exiba a exibição para o componente específico.

202
00:16:36,040 --> 00:16:40,260
Não temos nada no momento em nossa aplicação.

203
00:16:40,260 --> 00:16:45,124
Quando você olha para o arquivo AppComponent.html.

204
00:16:45,124 --> 00:16:49,961
Aqui, por padrão, só temos o app-header, app-menu,

205
00:16:49,961 --> 00:16:52,107
e o app-rodapé aqui.

206
00:16:52,107 --> 00:16:54,780
Agora felizmente,

207
00:16:54,780 --> 00:17:00,127
o Angular RouterModule nos fornece

208
00:17:00,127 --> 00:17:06,483
com uma diretiva chamada como roteador-outlet.

209
00:17:06,483 --> 00:17:11,635
Então, sempre que você especificar esta diretiva como,

210
00:17:14,802 --> 00:17:18,192
A tag em seu arquivo de modelo.

211
00:17:18,192 --> 00:17:23,355
Em seguida, seu aplicativo Angular usará automaticamente

212
00:17:23,355 --> 00:17:30,545
que como o local onde a vista correspondente precisa ser inserida.

213
00:17:30,545 --> 00:17:36,725
Então, especificando o roteador de saída no arquivo de modelo do meu AppComponent.

214
00:17:36,725 --> 00:17:44,537
Agora eu vou ser capaz de exibir qualquer uma dessas informações nesse local específico.

215
00:17:44,537 --> 00:17:48,747
Então, fizemos alterações no módulo de roteamento de aplicativo,

216
00:17:48,747 --> 00:17:54,573
o arquivo AppComponent.html, onde adicionamos o roteador de saída.

217
00:17:54,573 --> 00:17:59,416
Definimos as rotas no arquivo Routes.ts e

218
00:17:59,416 --> 00:18:06,074
então temos o AppModule onde adicionamos no ApproutingModule

219
00:18:06,074 --> 00:18:12,350
como uma das importações lá, depois de importá-lo aqui.

220
00:18:12,350 --> 00:18:15,110
Então, depois de todas essas mudanças, vamos e

221
00:18:15,110 --> 00:18:21,890
dar uma olhada no que nossos aplicativos Angular está mostrando no navegador.

222
00:18:21,890 --> 00:18:26,710
Indo para o nosso navegador, agora podemos ver que no nosso navegador

223
00:18:26,710 --> 00:18:31,830
a coisa padrão que foi mostrada aqui é home works.

224
00:18:31,830 --> 00:18:40,060
A partir do seu conhecimento de como funciona o componente gerado pela Angular CLI.

225
00:18:40,060 --> 00:18:46,840
Você já reconhece que isso deve estar no modelo para o componente inicial.

226
00:18:46,840 --> 00:18:53,040
Além disso, dê uma olhada no URL na parte do endereço do navegador.

227
00:18:53,040 --> 00:18:56,860
Você vê que ele diz localhost:4200/home.

228
00:18:56,860 --> 00:18:59,682
Se eu simplesmente digitar localhost:4200,

229
00:18:59,682 --> 00:19:04,996
isso será automaticamente redirecionado para localhost:4200/home.

230
00:19:04,996 --> 00:19:12,923
Porque nós configuramos essa rota em particular em nossa configuração de rotas aqui.

231
00:19:12,923 --> 00:19:16,889
Agora não temos como ir para os módulos restantes, então

232
00:19:16,889 --> 00:19:22,167
como fornecemos o link para que possamos navegar para o módulo restante.

233
00:19:22,167 --> 00:19:26,901
Então, para preencher isso, precisamos ir e ser capaz de adicionar mais informações

234
00:19:26,901 --> 00:19:31,358
nos arquivos de modelo de componentes de cabeçalho para

235
00:19:31,358 --> 00:19:36,640
que ele pode navegar entre esses vários componentes.

236
00:19:36,640 --> 00:19:43,350
Voltando ao nosso editor, deixe-me abrir o arquivo HeaderComponent.html.

237
00:19:43,350 --> 00:19:49,010
Dentro deste arquivo HeaderComponent, vemos que temos esses botões

238
00:19:49,010 --> 00:19:56,110
aqui que devem nos permitir navegar para esses componentes específicos lá.

239
00:19:56,110 --> 00:20:02,050
Então aqui, tomamos a ajuda de outra diretiva de atributo que

240
00:20:02,050 --> 00:20:08,370
o módulo de roteamento fornece para nós chamado como RouterLink.

241
00:20:08,370 --> 00:20:13,289
Então, para estes vamos fornecer

242
00:20:13,289 --> 00:20:17,984
RouterLink como /home.

243
00:20:17,984 --> 00:20:22,968
O que significa que para este botão específico,

244
00:20:22,968 --> 00:20:26,171
o link inicial na nossa barra de ferramentas.

245
00:20:26,171 --> 00:20:30,334
Quando clicarmos nisso, isso deve me direcionar automaticamente para a casa.

246
00:20:30,334 --> 00:20:36,640
Assim, desta forma, meu aplicativo Angular sabe para onde me enviar neste momento.

247
00:20:36,640 --> 00:20:40,090
Então isso é para casa lá.

248
00:20:40,090 --> 00:20:44,420
Agora, da mesma forma, deixe-me também adicionar um para o menu aqui.

249
00:20:45,590 --> 00:20:48,550
Para o menu, quando eu clicar no link do menu lá,

250
00:20:48,550 --> 00:20:54,020
que deve me levar para o componente do menu.

251
00:20:54,020 --> 00:21:01,140
Então, a diretiva de atributo RouterLink me permite especificar, como você vê

252
00:21:01,140 --> 00:21:08,010
aqui uma string onde eu posso especificar o caminho que precisa ser adicionado.

253
00:21:09,010 --> 00:21:14,900
Vamos salvar essas alterações também, e então agora dar uma olhada final em nosso aplicativo.

254
00:21:14,900 --> 00:21:21,021
Indo para a nossa aplicação, agora vemos que um componente Home é exibido aqui.

255
00:21:21,021 --> 00:21:25,426
Quando clicamos no componente Menu, estamos no menu.

256
00:21:25,426 --> 00:21:30,570
Então observe como meu aplicativo navegou automaticamente para

257
00:21:30,570 --> 00:21:35,509
o componente de menu para mostrar a exibição com o menu aqui.

258
00:21:35,509 --> 00:21:39,590
E também dando uma olhada na barra de endereço,

259
00:21:39,590 --> 00:21:46,670
observe como a barra de endereço agora mostra localhost:4200/menu.

260
00:21:46,670 --> 00:21:51,670
Novamente, podemos navegar de volta para o componente inicial e para o componente de menu,

261
00:21:51,670 --> 00:21:52,410
para frente e para trás.

262
00:21:53,580 --> 00:21:59,230
Então, isso mostra como, adicionando esse roteamento ao nosso aplicativo,

263
00:21:59,230 --> 00:22:04,940
nós somos capazes de navegar e mostrar diferentes visualizações dentro de nosso aplicativo.

264
00:22:04,940 --> 00:22:09,640
Agora, o sobre e contato, vamos fazer isso como parte de

265
00:22:09,640 --> 00:22:14,090
outro exercício e a atribuição que se segue mais tarde.

266
00:22:15,150 --> 00:22:20,485
Isso conclui este exercício onde usamos módulo de roteador angular e

267
00:22:20,485 --> 00:22:25,047
, em seguida, configurou nossa aplicação angular para usar várias rotas

268
00:22:25,047 --> 00:22:27,212
para mostrar as diferentes visualizações.

269
00:22:27,212 --> 00:22:29,240
Este é um bom momento para

270
00:22:29,240 --> 00:22:35,117
você fazer um commit Git com a mensagem Noções básicas do roteador Angular.

271
00:22:35,117 --> 00:22:36,115
[MÚSICA]