Usando rotas em Angular 2

Há alguns dias vimos aqui no Clube dos Geeks uma postagem introdutória sobre Angular 2: Iniciando com Angular 2, e fizemos um pequeno exemplo.

Hoje faremos um exemplo de como usar rotas em Angular 2. Veja:

Downloads

A única coisa que vamos precisar baixar é o bootstrap.

Estrutura da aplicação

Nossa aplicação terá uma estrutura simples, contanto com components e views.

estrutura.fw

index.html

O arquivo principal da aplicação, que deve conter as configurações para uso do TypeScript com SystemJS, como visto no post TypeScript – executando no browser com SystemJS.

Este arquivo deve ficar da seguinte forma:

Preste atenção que na linha 24 desse arquivo é importado um arquivo JavaScript, o router.dev.js que é o que nos permite usar as rotas.

app/main.ts

Este arquivo inicia nossa aplicação Angular 2, usando o componente importado para isso. E usando aquilo que é chamado de bootstrapper que importado do angular.

Note que na linha 2 importamos o arquivo app.component que é o componente principal da nossa aplicação, onde faremos as rotas.

app/app.component.ts

Nosso componente principal, tem a função de controlar o html, criando nossa aplicação na tag informada como seletor.

Na linha 2 importamos os elementos necessários para configurar as rotas, isso é possível graças ao arquivo router.dev.js.

Usando @RouteConfig podemos configurar as rotas, veja que são configuradas duas, com os seguintes campos:

  • path: É o caminho da rota estará na barra de endereço do navegador (/pessoas).
  • name: O nome oficial da rota; deve começar com uma letra maiúscula, para evitar confusão com o path (Pessoas).
  • component: o componente que deve ser criado ao navegar para essa rota (PessoasComponent).

Note que os componentes são importados de outros arquivos. São dois: um para Pessoas e outro para Produtos.

app/pessoa.component.ts

Um componente simples que controla uma view.

Note que o componente tem apenas uma classe com um atributo que é o array de pessoas sendo preenchido pelo construtor.

app/produto.component.ts

Da mesma forma está o componente para produtos.

view/index.html

Essa view será a principal da aplicação, mostrada pelo AppComponent contendo as referências às rotas e o campo de trabalho delas, ou seja onde as views das rotas serão mostradas. Veja:

Note as referências às rotas usando a diretiva [routerLink] e tendo como referência os nomes  das rotas definidos no AppComponent.

Note também a tag <router-outlet></router-outlet> , que é a saída da rota, exatamente onde serão mostradas as views das rotas.

views/pessoa.html

Temos uma view simples, apenas com o título e uma tabela com repetidor:

views/produto.html

Da mesma forma na view de produtos.

Mais

Preview e GitHub

Concluindo

Este é o segundo post da série sobre Angular2.

Fique ligado, no próximo veremos como usar um service com comunicação Http.

Sobre o autor:

Graduado em Análise e Desenvolvimento de Sistemas - FLS; Desenvolvedor Full-stack na UniLeão; Revisor de conteúdo do site Clube dos Geeks, católico, gosto de ler e escrever.

Postagens relacionadas:

Uma resposta

Deixe uma resposta

Seu e-mail não será publicado.