0

Requisição post() no Angular 8 (Básico)

#Angular
Aluizio Junior
Aluizio Junior

O objetivo desse artigo é realizar um cadastro de uma maneira simples e de fácil visualização para fins didáticos.


Pré-requisitos:

Ambiente de desenvolvimento Angular 8


1 – Vai ser preciso criar um “projeto”, um “componente”, uma “interface” e uma classe de “serviço”. Execute os seguintes comandos:


ng new angular-teste


ng generate component usuario


ng generate interface shared/models/usuario


ng generate service core/usuario


3 – Crie o fonte do “template”, o da “interface” e o do “db.json”:


template:

Nome: <input type="text" [(ngModel)]="usuario.nome">
Fone: <input type="text" [(ngModel)]="usuario.fone" >
UF: <input type="text" [(ngModel)]="usuario.uf" >
<button (click)="gravar(usuario)">Gravar</button>


interface:

export interface Usuario {
"nome": string;
"fone": string;
"uf": string;
}


db.json:

{
}


4 – Importe o “HttpClientModule” e “FormsModule” em “app.module.ts”


imports: [
  BrowserModule,
  FormsModule,
  HttpClientModule
],


5 – Coloque o seletor do componente em “app.component.ts”


6 – Em “home.component.ts”, declare o service no construtor, crie um objeto usuário e um método para gravar.


import { Component } from '@angular/core';
import { UsuarioService } from '../core/usuario.service';
import { Usuario } from '../shared/models/usuario';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent{
  
  constructor(private service: UsuarioService) { }
  usuario: Usuario = {
    nome:'',
    fone:'',
    uf:''
  };
  gravar(usuario: Usuario){
    alert(JSON.stringify(usuario, null, 4));
  }
}


Neste ponto o componente já está recebendo o usuário e o button já responde ao clique.


7 – Vamos ao service para declarar o url da API. o “HttpClient” no construtor e, em seguida, criar o método que fará a requisição:


const url = 'http://localhost:3000/usuario/';
@Injectable({
providedIn: 'root'
})
export class UsuarioService {

constructor(private http: HttpClient) { }

gravar(usuario: Usuario): Observable<Usuario>{
  return this.http.post<Usuario>(url, usuario);
}
}


8 – Agora podemos chamar o método gravar service dentro do componente e por fim, tratar o seu retorno:


gravar(usuario: Usuario){
this.service.gravar(this.usuario).subscribe(() =>
{
  alert('Success!');
},
() => {
  alert('Error');
});
}
}


Teste:



Vishe! Não encontrou nada!


9 – Informe o nome da tabela dentro do “db.json” e inicialize o Json Server pelo terminal:


Tente cadastrar o registro novamente:



Pronto! Nosso usuário foi registrado com sucesso!

0
1

Comentários (0)

Entusiasta de Tecnologias Web

Brasil