Roteamento e páginas
Rotas são a ligação entre uma URL e um componente. O FlickPicks usa três padrões que cobrem praticamente qualquer site: rota simples, rota com parâmetro e rotas filhas (uma "casca" compartilhada com várias sub-telas dentro).
movie/:id é uma rota com parâmetro — o :id vira qualquer número (o ID do filme na TMDB), e o mesmo componente TitleDetail é reaproveitado pra qualquer filme ou série — só muda o dado carregado.
Já account é uma rota "casca": o AccountShell monta o layout comum (menu lateral da conta, por exemplo), e as rotas filhas (watchlist, favorites) só trocam o conteúdo de dentro — o mesmo padrão que usamos na AulaLayout deste template, com a barra lateral fixa e as aulas trocando por dentro.
TS
export const routes: Routes = [
{ path: '', component: Home },
{ path: 'movie/:id', component: TitleDetail, data: { mediaType: 'movie' } },
{ path: 'tv/:id', component: TitleDetail, data: { mediaType: 'tv' } },
{
path: 'account',
component: AccountShell,
children: [
{ path: '', redirectTo: 'watchlist', pathMatch: 'full' },
{ path: 'watchlist', component: AccountMedia, data: { kind: 'watchlist' } },
{ path: 'favorites', component: AccountMedia, data: { kind: 'favorite' } },
],
},
{ path: '**', redirectTo: '' },
];| Rota | O que mostra |
|---|---|
/movie/:id | Detalhes de um filme — :id é um parâmetro |
/account | Rota "casca", só redireciona pro filho padrão |
/account/watchlist | Rota filha, reaproveita o mesmo componente com dado diferente |
** | Qualquer caminho que não bateu com nenhuma regra acima |
Eager vs. lazy
O FlickPicks carrega os componentes de rota direto (
component: Home). Este template usa loadComponent em vez disso, que só baixa o código de cada aula quando o aluno navega até ela — melhor pra um curso com muitas aulas, onde ninguém precisa carregar o módulo 3 inteiro pra ver o módulo 1.