Cícero Ednilson

Blog sobre Desenvolvimento de Softwares

Home » Desenvolvendo uma aplicação Web com Angular 4 e Spring Boot – Parte 5: Criando os acessos ao Serviço REST.

Desenvolvendo uma aplicação Web com Angular 4 e Spring Boot – Parte 5: Criando os acessos ao Serviço REST.

0 Flares Twitter 0 Facebook 0 Filament.io 0 Flares ×

Nessa parte do nosso tutorial vamos deixar pronto a classe e as rotinas responsáveis por acessar o nosso serviço REST que criamos.

Páginas do tutorial.

Desenvolvendo uma aplicação Web com Angular 4 e Spring Boot – Parte 1: Introdução.

Desenvolvendo uma aplicação Web com Angular 4 e Spring Boot – Parte 2: Criando o Banco de Dados

Desenvolvendo uma aplicação Web com Angular 4 e Spring Boot – Parte 3: Criando o serviço Rest com Spring Boot.

Desenvolvendo uma aplicação Web com Angular 4 e Spring Boot – Parte 4: Criando a aplicação com Angular CLI.

Desenvolvendo uma aplicação Web com Angular 4 e Spring Boot – Parte 5: Criando os acessos ao Serviço REST.

Desenvolvendo uma aplicação Web com Angular 4 e Spring Boot – Parte 6: Criando o CRUD.

Desenvolvendo uma aplicação Web com Angular 4 e Spring Boot – Parte 7: Testando a aplicação.

Acessando serviço REST com Angular.

Nesse passo vamos deixar pronto os objetos necessários para acessarmos o nosso serviço REST que criamos em um passo anterior, então vamos lá, no diretório src -> app vamos criar um outro diretório com o nome de services como mostra a imagem abaixo.

Agora no nosso diretório services vamos criar uma classe com o nome de pessoa.ts, e depois vamos adicionar o código abaixo.

1
2
3
4
5
6
export class Pessoa {
 
    codigo:number;
    nome:string;				
    ativo:boolean;
}

Essa classe vai ser o espelho da classe usada no nosso serviço REST, vamos usar ela para Serializar e Deserializar os dados do nosso serviço, veja abaixo as duas classes.

Classe TypeScript x Classe Java

Ainda no mesmo diretório vamos criar um arquivo com o nome de response.ts, e vamos adicionar o código abaixo.

1
2
3
4
5
export class Response{
 
    codigo:number;
    mensagem:string;
}

A nossa classe Response, vai receber o resultado das operações de excluir, atualizar e deletar, nesse resultado vamos ter um código e uma mensagem.
Até o momento nosso projeto deve ter os objetos como mostra a imagem abaixo.

Ainda no diretório services vamos adicionar um arquivo com o nome de config.service.ts, e nesse arquivo vamos adicionar a classe abaixo, essa classe vai ter apenas a URL do nosso serviço.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
export class ConfigService {
 
    private urlService:string;
 
    constructor(){
 
        this.urlService = 'http://localhost:8090/service';
    }
 
    getUrlService(): string {
 
        return this.urlService;
    }
 
}

Agora vamos criar a classe responsável por realizar as requests no nosso serviço REST, para isso vamos adicionar um arquivo com o nome de pessoa.service.ts, e depois vamos deixar nosso arquivo com o código abaixo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Headers} from '@angular/http';
import { RequestOptions } from '@angular/http';
 
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';
import { Observable } from 'rxjs/Rx';
 
import {Pessoa} from '../services/pessoa';
import {ConfigService} from './config.service';
 
@Injectable()
export class PessoaService {
 
    private baseUrlService:string = '';
    private headers:Headers;
    private options:RequestOptions;
 
    constructor(private http: Http,
                private configService: ConfigService) { 
 
        /**SETANDO A URL DO SERVIÇO REST QUE VAI SER ACESSADO */
        this.baseUrlService = configService.getUrlService() + '/pessoa/';
 
        /*ADICIONANDO O JSON NO HEADER */
        this.headers = new Headers({ 'Content-Type': 'application/json;charset=UTF-8' });                
        this.options = new RequestOptions({ headers: this.headers });
    }
 
    /**CONSULTA TODAS AS PESSOAS CADASTRADAS */
    getPessoas(){        
        return this.http.get(this.baseUrlService).map(res => res.json());
    }
 
    /**ADICIONA UMA NOVA PESSOA */
    addPessoa(pessoa: Pessoa){
 
        return this.http.post(this.baseUrlService, JSON.stringify(pessoa),this.options)
        .map(res => res.json());
    }
    /**EXCLUI UMA PESSOA */
    excluirPessoa(codigo:number){
 
        return this.http.delete(this.baseUrlService + codigo).map(res => res.json());
    }
 
    /**CONSULTA UMA PESSOA PELO CÓDIGO */
    getPessoa(codigo:number){
 
        return this.http.get(this.baseUrlService + codigo).map(res => res.json());
    }
 
    /**ATUALIZA INFORMAÇÕES DA PESSOA */
    atualizarPessoa(pessoa:Pessoa){
 
        return this.http.put(this.baseUrlService, JSON.stringify(pessoa),this.options)
        .map(res => res.json());
    }
 
}

Veja que na classe acima temos um Decorator com o nome de @Injectable, quando usamos esse Decorator estamos injetando o nosso serviço na nossa aplicação, assim o TypeScript emiti metadados sobre o nosso serviço, pronto, agora já temos todos os itens necessários para acessar o nosso serviço. O diretório de serviços da nossa aplicação deve ficar como mostra a imagem abaixo.

Arquivos necessários para acessar o serviço REST

Agora vamos adicionar o nosso serviço a propriedade providers do NgModule que fica em app.module.ts, assim estamos informando quem são os nosso provedores de serviços, também precisamos adicionar as dependêcias que estamos usando nas nossas classes provedoras, veja como fazer tudo isso na imagem abaixo.

Pronto, já temos a nossa classe de acesso ao serviço pronta, na próxima parte vamos criar os nossos componentes com as views para a realização do CRUD, então até a próxima.

Comentários

Name of author

Name: ciceroednilson@gmail.com

2 thoughts on “Desenvolvendo uma aplicação Web com Angular 4 e Spring Boot – Parte 5: Criando os acessos ao Serviço REST.

  • Fala Cicero,

    Mais uma vez, neste momento tive um probleminha. Fiquei algumas noites tentando achar uma solução e, finalmente, baixei o seu projeto Angular pra ver o que eu estava fazendo de errado.

    O app.module que você postou, ainda faltam alguns imports. Por isso estava dando erro de:

    ‘angular app-blog is not a known element’

    O app.module do projeto que você disponibilizou está mais completo.

    Quem tiver dificuldades vai lá.

    Muito bom seu blog. Estou aprendendo muitas coisas aqui. Está ajudando a dar um start no que eu planejo fazer.

    Obrigado.

    Reply

Deixe uma resposta

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

0 Flares Twitter 0 Facebook 0 Filament.io 0 Flares ×