Roteador Bootstrap O pacote `bootstrap` em Angular implementa os recursos do roteador que permitem a navegação entre visualizações do aplicativo quando a URL muda. Os usuários do AngularJS acharão o roteamento no Angular muito semelhante ao roteador AngularJS.
No entanto, uma grande diferença é que o Angular usa rotas de URL nomeadas em vez de rotas de hash. Isso significa que, em vez de usar um '#' em uma URL, o Angular usa um '/' para designar o início de uma rota. Por exemplo, a seguir está um exemplo de URL para o roteador Angular usando rotas nomeadas:
`https://www.example.com/home`
Essa URL navegaria para um componente chamado ‘home’ que existe no aplicativo angular.
Introdução ao roteador Angular
Para começar a usar o roteador Angular, você precisará importar o `RouterModule` do módulo `@angular/router`. Você precisará então usar o método `RouterModule.forRoot()` para configurar as rotas para sua aplicação. O método `RouterModule.forRoot()` usa um array de objetos `Route`. Um objeto `Route` possui as seguintes propriedades:
-
caminho :o padrão de URL com o qual esta rota corresponde.
-
componente :o componente que esta rota deve carregar quando o URL corresponder ao caminho.
-
crianças :uma matriz de rotas filhas que esta rota pode ter.
-
canActivate :uma matriz de guardas que devem ser passadas antes que a rota possa ser carregada.
A seguir está um exemplo de configuração simples de roteador Angular:
```datilografado
importar { RouterModule, Rotas } de '@angular/router';
rotas const:Rotas =[
{ caminho:'home', componente:HomeComponent },
{ caminho:'sobre', componente:AboutComponent },
];
@NgModule({
importações:[RouterModule.forRoot(rotas)],
exportações:[RouterModule]
})
classe de exportação AppRoutingModule { }
```
Esta configuração define duas rotas, uma para o componente home e outra para o componente about. Quando a URL corresponder ao caminho de uma rota, o roteador carregará o componente associado.
Recursos adicionais do roteador angular
O roteador Angular oferece vários recursos adicionais, incluindo:
-
Carregamento lento :O roteador Angular pode ser usado para carregar componentes lentamente, o que significa que eles só são carregados quando são necessários. Isso pode melhorar o desempenho do seu aplicativo, reduzindo o tempo de carregamento inicial.
-
Guardas :Guards são funções que podem ser usadas para evitar que uma rota seja carregada. Isto pode ser útil para fins de autenticação, por exemplo.
-
Resolvedores :Resolvedores são funções que podem ser usadas para recuperar dados antes que uma rota seja carregada. Isso pode ser útil para pré-buscar dados necessários ao componente.
-
Rotas secundárias :rotas secundárias são rotas que podem ser aninhadas em outras rotas. Isso pode ser útil para organizar seu aplicativo em seções diferentes.
-
Parâmetros de rota :parâmetros de rota podem ser usados para passar dados entre componentes. Isso pode ser útil para passar dados para um componente carregado por uma rota.
-
Parâmetros de consulta :parâmetros de consulta podem ser usados para passar dados para uma rota. Isto pode ser útil para filtrar dados ou para passar dados para um componente carregado por uma rota.
Para obter mais informações sobre o roteador Angular, consulte a documentação oficial.
