As rotas não ficaram claras para mim nas aulas | Angular: boas práticas em arquiteturas e formulários

Olá!

Após ver e rever a aula, não consegui concretizar o entendimento das rotas no Angular.

Primeiramente foi declarado dentro da constante routes no app-routing.module.ts dois objetos que irão "redirecionar" o usuário conforme o que ele digita na URL? E o que irá coordenar esse redirecionamento serão os atributos do objeto: path (não entendi o que é, talvez o que ficaria após a barra na url? exemplo: localhost:4200/.....) e redirectTo (aí ele irá encaixar na URL o valor desse atributo, no caso do mesmo exemplo: localhost:4200/home)? Ok, isso pro primeiro objeto declarado. O segundo será o responsável pelo carregamento assíncrono da página? Ou na verdade, o carregamento "sob demanda" mencionado pelo professor, que é apenas quando a rota é solicitada. Mas aí o atributo "loadChildren" já fica uma loucura. O valor do atributo será uma função anônima que irá executar o comando "import" passando como parâmetro o que ('./home/home.module', o módulo onde eu quero que carregue a página)? E o retorno será um módulo que irá fazer o que? Puts, ficou um pouco complexa e curta a explicação pra alguém que está começando em Angular.

Beleza, depois disso tudo, é preciso fazer novamente uma constante routes, agora dentro do meu componente. Aqui vou passa pros atributos o path vazio e o component HomeComponent (?)... Por quê? O que está acontecendo aqui?

Bom, criei um tópico recheado de dúvidas... Espero que alguém consiga me auxiliar em todas, daquela forma "explique-me como se eu tivesse 5 anos", porque me sinto um pouco perdido com algumas explicações rasas no curso.

Oi Giovani, tudo bem?

Desculpe a demora em retornar.

No Angular, as rotas são responsáveis por direcionar o usuário para diferentes componentes da sua aplicação com base na URL.

Na constante "routes" do arquivo "app-routing.module.ts", são declarados objetos que redirecionam o usuário de acordo com o que é digitado na URL. O atributo "path" representa a parte da URL que será utilizada para acessar determinado componente. Por exemplo, se definirmos path: 'home', o usuário poderá acessar esse componente através da URL "localhost:4200/home". Já o atributo "redirectTo" indica para onde o usuário será redirecionado quando acessar um determinado caminho. Por exemplo, se definirmos redirectTo: 'home', o usuário será redirecionado para a página "localhost:4200/home" quando acessar a raiz da aplicação.
O segundo objeto, que utiliza o atributo "loadChildren", é responsável pelo carregamento assíncrono ou "sob demanda" de um módulo. Esse recurso é útil quando você possui componentes que serão carregados apenas quando a rota correspondente for solicitada pelo usuário. O valor do atributo "loadChildren" é uma função anônima que importa o módulo desejado. Por exemplo:

{
  path: 'home',
  loadChildren: () => import('./home/home.module').then(m => m.HomeModule)
}

Nesse caso, quando o usuário acessar a rota "/home", o módulo "HomeModule" será carregado de forma assíncrona. O retorno dessa função é o módulo que será carregado e utilizado para renderizar os componentes da rota.

Agora, dentro do seu componente, você precisa definir novamente uma constante "routes". Aqui, você passará o caminho vazio (path: '') e o componente HomeComponent. Essa configuração é conhecida como rota padrão ou rota inicial, ou seja, quando o usuário acessar a raiz da aplicação, o componente HomeComponent será exibido. Por exemplo:

const routes: Routes = [
  {
    path: '',
    component: HomeComponent
  }
];

Isso significa que quando o usuário acessar "localhost:4200", o componente HomeComponent será renderizado.

Não esqueça que o atributo "path" define a parte da URL que corresponde a um determinado componente, o atributo "redirectTo" indica para onde o usuário será redirecionado e o atributo "loadChildren" permite carregar módulos de forma assíncrona ou sob demanda. A rota padrão, com caminho vazio, define o componente que será exibido quando o usuário acessar a raiz da aplicação.

Um abraço e bons estudos.

Mergulhe em programação