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

2
00:00:04,974 --> 00:00:08,004
Vamos agora começar a falar sobre Roteamento Angular.

3
00:00:08,004 --> 00:00:11,348
É roteamento ou está enraizando?

4
00:00:11,348 --> 00:00:13,806
Eu vou estar torcendo para roteamento.

5
00:00:13,806 --> 00:00:18,397
Então, daqui em diante, vou pronunciar todos estes como roteamento,

6
00:00:18,397 --> 00:00:21,400
rotas, roteador e assim por diante.

7
00:00:21,400 --> 00:00:25,630
Se acontecer de você ser de uma área onde em inglês você pronuncia como rota ou

8
00:00:25,630 --> 00:00:27,060
roteador, por favor, tenha paciência comigo.

9
00:00:28,200 --> 00:00:33,610
Então, o que exatamente é Roteamento Angular e como isso nos ajuda?

10
00:00:33,610 --> 00:00:37,290
Em termos da aplicação Angular que vimos até

11
00:00:37,290 --> 00:00:41,310
até agora, nunca vimos o uso para roteamento.

12
00:00:41,310 --> 00:00:44,913
Vimos que podemos desenvolver uma aplicação angular com

13
00:00:44,913 --> 00:00:49,235
múltiplos componentes e, em seguida, fazer uso deles um dentro do outro, e

14
00:00:49,235 --> 00:00:53,794
desenvolver toda uma aplicação Angular sem sequer falar de roteamento.

15
00:00:53,794 --> 00:00:58,116
Agora suponha que você tem vários componentes e

16
00:00:58,116 --> 00:01:03,233
você quer ser capaz de navegar entre os componentes em

17
00:01:03,233 --> 00:01:08,350
de uma forma que você pode fazer com que esta navegação através, por exemplo, clicando em links ou botões em sua interface do usuário e

18
00:01:08,350 --> 00:01:13,352
ser capaz de renderizar diferentes visualizações na tela do seu aplicativo,

19
00:01:13,352 --> 00:01:19,720
então

20
00:01:19,720 --> 00:01:23,959
Roteamento Angular vem em seu resgate.

21
00:01:23,959 --> 00:01:28,633
Vamos ver como podemos usar roteamento para desenvolver algo chamado aplicativos de página única

22
00:01:28,633 --> 00:01:30,120
.

23
00:01:30,120 --> 00:01:34,390
Falaremos sobre aplicativos de página única na próxima lição.

24
00:01:34,390 --> 00:01:38,540
Mas no momento, vamos nos concentrar em Roteamento Angular e

25
00:01:38,540 --> 00:01:42,350
especificamente o Route um módulo que está disponível em Angular.

26
00:01:43,610 --> 00:01:48,150
O módulo de roteador em si é separado do módulo de núcleo angular, então

27
00:01:48,150 --> 00:01:53,220
ele está disponível como um módulo separado e você precisará importá-lo explicitamente

28
00:01:53,220 --> 00:01:59,170
em seu aplicativo Angular, a fim de fazer uso do modelo de roteador angular de

29
00:01:59,170 --> 00:02:04,360
suportado fornece para você navegar entre raio

30
00:02:04,360 --> 00:02:09,440
visualiza os componentes do raio que fazem parte da sua predação angular.

31
00:02:10,460 --> 00:02:14,820
Então, como parte do exercício, vamos adicionar vários componentes e

32
00:02:14,820 --> 00:02:21,060
vamos ver como podemos navegar entre eles usando o roteador angular.

33
00:02:23,020 --> 00:02:26,800
Então, como já mencionei o roteador angular

34
00:02:26,800 --> 00:02:30,280
permite a navegação entre várias visualizações.

35
00:02:30,280 --> 00:02:35,660
De tal forma que você pode incluir esta navegação em

36
00:02:35,660 --> 00:02:40,870
os links ou os botões baseados na barra de ferramentas e

37
00:02:40,870 --> 00:02:45,610
assim por diante você pode incluir na interface do usuário do seu aplicativo Angular e

38
00:02:45,610 --> 00:02:49,810
então você pode acionar a navegação de uma vista para outra view

39
00:02:49,810 --> 00:02:54,320
clicando no link ou no botão em sua interface do usuário.

40
00:02:55,360 --> 00:03:00,611
Aqui é onde o Roteador Angular aproveita o URL do navegador e

41
00:03:00,611 --> 00:03:04,018
ele usa o URL do navegador como uma instrução para

42
00:03:04,018 --> 00:03:08,179
ele navegar entre as visualizações geradas pelo cliente raio.

43
00:03:08,179 --> 00:03:12,857
Essas exibições são normalmente suportadas pelos vários componentes

44
00:03:12,857 --> 00:03:15,982
que formam o seu aplicativo Angular.

45
00:03:15,982 --> 00:03:19,289
Agora, quando você navega de uma vista para outra,

46
00:03:19,289 --> 00:03:22,906
você também pode passar parâmetros opcionais para essas exibições.

47
00:03:22,906 --> 00:03:26,307
Como aprendemos nesse slide anterior,

48
00:03:26,307 --> 00:03:31,305
o Roteador Angular aproveita o URL para

49
00:03:31,305 --> 00:03:36,856
habilitá-lo a reconhecer a necessidade de navegar entre o meio.

50
00:03:36,856 --> 00:03:40,775
Então, é aqui que Angular Router tira proveito do que

51
00:03:40,775 --> 00:03:44,704
já é suportado em HTML5 através da API de histórico?

52
00:03:44,704 --> 00:03:47,990
Então, o que a API de histórico nos permite fazer?

53
00:03:47,990 --> 00:03:52,156
Ele dá aos desenvolvedores a capacidade de modificar

54
00:03:52,156 --> 00:03:56,766
URL de um site sem causar uma atualização de página.

55
00:03:56,766 --> 00:04:03,806
Agora, se você está acostumado a visitar vários sites em seu navegador,

56
00:04:03,806 --> 00:04:10,078
você normalmente clicará na barra de favoritos ou

57
00:04:10,078 --> 00:04:15,198
em um link em uma página ou você digitaria explicitamente em

58
00:04:15,198 --> 00:04:20,063
o URL na barra de endereços do seu navegador.

59
00:04:20,063 --> 00:04:25,310
Agora, quando você faz isso, você está especificando explicitamente o URL lá.

60
00:04:25,310 --> 00:04:27,152
Agora, quando você especifica um URL,

61
00:04:27,152 --> 00:04:31,470
você está acionando seu navegador para ir automaticamente para um servidor e

62
00:04:31,470 --> 00:04:37,070
buscar essa nova página e renderizar a página na janela do navegador.

63
00:04:37,070 --> 00:04:43,180
Agora, se ele pode suprimir essa necessidade de ir a um servidor e buscar informações, mas

64
00:04:43,180 --> 00:04:49,280
em vez disso alterar o URL sem causar esta atualização de página,

65
00:04:49,280 --> 00:04:54,450
então podemos aproveitar isso para nos permitir ser capaz de navegar

66
00:04:54,450 --> 00:04:59,620
entre as visualizações que fazem parte de um único aplicativo e

67
00:04:59,620 --> 00:05:03,890
este é o lugar onde tomamos vantagem do HTML5.API de histórico

68
00:05:03,890 --> 00:05:09,034
que suporta métodos como PushState e ReplacEstate.

69
00:05:09,034 --> 00:05:13,662
Então, o pushState permite que você adicione uma entrada de histórico ao histórico do seu navegador

70
00:05:13,662 --> 00:05:18,494
sem realmente causar uma atualização de página.

71
00:05:18,494 --> 00:05:21,938
Da mesma forma, um ReplacEstate modificará

72
00:05:21,938 --> 00:05:26,810
a entrada do histórico existente no histórico do seu navegador.

73
00:05:26,810 --> 00:05:30,551
Então, você pode até mesmo usar o botão voltar e

74
00:05:30,551 --> 00:05:35,724
avançar do seu navegador para ser capaz de mover para trás e

75
00:05:35,724 --> 00:05:41,030
para frente entre os URLs sem causar uma atualização de página.

76
00:05:41,030 --> 00:05:45,905
Agora, este é o lugar onde você precisa especificar algo dentro do seu índice HTML

77
00:05:45,905 --> 00:05:47,458
página chamada base.

78
00:05:47,458 --> 00:05:52,489
Então, quando a API de histórico HTML faz uso desses métodos,

79
00:05:52,489 --> 00:05:57,307
então para a modificação, você precisa especificar uma base

80
00:05:57,307 --> 00:06:02,875
local de onde você está especificando as partes adicionais

81
00:06:02,875 --> 00:06:07,930
do caminho de URL que não resultará em uma atualização de página.

82
00:06:07,930 --> 00:06:10,580
Então, neste caso, para a nossa aplicação Angular,

83
00:06:10,580 --> 00:06:12,378
isso sempre começa na raiz.

84
00:06:12,378 --> 00:06:17,829
Então, é por isso que especificamos a base como href=”/”.

85
00:06:17,829 --> 00:06:22,581
Tudo o resto que vem depois disso no URL será

86
00:06:22,581 --> 00:06:27,750
tratado dentro do seu aplicativo Angular como algo que

87
00:06:27,750 --> 00:06:33,228
aciona navegação que é tratado com o roteador Angular em si

88
00:06:33,228 --> 00:06:39,080
sem fazer com que seu navegador precise de uma atualização de um servidor.

89
00:06:39,080 --> 00:06:44,240
Então, é assim que o roteador angular aproveita a API de histórico HTML5.

90
00:06:45,300 --> 00:06:47,766
Agora, se você não tem a API de histórico,

91
00:06:47,766 --> 00:06:51,295
a outra maneira de fazer navegação é usando hashtags.

92
00:06:51,295 --> 00:06:56,558
Você já sabe que em HTML, se você especificar qualquer link começando

93
00:06:56,558 --> 00:07:01,543
com uma hashtag, que se refere a um link dentro da mesma página.

94
00:07:01,543 --> 00:07:05,782
Então, quando você clica em tais links, isso não causará uma atualização de página.

95
00:07:05,782 --> 00:07:09,944
Em vez disso, ele redirecionará você para outro local dentro da mesma página.

96
00:07:09,944 --> 00:07:12,256
Então, essa é outra maneira de fazer as coisas.

97
00:07:12,256 --> 00:07:17,030
Mas para renderização limpa, a API HTML5 suporta essa API de histórico

98
00:07:17,030 --> 00:07:22,012
que permite manipular o histórico de

99
00:07:22,012 --> 00:07:26,087
seu navegador sem causar uma atualização de página.

100
00:07:26,087 --> 00:07:28,616
Depois dessa longa explicação,

101
00:07:28,616 --> 00:07:33,049
vamos dar um exemplo para nos ajudar a entender isso ainda mais.

102
00:07:33,049 --> 00:07:39,752
Suponha que você defina seu URL assim, digamos, por exemplo, example.abc.com/home.

103
00:07:39,752 --> 00:07:43,325
Agora com a API de histórico HTML5,

104
00:07:43,325 --> 00:07:48,301
você pode simplesmente pegar a última parte do URL e

105
00:07:48,301 --> 00:07:56,988
modificá-la para outro URL como eu tinha mostrado aqui com example.abc.com/menu.

106
00:07:56,988 --> 00:08:03,054
Então você vê que o URL agora foi alterado da barra inicial para o menu barra,

107
00:08:03,054 --> 00:08:08,624
esta alteração pode ser acionada usando um método de estado push da API de histórico HTML5

108
00:08:08,624 --> 00:08:14,216
sem como mencionei, sem recarregar a página.

109
00:08:14,216 --> 00:08:18,533
Em vez disso, este será um gatilho interno para a navegação

110
00:08:18,533 --> 00:08:24,842
que o Roteador Angular aproveita explicitamente para

111
00:08:24,842 --> 00:08:32,161
suportar a navegação entre várias visualizações do seu aplicativo Angular.

112
00:08:32,161 --> 00:08:36,828
Agora, obviamente, você deve estar interessado em como o Roteador Angular aproveita

113
00:08:36,828 --> 00:08:37,376
disso.

114
00:08:37,376 --> 00:08:42,868
Então é aqui que o Roteador Angular aproveita a manipulação de histórico

115
00:08:42,868 --> 00:08:47,917
para modificar a URL do navegador sem acionar uma atualização de página.

116
00:08:47,917 --> 00:08:49,485
Vamos dar um exemplo.

117
00:08:49,485 --> 00:08:56,933
Suponha que você tenha seu aplicativo Angular residindo neste URL específico.

118
00:08:56,933 --> 00:09:01,809
Agora, acontece que o aplicativo Angular que você está trabalhando em

119
00:09:01,809 --> 00:09:06,784
está sendo renderizado para o navegador acessando-o neste URL específico.

120
00:09:06,784 --> 00:09:13,430
Então, ele nos ajudará a entender rapidamente o que o Roteador Angular nos permite fazer.

121
00:09:13,430 --> 00:09:19,790
Então, neste caso, quando você digita isso em seu URL do navegador,

122
00:09:19,790 --> 00:09:24,160
you Angular Router pode ser facilmente configurado para redirecionar você

123
00:09:24,160 --> 00:09:29,210
para um local padrão dentro de seu aplicativo angular.

124
00:09:29,210 --> 00:09:33,433
Normalmente, me lembre que algo como casa.

125
00:09:33,433 --> 00:09:38,606
Então, que irá levá-lo para o ponto de entrada padrão para

126
00:09:38,606 --> 00:09:42,303
sua aplicação angular que para

127
00:09:42,303 --> 00:09:48,109
bem de fácil compreensão, vou rotulá-lo como /home.

128
00:09:48,109 --> 00:09:53,175
Portanto, se o seu URL contiver localhost:4200/home,

129
00:09:53,175 --> 00:09:58,249
isso significa que você está em seu local inicial padrão.

130
00:09:58,249 --> 00:10:01,519
Agora, quando esta navegação é acionada,

131
00:10:01,519 --> 00:10:07,384
você pode então permitir que seu Roteador Angular o leve automaticamente para a exibição,

132
00:10:07,384 --> 00:10:12,017
por exemplo, que é suportada por esse componente doméstico.

133
00:10:12,017 --> 00:10:16,963
Então, quando o URL se torna localhost:4200/home,

134
00:10:16,963 --> 00:10:24,605
você renderizará automaticamente a visualização do componente inicial na tela do navegador.

135
00:10:24,605 --> 00:10:30,601
Muito exatamente quando você coloca a exibição que veremos no próximo slide e

136
00:10:30,601 --> 00:10:33,086
no exercício que se segue.

137
00:10:33,086 --> 00:10:37,903
Da mesma forma, você pode ter outras exibições dentro do aplicativo Angular

138
00:10:37,903 --> 00:10:42,821
que também podem ser suportadas por meio de outros URLs

139
00:10:42,821 --> 00:10:47,153
que são extensões para o localhost:4200.

140
00:10:47,153 --> 00:10:53,354
Assim, por exemplo, se a URL for localhost:4200/aboutus, então essa

141
00:10:53,354 --> 00:11:00,410
pode levar você a ser mostrada a exibição que é renderizada pelo AboutComponent.

142
00:11:00,410 --> 00:11:05,070
E da mesma forma, o menu mostrará o MenuComponent e assim por diante.

143
00:11:06,320 --> 00:11:09,088
Então o que isso nos permite fazer é,

144
00:11:09,088 --> 00:11:14,624
dependendo do que o URL sendo usado em seu navegador

145
00:11:14,624 --> 00:11:19,956
você vai usar isso para navegar automaticamente entre as várias visualizações

146
00:11:19,956 --> 00:11:25,515
de seus vários componentes de seu aplicativo Angular.

147
00:11:25,515 --> 00:11:27,968
Agora, você não precisa se preocupar explicitamente com isso.

148
00:11:27,968 --> 00:11:33,200
Se você configurar o Roteador Angular para cuidar de tudo isso, então o roteador

149
00:11:33,200 --> 00:11:38,273
cuidará automaticamente de fornecer a você a navegação entre esses componentes

150
00:11:38,273 --> 00:11:43,957
, como veremos no exercício que segue esta palestra em particular.

151
00:11:43,957 --> 00:11:48,407
Agora, antes de prosseguir para o exercício onde vamos aprender mais sobre

152
00:11:48,407 --> 00:11:53,017
o roteador angular, deixe-me rapidamente chamar sua atenção para alguns termos

153
00:11:53,017 --> 00:11:57,945
dentro do Roteador Angular que você encontrará durante o exercício e

154
00:11:57,945 --> 00:12:01,759
Eu gostaria que você prestasse especial atenção a esses termos,

155
00:12:01,759 --> 00:12:07,357
porque eles são cruciais para entender como o Roteador Angular realmente funciona.

156
00:12:07,357 --> 00:12:13,205
Então você veria primeiro que quando projetamos o Roteador Angular,

157
00:12:13,205 --> 00:12:18,042
estaremos tomando a ajuda do módulo de roteador que

158
00:12:18,042 --> 00:12:22,669
faz parte da biblioteca de roteador de barra angular.

159
00:12:22,669 --> 00:12:28,094
Então, vamos importar o módulo do roteador para ou aplicativo angular

160
00:12:28,094 --> 00:12:32,690
para o módulo do aplicativo e, em seguida, também estaremos importando as rotas.

161
00:12:32,690 --> 00:12:37,716
Assim, as rotas nos permitem definir as várias rotas que nosso aplicativo

162
00:12:37,716 --> 00:12:43,335
Angular faz uso ou o Roteador Angular faz uso.

163
00:12:43,335 --> 00:12:49,047
Então, nesse caso, estaríamos especificando as rotas na forma de um caminho e

164
00:12:49,047 --> 00:12:51,585
o componente correspondente.

165
00:12:51,585 --> 00:12:56,299
Então, como você viu no slide anterior, você viu que cada uma dessas extensões de URL

166
00:12:56,299 --> 00:13:00,951
estava sendo mapeada para a exibição de um componente específico.

167
00:13:00,951 --> 00:13:05,729
Então, esse tipo de informação é fornecida para que Angular Router

168
00:13:05,729 --> 00:13:09,885
através de rotas e essas rotas são todas especificadas usando

169
00:13:09,885 --> 00:13:14,139
um objeto JavaScript como este caminho com duas propriedades.

170
00:13:14,139 --> 00:13:18,470
Caminho e componente e algumas propriedades adicionais que não vamos

171
00:13:18,470 --> 00:13:22,970
encontrar agora, mas veremos em alguns dos exercícios posteriores.

172
00:13:24,610 --> 00:13:28,531
Além disso, a segunda pergunta que você gostaria de saber é onde essa exibição seria

173
00:13:28,531 --> 00:13:30,657
renderizada em seu aplicativo Angular?

174
00:13:30,657 --> 00:13:35,863
Este é o lugar onde dentro do nosso modelo do nosso componente aplicativo,

175
00:13:35,863 --> 00:13:43,286
vamos incluir uma diretiva chamada como o RouterOutlet que é especificado como você

176
00:13:43,286 --> 00:13:48,628
ver como <router-outlet> e. </router-outlet>

177
00:13:48,628 --> 00:13:54,890
Isso será incluído no arquivo de modelo de componente do aplicativo,

178
00:13:54,890 --> 00:13:59,188
agora, em seguida, seu Roteador Angular navega para

179
00:13:59,188 --> 00:14:04,484
as diferentes visualizações dos diferentes componentes.

180
00:14:04,484 --> 00:14:08,899
A exibição correspondente do componente será incluída na exibição de aplicativos

181
00:14:08,899 --> 00:14:13,633
sempre que você especificar essa saída de roteador específica.

182
00:14:13,633 --> 00:14:17,773
Então, cuidado com isso no exercício que se segue.

183
00:14:17,773 --> 00:14:22,752
Além disso, para acionar a navegação, você veria que

184
00:14:22,752 --> 00:14:27,743
com muitas das tags a que são usadas dentro do aplicativo.

185
00:14:27,743 --> 00:14:32,429
Assim, por exemplo, eu incluiria uma configuração de tags com o botão MD

186
00:14:32,429 --> 00:14:36,820
componente material angular na barra de ferramentas,

187
00:14:36,820 --> 00:14:41,327
no componente de cabeçalho da nossa aplicação Angular.

188
00:14:41,327 --> 00:14:44,635
Eu associaria as tags a com outra diretiva,

189
00:14:44,635 --> 00:14:47,437
uma diretiva de atributo chamada RouterLink.

190
00:14:47,437 --> 00:14:53,260
O RouterLink é uma diretiva real que o módulo do roteador fornece para nós.

191
00:14:53,260 --> 00:14:57,966
Este link de roteador nos permite especificar o caminho como, por exemplo,

192
00:14:57,966 --> 00:15:00,783
códigos escritos, eu posso ver um “/menu”.

193
00:15:00,783 --> 00:15:05,677
Você pode ter mais detalhes do que isso para o RouterLink.

194
00:15:05,677 --> 00:15:11,646
Mas para o exercício, vamos começar com um exemplo simples onde teríamos,

195
00:15:11,646 --> 00:15:15,806
por exemplo, /menu barra home barra entre em contato conosco e assim

196
00:15:15,806 --> 00:15:19,976
em especificado usando o atributo RouterLink direto.

197
00:15:19,976 --> 00:15:25,212
Então, quando você clica em um link como este em sua barra de ferramentas,

198
00:15:25,212 --> 00:15:31,281
então que irá acionar o Roteador Angular para causar uma alteração ou

199
00:15:31,281 --> 00:15:39,502
uma navegação para uma determinada visão que é suportada pelo módulo Roteador Angular.

200
00:15:39,502 --> 00:15:45,391
Assim, o mapeamento entre este link e os componentes correspondentes

201
00:15:45,391 --> 00:15:51,800
já está especificado na rota que damos à nossa aplicação Angular.

202
00:15:51,800 --> 00:15:56,715
Então, cuidado com todas essas coisas enquanto você faz o exercício.

203
00:15:56,715 --> 00:16:00,895
Vou explicar algumas dessas coisas e a razão para

204
00:16:00,895 --> 00:16:07,366
fazê-las enquanto estamos fazendo os passos do exercício que segue esta lição.

205
00:16:07,366 --> 00:16:11,099
[MÚSICA]