Definindo rotas na aplicação Angular | Aula 10

nessa aula vamos começar a ver sobre rotas até o momento a gente não consegue navegar entre as páginas que a gente criou Se eu vir aqui no meu projeto aqui em app eu tenho aqui a página users se eu quiser ver a outra página users eu tenho essa lista que eu demonstrei no vídeo anterior se eu quiser ver o outro componente que é uma página por exemplo meu home meu App home eu salvo e ele é exibido aqui em tela O componente home só que agora Como que eu faço para navegar entre essas páginas eu

utilizo as rotas então para isso ao invés de eu colocar diretamente a página eu posso utilizar o router outlet se eu salvar e vir aqui ele não vai exibir nenhum componente aqui para mim isso porque eu tenho que configurar as minhas rotas por padrão o ângul ele vai carregar a rota raiz porque eu não tenho nada depois aqui da minha barra ou é somente o link diretamente do local host 4200 então para eu definir uma página inicial eu tenho que definir qual que vai ser a página que vai aparecer na minha rota raiz quando eu

digito diretamente o domínio do meu site sem nenhuma barra com alguma outra palavra né ou ou rota então voltar aqui Vamos acessar aqui o arquivo de rotas que é o app routing modules TS e é aqui que eu defino as minhas rotas eu tenho aqui uma lista de rotas e aqui que eu vou configurar cada uma delas B para adicionar aqui uma rota eu vou abrir e fechar Chaves que vai ser um objeto e aqui eu passo o caminho que é o meu pef eu vou colocar aqui por exemplo home que vai ser a minha

rota home e agora tenho que associar um componente que é uma página pra minha rota home então assim que eu acessar a minha rota home Eu vou acessar esse componente que no meu caso o componente eu vou passar aqui home component salvando eu vou voltar aqui por enquanto ele não tá exibindo nenhuma página só que se eu digitar aqui barra home e pressionar o enter ele vai redirecionar pra página home olha só só que a página home geralmente ele fica na rota raiz então eu quero que ao acessar o localhost 4200 eu quero que ele

já carregue para mim a página home para isso bastante simples basta eu deixar em branco o meu pef e salvando ele já carrega minha página home tô interrompendo a sua aula rapidamente para dar um recado Se você quer ter acesso a conteúdo exclusivo desse curso como por exemplo projeto prático empréstimo de livros onde eu disponibilizo uma API para você desenvolver frontend em angula publicação do projeto prático usando o serviço da aws E além disso acesso antecipada a todos os vídeos que eu vou publicar aqui no canal então aqui você já tem todos os vídeos disponíveis

para você assistir e eu vou entrar aqui no projeto prático só para vocês verem como que é eu tenho aqui mais de 60 aulas para você colocar em prática esse projeto prático de empréstimo de livros vou deixar o link aqui na descrição então dá uma olhada se você quer ter acesso ao conteúdo exclusivo e também não quer ficar aguardando novos vídeos sobre angular aqui do canal e já quer ter acesso a tudo de uma vez link aqui na descrição então aqui eu vou criar outras rotas né então eu vou copiar esse daqui que eu já

fiz e a outra rota que eu vou fazer aqui é de usuários que tem ali a minha lista de nomes de usuários e aqui no meu componente vai ser o users component eu vou salvar então agora eu tô aqui aqui na minha rota raiz que é a minha home Vou acessar aqui barra users e eu acesso a minha página de usuários agora Como que eu faço para navegar entre essas páginas clicando em botões ou links eu vou utilizar aqui a minha Nav bar para mostrar para vocês então eu já posso fechar aqui o app rout

que eu já configurei as duas páginas posso fechar aqui também e agora eu vou entrar no meu componente de navbar Vou acessar aqui o HTML e aqui eu vou fazer algumas alterações eu vou tirar esse drop Down esse disable eu vou deixar somente o link paraas duas páginas bom então esse le aqui do disable Vou tirar vou tirar também esses três liis daqui ou melhor vou tirar esse o lli porque esse daqui é um drop Down vou tirar esse li todo daqui daqui também vai e eu vou tirar esse daqui também então ele ficou somente

com o linkou somente com o link aqui eu vou colocar esse daqui como home eu vou criar um outro li vou duplicar esse li eu vou chamar de users ou melhor vou deixar aqui em português usuários então eu tenho dois links aqui Na Minha Nave bar home e usuários agora eu vou configurar o redirecionamento para as minhas rotas quando eu clicar em home ele vai na rota raiz quando eu clicar em usuários ele vai na rota users para isso eu posso fazer da seguinte forma aqui no ângulo ao invés de utilizar o href eu vou

utilizar o router link então router link e aqui eu passo o caminho da minha rota quando eu estou navegando entre páginas da minha aplicação eu utilizo o router link para que assim a minha página não precise recarregar agora se eu quero acessar uma página externa eu utilizo o href no meu caso vou utilizar o hter link Então vou em usuários aqui é o Barra users que eu vou acessar já aqui no meu home eu vou utilizar aqui o hter link barra somente barra que é a minha rota raiz vamos voltar aqui eu tô aqui em

users vou clicar aqui em home e olha só já sou redirecionado pra minha página home perceba aqui que no meu no ícone aqui da minha página ele não vai recarregar eu vou clicar aqui em usuários ele automaticamente foi PR minha rota users e o meu navegador não carregou essa minha página agora se eu utilizo o href olha só o que vai acontecer vou clicar aqui em home ele redirecionou aqui PR minha home vou clicar em usuários que alterei PR HF perceba que foi bem rápido navegador Ele carrega a minha página vou clicar aqui novamente olha

só ele carregou a minha página Então você utiliza hter link para que o navegador não precise carregar a página porque ele já carrega dentro aqui do ângul ele já traz o componente em tela né no caso é minha página sem recarregar no meu navegador agora caso eu tenha mais de uma página relacionada a usuários eu posso fazer o seguinte Barra users barra list para listar os usuários barra users barra Create que é uma página para cadastrar usuários e assim você pode criar várias páginas relacionadas ao usuário e você cria um caminho mais organizado você sempre

parte de users barra e a página relacionada ao usuário de acordo com a ação que você quer fazer então Eu por exemplo no no caso aqui eu estou listando usuários Então vou digitar barra users bar list E é claro eu tenho que alterar essa minha rota lá no meu routing modules então vou acessar aqui diretamente app routing modules e aqui vai ser users bar list Vou salvar vamos voltar aqui vamos clicar aqui em usuários e pronto olha só eu acessei users barist então ele eu consigo acessar a minha página cliquei na home ele já redireciona

pra minha página home Então é assim que utiliza as rotas para você navegar entre elas então vamos recapitular aqui no App routing mod.ts é o arquivo onde você configura suas rotas você relaciona as suas rotas o nome das suas rotas com o componente que será exibido lá na sua página e esses componentes serão exibidos aqui no router L que você configura aqui no seu app Então vou acessar aqui em app eu tenho aqui o router outlet é aqui onde as minhas páginas serão carregadas de acordo com a Rota que eu for acessar e para fazer

as navegações entre as páginas eu utilizo o router link dessa forma aqui