Configurando o roteamento básico no Angular

Vamos agora configurar o roteamento. Faremos com que se a URL /aaaa/ for digitada na barra de endereços do navegador, o primeiro componente seja exibido, e se /bbbb/ for digitada, o segundo seja exibido.

Essa configuração é feita no arquivo app.routes.ts. Primeiro, é necessário importar nossos componentes:

app/app.routes.tsimport { AaaaComponent } from './aaaa/aaaa.component';
import { BbbbComponent } from './bbbb/bbbb.component';

E agora precisamos definir qual URL corresponde a qual componente. Para isso, precisamos criar um array especial de objetos de rotas (routes). Em cada objeto, haverá uma chave path, onde a URL é definida (sem barras no final), e uma chave component, onde o componente a ser exibido nessa URL é definido:

app/app.routes.tsexport const routes: Routes = [
  { path: 'aaaa', component: AaaaComponent },
  { path: 'bbbb', component: BbbbComponent },
];

No entanto, a configuração do roteamento não é suficiente. É necessário indicar no componente pai o local onde nossos componentes serão renderizados. Isto será abordado na próxima lição.