Rotas Dinâmicas - Endpoints com o ID específico

Oi, pessoal! Estava estudando sobre Rotas e os Endpoints que utilizamos na API e descobri um pouco melhor como que nós podemos utilizar ROTAS DINÂMICAS durante a consumação das nossas API's.

O que são ROTAS DINÂMICAS?
Elas permitem a criação de páginas de detalhes específicos mais individuais. Por exemplo, podemos ter uma página com muitos alunos e queremos visualizar uma rota para cada aluno, ou até mesmo, se temos uma página com vários produtos, clicamos em um produto e vai automaticamente para página apenas deste produto.

-> Nós usamos a identificação dos nossos recursos através de identificadores (id's) na URL.

Como utilizar as rotas dinâmicas com as nossas API's?

1. Em nossa API, vamos ter as rotas especificadas e o endpoint da rota. Nesse exemplo, há uma rota para buscar detalhes de um aluno com base em seu ID.

Exemplo do back-end pelo node.js:

app.get('/alunos', (req, res) => {
res.status(200).send(alunos)
})

app.get('/alunos/:id', (req, res) => {
const id = req.params.id;
const aluno = alunos.find( e => e.id === Number(id))

verifyIfIdIsValid(res, id)

if(!!aluno ){
    res.status(200).send(aluno)
} else {
    res.status(404).json({message: "O aluno não existe na base de dados"})
}

})

Podemos perceber que manipulamos parâmetros dinâmicos, buscamos na lista de alunos, verificamos a validade e fornecemos respostas.

2.Em nosso front-end, no Angular mais especificamente, iremos criar esses caminhos para fazer a rota dinâmica funcionar. Primeiramente, vamos direto ao app.routes:

const routes: Routes = [
{ path: 'alunos/:id', component: AlunosComponent },
];

Nesse caso, estamos criando a rota em nosso app.routes.

3.Em seguida, vamos ao nosso AlunosComponent e usamos o serviço ActivatedRoute para acessar e pegar o valor do parâmetro:

constructor(private route: ActivatedRoute) {
this.route.params.subscribe(params => {
const alunoId = params['id'];
});
}

Ao chamar o 'subscribe', o componente se 'inscreve' nos parâmetros da rota e executa o código sempre que os parâmetros mudarem.

4.Após essa configuração, podemos chamar os nossos serviços no Angular e transformá-los também em nossos Componentes, para que, nessa rota dinâmica, apareça apenas as informações daquele aluno com o ID especificado.

Na prática é: Quando vemos uma lista de alunos e clicamos em um aluno específico, ele irá ser direcionado para uma outra rota apenas com as informações dele, diretamente consumadas pela API. Essa minha explicação foi baseada no consumo das API's,

Qualquer coisa, podemos trocar ideia!
Espero que seja útil para nossos estudos.

=)