Curso Angular 2 – Aula 9: Rotas e navegação

Rotas e navegação | Curso básico gratuito de Angular 2 | kazale.comO objetivo da aula 9 é ensinar como configurar e utilizar rotas e navegação no Angular 2

 

Digite seu email para se inscrever em nossa newsletter e receber atualizações sobre novos conteúdos.

Ao término dessa aula você entenderá o que são, como configurar e utilizar rotas e navegação no Angular 2 para criar uma aplicação dinâmica.

1. Definição

Rotas de navegação são fundamentais para qualquer aplicação, tornando-a dinâmica e interativa para o usuário final.
As rotas e navegação proporcionam a interação entre componentes no Angular 2, de modo a permitir a criação de componentes específicos, onde cada um deles representará uma única função no sistema.

O Angular 2 possui uma implementação bastante simples e de fácil utilização de rotas e navegação, o que permite um fácil entendimento e manutenção do código fonte, conforme veremos nos próximos tópicos.

2. Atualização do projeto para a versão RC 3 do Angular 2

O Angular 2 recentemente passou a utilizar a versão 3 do módulo de rotas e navegação, tornando a versão 2  depreciada.

A versão 3 do módulo de rotas e navegação, possui como dependência a versão RC 3 (Release Candidate) do Angular 2, por isso nosso template base terá uma estrutura levemente diferente das utilizadas nas aulas anteriores.

A grande vantagem da versão RC 3 do Angular 2 é que por ser uma versão Release Candidate, não devemos ter maiores alterações no módulo core, visto que essa versão deverá se tornar a primeira versão oficial de produção do Angular 2.

É importante ressaltar que não terá impacto nos tópicos estudados anteriormente no curso, e que as pequenas diferenças na estrutura do projeto serão explicadas na vídeo aula.

3. Definindo a url base

O módulo de rotas e navegação do Angular 2 tem como dependência a configuração da tag HTML ‘base’.

Essa tag servirá como base para o Angular 2 identificar qual a url base para carregar os recursos utilizados na página.

A configuração da url base é bastante simples, e ela deverá ser inserida logo após a abertura da tag HTML ‘head’, conforme código a seguir:

Para nossa aplicação basta utilizarmos o ‘.’ como url base, mas dependendo da configuração de seu servidor ela poderá variar.

4. Mapeando as rotas de navegação

O módulo de rotas e navegação depende de um elemento do tipo ‘RouterConfig’ para o mapeamento das rotas, e para manter a organização dos arquivos de rotas em nossa aplicação, criaremos um arquivo de rota para cada módulo (entenda aluno como um módulo), e um arquivo global que gerenciará todos os arquivos de rotas da aplicação.

Primeiramente criaremos o arquivo de rotas para nosso módulo de alunos, conforme código a seguir:

A configuração das rotas depende de dois atributos básicos, ‘path’ e ‘component’, sendo a url e o nome do componente a serem exibidos, respectivamente.

Repare que nos paths de edição e visualização adicionamos uma instrução (‘:id’) no final do path, que representará o id do aluno dinamicamente, por exemplo ‘aluno-editar/1’.

O último mapeamento é um mapeamento especial que cria uma rota padrão para a listagem de alunos quando nenhum path for especificado.

Em seguida devemos criar o arquivo de rotas global da aplicação, que será o responsável por agregar todas as rotas do sistema, conforme o código abaixo:

O arquivo criado acima utiliza o provider ‘providerRouter’ para gerar toda a configuração necessária de navegação com base nas rotas definidas no arquivo anterior.

O operador ‘…’ utilizado no código acima serve para indicar uma agregação de arrays.

Uma vez que temos nosso provider devidamente configurado, basta uma última configuração, que é prover esses dados na inicialização da aplicação, conforme código a seguir:

Com isso, assim que a aplicação for inicializada, as informações de rotas e navegação estarão disponíveis para o Angular 2 para utilização.

5. Configurando as rotas de navegação no componente principal

O módulo de rotas e navegação depende de uma diretiva específica, onde o HTML gerado pelo processamento da rota deverá ser exibido.

A diretiva utilizada para a exibição dos dados de uma rota é a diretiva ‘router-outlet’, encontrada no módulo de rotas e navegação, e que será utilizada em nosso componente padrão, conforme exibido abaixo:

Para a utilização da diretiva ‘router-outlet’, devemos primeiro importar a definição ‘ROUTER_DIRECTIVES’, e registrá-la na metadata ‘directives’ da anotação ‘Component’.

Nesse mesmo código, repare que adicionamos dois links no menu principal para as páginas de cadastro e listagem de alunos, através da utilização do atributo ‘routerLink’ seguido do nome do mapeamento (path) encontrado no arquivo de rotas ‘app/components/alunos/alunos-routes.ts’.

Agora que nossas rotas estão devidamente configuradas, basta apenas criar os componentes e views da aplicação, conforme os tópicos a seguir.

6. Criando a tela de listagem de alunos

A seguir temos o código do componente de listagem de alunos, seguido do código HTML da view:

7. Criando a tela de visualização de um aluno

Para a visualização de um aluno, temos o seguinte código no componente:

Aqui utilizaremos o ‘ActivatedRoute’ para obtermos o parâmetro ‘id’ definido na url da visualização de um aluno.

Repare que devemos adicioná-lo no construtor do componente para permitir que o Angular 2 nos forneça uma instância dele.

Tambem utilizamos o operador ‘+’ ao obter o parâmetro para converter o valor do ‘id’ para numero.

Abaixo segue o código da view:

8. Criando a tela de cadastro de alunos

A tela de cadastro de alunos não possui nenhuma implementacao diferente da que utilizamos agora. Segue código do componente abaixo, seguido da view:

9. Criando a tela de edição de alunos

Por fim nos resta implementar a edição de alunos, que também não contém nada de diferente do que vimos até agora.

Segue abaixo código do componente seguido da view:

10. Controlando o acesso as rotas

As rotas estão todas configuras e funcionando, porém precisamos controlar o acesso a mesmas uma vez que normalmente a aplicação terá um controle de acesso para restringir o acesso dos usuários.

O Angular 2 utiliza um padrão chamado ‘Guard’ para isso, onde criamos uma classe que implementará a interface ‘CanActivate’, e que será configurada em nossa rota para permitir ou não o acesso a mesma.

Seu funcionamento é simples, implementamos um método que deverá retornar um valor booleano ‘true’, caso o acesso seja permitido, ou ‘false’ em caso negativo.

A implementação em si de como retornaremos esse valor é variável, e dependerá do modelo de autenticação utilizado.

Para nosso exemplo iremos simular uma autenticação que gravará um token qualquer no objeto sessionStorage do navegador, e esse token será responsável por permitir ou não o acesso a página.

Confira a seguir o código da implementação:

Repare que o arquivo acima utiliza o serviço LoginService que simulará a autenticação da aplicação.

Com o arquivo de controle de acesso criado, devemos atualizar nosso arquivo de rotas de alunos para utilizá-lo, conforme código a seguir:

Por fim devemos carregar nosso provider de autenticação no arquivo de rotas principal, conforme código a seguir:

11. Extra – Criando uma modal de confirmação

Nessa aula incluiremos um código extra, que será responsável por exibir uma modal de confirmação ao clicarmos no botão excluir aluno.

Tal código incluirá um recurso muito interessante que é a comunicação entre componentes através da anotação ‘Input’, ‘Output’, e a classe ‘EventEmitter’.

Confira a implementação a seguir:

Nos códigos acima vimos o uso da anotação ‘Input’, que servirá basicamente para obtermos valores vindos de atributos contidos na marcação HTML do componente.

Também vimos o uso da anotação ‘Output’, que em nosso caso conterá um atributo do tipo ‘EventEmitter’, e que estará associado a um método do componente pai, e que será responsável por chamar o método pai ao invocarmos o método local ‘emit’.

Por fim basta executar o código abaixo para visualizar a interface de gerenciamento de alunos:

Clique para fazer o download dos arquivos do template base da aula 9.

Clique para fazer o download dos arquivos do projeto completo desenvolvido na aula 9.

24 comentários em “Curso Angular 2 – Aula 9: Rotas e navegação

  1. Bom dia.

    Bastante coisa pra estudar! Mais uma vez parabéns! A implementação do modal ficou bem legal e, como vantagem em relação a que foi implementada naquele link que passei, posso ter mais de um modal na mesma view. No outro os serviços eram interceptados e somente o último funcionava.

    Obrigado!

  2. Boa noite,

    Perguntas de iniciante meio perdido: 1 – No modal-util-component, como faço para que a mensagem de alerta seja definida em tempo de execução? Explico: ao excluir uma situação devo alertar que um determinado documento também será excluído.
    2 – Como posso ter dois “modais” no mesmo component?

    Novamente agradeço a sua disposição em ensinar, tenho aprendido muito aqui!

    1. Olá Osmar,

      para ter a mensagem dinâmica você deverá criar um atributo no seu componente que conterá a mensagem a ser exibida, e esse atributo deverá ser passado para a modal em seu atributo de tag titulo/descricao.

      Para ter mais de uma modal na mesma página você deverá utilizar o mesmo código porém passando ids diferentes para cada uma das modais.

  3. Está de parabéns. É um excelente curso. Mostra conceitos simples e outros um pouco mais complexos com muita didática.

    Vou dá algumas sugestões para as próximas aulas, para enriquecer ainda mais o curso, caso venham a ser abordados. Mas, mesmo que não venham a ser contemplados, o curso já é TOP, na minha opinião.

    1. Integração do projeto com alguma ferramenta de automatização de tarefas. Acho que a que o pessoal vem mais usando é o gulp.
    2.Seria interessante ter uma aula de testes unitários/ testes de integração.
    3.Não sei o projeto final já aborda, mas seria interessante ver a aplicação angular 2 “conversando” com os serviços em node.js, inclusive com dados sendo gravados no banco de dados.
    4. Mostrar para o pessoal como publicar a aplicação em um servidor gratuito, como o heroku, que é bem legal.

    Novamente, são só sugestões, que você já estava até pensando em abordar nas demais aulas!

    Para quem quiser, ver um projeto rodando com angular 2, eu evoluí um código de um jogo da memória em angular 2. Apesar de faltar alguns ajustes, já está apresentável, pode ser acessado em:
    http://emersondiego.herokuapp.com/

    1. Obrigado Emerson!

      Obrigado também pelas sugestões, algumas delas ainda abordarei no curso, porém não todas, como será o caso de testes que é um assunto longo, porém planejo na sequencia do curso já abordar em artigos a partes todos os itens que sugeriu e que não serão abordados no curso.

      Ficou muito bom seu aplicativo, e é muito gratificante ver que o curso está ajudando bastante a comunidade de desenvolvedores Angular 2!

  4. Mais uma vez obrigado.
    Concordo com o Emerson quanto a didática, aprendi bastante aqui e já estou bem adiantando em meu sistema de aprendizagem, meu primeiro programa feito em Clipper, que já migrei para Delphi, Laravel e agora para angular, sempre com o intuito de aprender já em algo útil e, principalmente, que tenho algum conhecimento.
    Para embasar os mais apressados, deixo o link abaixo que me ajudou a colocar o sistema funcionando em meu VPS:
    http://blog.mgechev.com/2016/06/26/tree-shaking-angular2-production-build-rollup-javascript/

    1. Obrigado Osmar por compartilhar a url!
      Laravel se integra muito bem com o Angular 2, sendo uma poderosa combinação para quem deseja trabalhar com PHP.

      1. Por enquanto estou achando o Laravel mais rápido que o Angular2, mesmo renderizando no lado server entregando a página pronta. Devo tá fazendo algo errado. Vou fazer alguns ajustes e depois liberar para o professor e o pessoal que acompanha o curso opinarem, quem sabe apontem onde estou errando!

  5. Bom dia,
    Achei, penso eu, onde está um dos gargalos que deixa a aplicação em angular lenta, em relação ao laravel, a culpa não é dele!!!, claro: Tenho duas tabelas, aparelhos e marcas, com 121 e 576 registros respectivamente, elas são fontes para dois controles na view do tipo select. Do jeito que está, a cada request essas tabelas são carregadas. Pelo que observei, os services funcionam com um singleton então estou penando em criar dois arrays no service assim os dados serão carregados apenas no primeiro acesso. Talvez fazer uma rotina apenas para buscar o total, se ele mudou, recarrego os arrays. Seria essa a melhor abordagem?

    1. Olá Osmar,

      o que você está pensando em fazer seria um cache local do dados, que pode ser um pouco trabalhoso para manter no lado do cliente.

      Não entendi porque você precisa carregar esses dados sempre que uma requisição é efetuada, talvez esses dados possam ser carregados somente nas telas que realmente usam eles, e com o uso de Promises ou Observers esse carregamento deverá ser assíncrono e não deveria causar lentidão no carregamento da aplicação.

  6. Olá Márcio,
    A ideia era mesmo criar um cache local. As duas tabelas são dados de domínio, tipo de aparelhos e marcas, São chamadas na tela de edição e inclusão de Ordem de Serviço. Talvez a minha sessação de lentidão seja piorada pela latência do VPS.
    Dê uma olhada no que você ajudou a criar! Sistema pequeno mas muito bom para fixar o aprendizado. Não está finalizado pois no RC4 do angular tive problemas com as rotas, chamar /pessoa/0?telefone=33333333 parou de funcionar. A ideia quando passo zero=nova pessoa é a de aproveitar o telefone informado na tela de inclusão de OS. Obrigado

    1. Olá Osmar,

      está ficando boa a aplicação, é muito bom ver vocês utilizando o conteúdo aprendido aqui na prática em projetos pessoais ou nas empresas!

  7. Márcio,
    só pra avisar, risos. Programo em Delphi já faz um tempo, judiciário, e só agora estou indo pro lado web, com um pouco de laravel e agora com angular, então há muito com que aprender ainda!!!

  8. Boa tarde Márcio,
    tenho aprendido muito em seu curso; venho de outras tecnologias e estava precisando me atualizar.
    Realmente agradecido por compartilhar seu conhecimento.
    Ansioso para ver as próximas aulas.

  9. Ola boa tarde!
    Curso Show de bolaaaaa!!
    Umas coisa que senti falta nos seus cursos são os eventos e como funciona a comunicação entre components
    Att.

    1. Olá John,

      você poderia detalhar mais a sua necessidade, talvez com exemplos para que eu inclua esses tópicos no curso ou em artigos futuros?

    1. Olá Ronaldo,

      a api de rotas ainda continua a ganhar novos recursos, para que os dados não aparecam na URL deveríamos ter um redirect de página, coisa que o router.navigate não faz. Nesse caso poderíamos usar diretamente o window.location.href para forçar o redirecionamento.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

onze − 3 =