Configurando rotas no Angular

Esta lição apresenta o roteamento do Angular, uma forma de navegar entre visualizações e gerenciar endereços na sua aplicação.

O que é roteamento?

O roteamento ajuda você a navegar entre diferentes componentes ou páginas na sua aplicação Angular com base no endereço.

Configurando o módulo de roteamento

Crie um módulo de roteamento ao iniciar o seu projeto ou mais tarde usando o Angular CLI:

ng generate module app-routing --flat --module=app

Definindo rotas

As rotas são definidas como uma matriz de caminhos vinculados a componentes:

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

Saída do roteador

Use <router-outlet></router-outlet> para renderizar dinamicamente os componentes correspondentes com base na rota.

<router-outlet></router-outlet>

Navegando com routerLink

Navegue entre visualizações usando a diretiva routerLink:

<a routerLink="/home">Home</a>

Navegando de forma programática

Você também pode navegar de forma programática usando o serviço do roteador:

this.router.navigate(['/home']);

Rotas curinga

Lide com caminhos indefinidos usando rotas curinga para exibir uma página personalizada de erro 404:

{ path: '**', component: PageNotFoundComponent }

Resumo

Agora você entende os conceitos básicos de roteamento e pode configurar rotas em aplicações Angular com eficiência. Excelente trabalho!