Usando Services e HTTP em Angular 2

Olá, no último post sobre Angular 2 vimos como configurar rotas. Hoje veremos como usar services com requisições HTTP, fazendo um exemplo simples que consome uma API Node.js com banco de dados SQLite.

Downloads

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

Estrutura da aplicação

Nossa aplicação terá uma estrutura simples:

asd.fw

API

package.json

Como eu disse antes será uma API simples, que estará no arquivo server.js, mas antes disso vamos criar nosso arquivo package.json onde teremos as dependências.

Depois de ter criado esse arquivo na pasta raiz da sua aplicação, execute o seguinte comando:

$ npm install

Para instalar as dependências. Note que todos os pacotes instalados estão na versão mais recente (latest), você pode mudar para a versão que preferir de cada um.

server.js

Nesse arquivo estará a nossa API, que deve ter os métodos HTTP GET, POST, PUT e DELETE, para listar, cadastrar, editar e excluir pessoas.

Nele também estará nossa conexão com o banco de dados, na qual usamos o módulo sqlite-sync que funciona de forma síncrona ou assíncrona. Veja mais detalhes sobre ele aqui. O arquivo de banco de dados será criado automaticamente pelo módulo dentro da pasta model, caso não exista.

Vamos ao arquivo:

Note que na linha 10 criamos a tabela no banco de dados. Você pode fazer isso por meio de outro aplicativo SGBD se quiser, como SQLite Studio por exemplo.

Aplicação

Agora vamos à aplicação que vai consumir a API, conforme estrutura de pastas e arquivos mostrada mais acima. Nossa aplicação terá apenas uma única página e não precisa de rotas.

index.html

Vamos começar pelo 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.

Na linha 24 é importado o arquivo http.dev.js, que possibilita o uso das diretivas HTTP.

app/main.ts

Este arquivo inicia nossa aplicação Angular 2.

Na linha 3 importamos os HTTP_PROVIDERSo que nos possibilita o uso de requisições HTTP.

app/app.component.ts

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

Note que na linha 5 importamos o service do arquivo pessoa.service.ts que é onde teremos as requisições HTTP.

app/pessoa.service.ts

Nosso service, que usando da classe Http realiza GET, POST, PUT e DELETE.

 

app/view.html

Arquivo HTML que será controlado pelo nosso componente Angular2.

Executando

Para executar sua aplicação rode o seguinte comando no bash, prompt ou terminal:

$ npm test

Ou

$ node server

Concluindo

Este é o terceiro post da série sobre Angular2. Você pode ter acesso ao código fonte no Git Hub. Até a próxima.

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:

Deixe uma resposta

Seu e-mail não será publicado.