Vou dar um exemplo básico que utilizei por bastante tempo para aprender Angular,
ApiService.ts - Service (Serviço)
Esse é o nosso serviço, ele irá ficar com as requisições http para a rota car da api que temos que consumir.
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Car } from './car';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
@Injectable({providedIn:'root'})
export class ApiService {
baseURL: string = "http://localhost:8080/";
constructor(private http: HttpClient) {
}
getCars(): Observable<Car[]> {
console.log('getCar '+this.baseURL + 'car')
return this.http.get<Car[]>(this.baseURL + 'car')
}
addCar(car:Car): Observable<any> {
const headers = { 'content-type': 'application/json'}
const body=JSON.stringify(car);
console.log(body)
return this.http.post(this.baseURL + 'car', body,{'headers':headers})
}
}
AppComponent - Component (Componente)
Esse é o nosso componente, ele irá fazer uma injeção de dependência para o nosso ApiService e utiliza-lo para as chamar requisições http.
import { Component, OnInit } from '@angular/core';
import { ApiService } from './api.service';
import { Car } from './car';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'AppComponent';
cars:Car[];
car = new Car();
constructor(private apiService:ApiService) {}
ngOnInit() {
this.getAllCars()
}
// Get sendo utilizado
getAllCars() {
this.apiService.getCars()
.subscribe(data => {
console.log(data);
this.cars=data;
})
}
// Post sendo utilizado
addCar() {
this.apiService.addCar(this.car)
.subscribe(data => {
console.log(data);
this.getAllCars(); // Atualiza todos os carros, pois adicionou novo
})
}
}
Agora é apenas você chamar essas funções conforme sua necessidade, nesse caso, sempre que esse componente for iniciado eu vou chamar a função getAllCars()
para obter todos os carros, assim como você pode chamar a função addCar()
quando o usuário clicar em um botão.
O Angular utiliza em suas requisições HTTP o Observable, essa é uma das formas que utilizamos para trabalhar com requisições e mais comum, os Observables no Angular, a ideia é que seja feito um .subscribe()
para cada requisição http, como return this.http.post
.
{{gatway_dns}}
?gatway_dns
vem.