[MÚSICA]
Neste exercício vamos olhar para como podemos aproveitar o módulo de roteamento
do Angular para ser capaz de suportar vários componentes, e
ser capaz de navegar para qualquer um desses componentes em nossa aplicação Angular.
Olhando rapidamente o estado da nossa aplicação.
No final do último exercício,
já notamos que nesta aplicação, no cabeçalho,
temos links para quatro páginas de aspas diferentes aqui.
Agora, em termos angulares, isso seria suportado usando
componentes diferentes, como veremos neste exercício.
Então aqui vemos que quando clicamos no Início,
queremos ser capazes de ver os detalhes do que deve estar presente na página inicial.
E da mesma forma, o Sobre e o Menu é claro que você já vê-lo ali mesmo,
e, em seguida, o contato, provavelmente exibe algumas informações sobre o conteúdo para
este restaurante particular.
Então, como eles vão sobre apoiar algo assim?
Primeiro, ao dar uma olhada rápida, vemos que o Menu é
já suportado exibindo as informações sobre o menu aqui, e
isso já está facilitado com o uso do componente Menu.
Então, vemos que o componente Menu é justaposto entre o cabeçalho e
o rodapé e é capaz de exibir as informações ali mesmo.
Agora, como podemos aproveitar o uso do módulo Roteador Angular para permitir
nós para suportar esses vários componentes e ser capaz de navegar entre eles.
Agora, para começar, primeiro, é claro, precisamos de vários componentes,
cada um deles mostrando sua respectiva visualização para que possamos navegar entre as visualizações.
Então vamos adicionar mais três componentes à nossa aplicação Angular,
o Início, o Sobre e o Contato.
Você já sabe como fazer isso, então vamos para o próximo passo.
No prompt, digite ng g component
home para criar o componente home.
Da mesma forma gerar
o componente sobre e
também enquanto estamos nele
o componente de contato.
Então, agora temos três componentes adicionados junto com o novo componente que
já tem.
O componente de detalhe do disco já está sendo usado nos componentes do menu, portanto
não o consideramos no momento.
Mas agora temos componentes de casa, sobre, contato e menu, e
precisamos de uma maneira de ir entre eles.
Então, como vamos fazer isso?
Então é aí que eu faço uso do módulo Roteador Angular.
Para começar a usar o módulo do roteador para nos permitir navegar
entre esses componentes, vamos adicionar um novo módulo Angular.
Agora este padrão de usar o módulo de roteador é algo que é sugerido para
aplicações angulares ligeiramente mais complexas, mas
se fizermos isso como uma prática padrão, ele vai um longo caminho para nos ajudar no futuro.
Então eu estou começando até mesmo a aplicação simples com
colocando o módulo roteador em seu próprio módulo separado.
Assim, que engloba todas as nossas necessidades de roteamento em um módulo separado.
Para começar, usamos novamente o Angular CLI para
criar outro módulo, e vamos chamar esse módulo como roteamento de aplicativo.
Então, este módulo de roteamento de aplicativos que vamos criar vai aproveitar
o módulo Angular Slotting para fornecer recursos de roteamento para nossa aplicação.
E então vamos fazer uso disso em nosso módulo de aplicativo para habilitar o roteamento.
Para criar um novo módulo chamado roteamento de aplicativo,
no prompt digite ng g módulo app-routing,
e que deve criar um módulo de roteamento de aplicativo e
colocar um arquivo app-routing.module.ts nessa pasta específica lá.
Agora este módulo de roteamento de aplicativo é apenas deixado lá.
Precisamos incluir explicitamente isso em nosso módulo de aplicativo,
, então ele tem que ser capaz de fazer uso dele.
Indo para o editor, agora vemos que agora temos outra pasta aqui
chamada app-routing e dentro que temos um ApproutingModule aqui,
escolhemos um módulo Angular genérico que a Angular CLI gerou para nós.
Isso não tem nada específico sobre roteamento como tal no momento,
mas vamos adicionar esses recursos lá.
Mas, antes de fazer isso, vamos usar este ApproutingModule em nosso app.module,
o módulo raiz para nossa aplicação Angular.
Para fazer isso, abra o app.module, e
enquanto estamos aqui, deixe-me fazer um pouco de limpeza aqui.
Eu tendem a não gostar de código desorganizado, então
Eu só vou mover todo esse código para
os componentes juntos em um só lugar lá e
então eu tenho meus serviços sendo necessários para baixo aqui.
Agora temos um novo módulo que estamos recebendo
do ApproutingModule,
que acabamos de criar e
então eu vou exigir que
ApproutingModule no meu módulo
Route ou o AppModule aqui.
Então, eu incluo o ApproutingModule importando-o primeiro lá.
E depois disso, nas importações, eu entro e
depois adiciono o ApproutingModule.
Ali mesmo, ApproutingModule.
Então, com isso, meu módulo de aplicativo,
o módulo raiz, agora é corrigido para fazer uso do ApproutingModule.
Agora isso me dá a liberdade de desenvolver minha parte de roteamento em
meu ApproutingModule com total confiança de que ele será usado pelo meu módulo de aplicativo.
Então vamos salvar as alterações no módulo do aplicativo, e
então vamos voltar e abrir o ApproutingModule aqui.
E aqui vamos fazer uso de
o módulo roteador que Angular fornece para nós.
Então aqui deixe-me importar o,
RouterModule aqui, e também o módulo de rotas
companheiro que está disponível a partir Angular.
E então eu vou importar isso de Angular,
e, em seguida, RouterModule aqui.
Então, a partir da biblioteca de roteador angular, eu importe tanto o RouterModule quanto
o módulo Routes.
Então, uma vez que eu fizer isso, obviamente, eu preciso ser capaz de incluir o RouterModule aqui.
Então, além do CommonModule que eu importei lá,
Eu preciso também usar o RouterModule aqui.
Agora, eu vou deixá-lo neste momento.
Vamos desenvolver as rotas para a nossa aplicação Angular e
, em seguida, voltar e corrigir isso um pouco mais tarde.
Então, com isso, deixe-me salvar as alterações no módulo de roteamento do aplicativo.
E o que eu vou fazer é, apenas para manter meu código limpo e
organizado, eu vou definir todas as rotas para minha aplicação em outro arquivo.
Mas eu vou criar na pasta app-routing e
então vou nomeá-lo como routes.ts5.
Agora, dentro deste arquivo, vou criar todas as rotas que eu preciso.
Então aqui, eu vou importar,
As rotas de, @angular /roteador,
e depois usar isso para construir as rotas para minha aplicação.
Agora, além disso, eu preciso ser capaz de importar todos os
os componentes que eu tenho dentro do meu aplicativo.
Porque eu quero ser capaz de navegar para todos os componentes.
Então, onde eu tenho a lista de todos os componentes?
Eu os tenho no app_module.
Então deixe-me ir para o app_module.
Eu tento não digitar as coisas o mais longe possível para manter as coisas sob controle.
Então eu vou para o app_module, e então eu copiar em todos os componentes que eu tenho.
Eu não preciso do AppComponent porque eu não vou estar navegando diretamente para isso no meu aplicativo
, mas os restantes eu vou precisar.
Então eu vou simplesmente copiar todos esses e
, em seguida, incluí-los no meu arquivo de rotas, aqui.
Então agora eu tenho o MenuComponent, o Dishdetail, Cabeçalho, Pé.
Na verdade, também não preciso do cabeçalho e do rodapé.
Não vou precisar do cabeçalho e
FooterComponent porque não vou navegar até eles usando rotas.
Então deixe-me excluir os componentes de cabeçalho e rodapé.
Só preciso do Menu, Início, Sobre, Contatos.
Eu incluí o Dishdetail, vamos chegar a isso em um dos exercícios posteriores.
Então, agora que incluímos todos estes, o próximo passo é para
me definir as várias rotas que estão disponíveis aqui.
Vou definir uma constante aqui
rotas nomeadas do tipo Rotas.
Então agora você vê por que eu tenho rotas importantes do roteador Angular lá.
Então isso me permitirá definir uma matriz especificando
as várias rotas que fazem parte da minha aplicação.
Aqui, deixe-me especificar todas as rotas aqui.
Agora, quando você especificar rotas em seu aplicativo Angular
, você especificará o caminho.
Que eu vou começar com o HomeComponent,
e, em seguida, quando eu navegar para o caminho home,
o componente correspondente é o HomeComponent.
Então, quando meu URL incluir home,
então eu estarei navegando para o homeComponent.
Na palestra anterior, já vimos como usamos o HTML
pushState () para reconhecer a navegação
interna, usando o suporte HTML para o pushState ().
Então é isso que eu estou aproveitando aqui, a fim de definir essas várias rotas aqui.
Então, quando eu digo localhost:4200/home,
então que está apontando para o homeComponent, aqui.
Então essa é a maneira que eu vou navegar para o HomeComponent.
Da mesma forma, podemos definir para os outros componentes em nossa aplicação.
O próximo caminho que vou definir é para o MenuComponent.
Para este exercício, eu só vou definir apenas estes dois.
Os restantes serão preenchidos como parte
de alguns dos exercícios e tarefas posteriores que se seguem.
Então temos dois deles configurados, Home e Menu.
Agora, eu também devo fornecer a rota padrão aqui.
Então, quando o usuário navega para localhost:4200,
, então você vai acabar no local padrão.
Então, nesse caso, vou simplesmente redirecionar o usuário para o HomeComponent,
que é o que será exibido no aplicativo Angular.
Então, para fazer isso, vou digitar na propriedade ReDirectTo.
E então defina que seja /home.
O que significa que quando você navega sem fornecer um caminho de URL lá,
então você navegaria automaticamente para o HomeComponent,
e isso deve corresponder completo aqui.
Então estes três, vou fornecer para as rotas aqui, para o momento.
Os restantes,
como eu disse, serão adicionados como parte do resto dos exercícios.
Agora, obviamente você vê essas linhas vermelhas squiggly
lá porque estas são todas em
../Então deixe-me consertar essas.
Então, agora, a partir do arquivo routes.ts,
estamos preparando esta constante Rotas aqui e
, em seguida, tornando-a disponível.
Então, agora que isso está pronto para nós, vamos voltar para o app-routing.module.
E no app-routing.module,
Eu vou importar a constante de rotas,
Rutas constante.
Se você quiser dizer que como rotas, rotas constantes, e usá-lo aqui.
Agora, como faço uso disso aqui?
Agora, o RouterModule toma como
um parâmetro para o ForRoot,
O parâmetro é a configuração de rotas.
Então eu vou fornecer as rotas como o parâmetro para isso, o RouterModule.
Ok, então isso corrige nossa configuração de roteamento para nossa aplicação.
Uma mudança final que precisamos corrigir é que a partir do app-routing.module,
queremos ser capazes de exportar o RouterModule para o nosso app-module para
que ele também possa fazer uso dele.
Então é aqui que fazemos uso da propriedade export
em nosso decorador ngModule.
E disponibilize nosso RouterModule para o AppModule.
Então vamos salvar as alterações também até agora.
Agora, quando você roteia para uma dessas partes,
o que quer que você exiba a exibição para o componente específico.
Não temos nada no momento em nossa aplicação.
Quando você olha para o arquivo AppComponent.html.
Aqui, por padrão, só temos o app-header, app-menu,
e o app-rodapé aqui.
Agora felizmente,
o Angular RouterModule nos fornece
com uma diretiva chamada como roteador-outlet.
Então, sempre que você especificar esta diretiva como,
A tag em seu arquivo de modelo.
Em seguida, seu aplicativo Angular usará automaticamente
que como o local onde a vista correspondente precisa ser inserida.
Então, especificando o roteador de saída no arquivo de modelo do meu AppComponent.
Agora eu vou ser capaz de exibir qualquer uma dessas informações nesse local específico.
Então, fizemos alterações no módulo de roteamento de aplicativo,
o arquivo AppComponent.html, onde adicionamos o roteador de saída.
Definimos as rotas no arquivo Routes.ts e
então temos o AppModule onde adicionamos no ApproutingModule
como uma das importações lá, depois de importá-lo aqui.
Então, depois de todas essas mudanças, vamos e
dar uma olhada no que nossos aplicativos Angular está mostrando no navegador.
Indo para o nosso navegador, agora podemos ver que no nosso navegador
a coisa padrão que foi mostrada aqui é home works.
A partir do seu conhecimento de como funciona o componente gerado pela Angular CLI.
Você já reconhece que isso deve estar no modelo para o componente inicial.
Além disso, dê uma olhada no URL na parte do endereço do navegador.
Você vê que ele diz localhost:4200/home.
Se eu simplesmente digitar localhost:4200,
isso será automaticamente redirecionado para localhost:4200/home.
Porque nós configuramos essa rota em particular em nossa configuração de rotas aqui.
Agora não temos como ir para os módulos restantes, então
como fornecemos o link para que possamos navegar para o módulo restante.
Então, para preencher isso, precisamos ir e ser capaz de adicionar mais informações
nos arquivos de modelo de componentes de cabeçalho para
que ele pode navegar entre esses vários componentes.
Voltando ao nosso editor, deixe-me abrir o arquivo HeaderComponent.html.
Dentro deste arquivo HeaderComponent, vemos que temos esses botões
aqui que devem nos permitir navegar para esses componentes específicos lá.
Então aqui, tomamos a ajuda de outra diretiva de atributo que
o módulo de roteamento fornece para nós chamado como RouterLink.
Então, para estes vamos fornecer
RouterLink como /home.
O que significa que para este botão específico,
o link inicial na nossa barra de ferramentas.
Quando clicarmos nisso, isso deve me direcionar automaticamente para a casa.
Assim, desta forma, meu aplicativo Angular sabe para onde me enviar neste momento.
Então isso é para casa lá.
Agora, da mesma forma, deixe-me também adicionar um para o menu aqui.
Para o menu, quando eu clicar no link do menu lá,
que deve me levar para o componente do menu.
Então, a diretiva de atributo RouterLink me permite especificar, como você vê
aqui uma string onde eu posso especificar o caminho que precisa ser adicionado.
Vamos salvar essas alterações também, e então agora dar uma olhada final em nosso aplicativo.
Indo para a nossa aplicação, agora vemos que um componente Home é exibido aqui.
Quando clicamos no componente Menu, estamos no menu.
Então observe como meu aplicativo navegou automaticamente para
o componente de menu para mostrar a exibição com o menu aqui.
E também dando uma olhada na barra de endereço,
observe como a barra de endereço agora mostra localhost:4200/menu.
Novamente, podemos navegar de volta para o componente inicial e para o componente de menu,
para frente e para trás.
Então, isso mostra como, adicionando esse roteamento ao nosso aplicativo,
nós somos capazes de navegar e mostrar diferentes visualizações dentro de nosso aplicativo.
Agora, o sobre e contato, vamos fazer isso como parte de
outro exercício e a atribuição que se segue mais tarde.
Isso conclui este exercício onde usamos módulo de roteador angular e
, em seguida, configurou nossa aplicação angular para usar várias rotas
para mostrar as diferentes visualizações.
Este é um bom momento para
você fazer um commit Git com a mensagem Noções básicas do roteador Angular.
[MÚSICA]