Enviando Dados em Requisições - Angular

Nos temas anteriores, foram discutidas requisições simples para um arquivo JSON que continha alguns dados. No entanto, muitas vezes é necessário lidar com requisições mais complexas a um recurso remoto, enviando certos parâmetros. Primeiro, vamos ver como passar parâmetros em uma requisição GET.

Definindo a Aplicação no Servidor

Vamos considerar uma tarefa simples. Suponha que no lado do servidor exista um script ou manipulador que receba dois números como parâmetros e calcule a soma deles.

Podemos usar diferentes tecnologias no lado do servidor, como PHP, ASP.NET, etc. Para este exemplo, vamos usar uma aplicação simples em Node.js, pois essa tecnologia oferece uma maneira fácil de criar uma aplicação de teste, e o Node.js já está instalado na maioria dos desenvolvedores Angular. A aplicação será intuitiva e, para mais detalhes, você pode consultar a documentação do Node.js.

Crie um novo diretório para o aplicação Node.js em algum local no seu disco rígido. Vamos supor que o diretório seja C:\node. Em seguida, neste diretório, defina o arquivo package.json com o seguinte conteúdo:

{
    "name": "simple-server",
    "version": "1.0.0",
    "dependencies": {
        "express": "4.18.2"
    }
}

Para simplificar a tarefa, a nossa aplicação usará o framework Express para processar as requisições. Instale os pacotes necessários com o comando npm install.

C:\WINDOWS\system32>cd C:\node
C:\node>npm install

Isso instalará os pacotes necessários e exibirá uma mensagem semelhante a:

added 62 packages, and audited 63 packages in 6s

11 packages are looking for funding
    run `npm fund` for details

found 0 vulnerabilities

Em seguida, no diretório da aplicação, crie o arquivo app.js: o principal arquivo da aplicação, que conterá o seguinte código:

const express = require("express");
    
const app = express();
    
// manipulador para a rota localhost:3000/sum
app.get("/sum", function(request, response) {
        
    // obtém os parâmetros da string de requisição e os converte em números
    const number1 = parseInt(request.query.num1);
    const number2 = parseInt(request.query.num2);
    
    // calcula a soma
    const sum = number1 + number2;
        
    // configura os cabeçalhos CORS para requisições cross-domain
    response.header("Access-Control-Allow-Origin", "*");
    response.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    response.header("Access-Control-Allow-Methods", "GET, PATCH, PUT, POST, DELETE, OPTIONS");
        
    response.send({result: sum});
});
    
app.listen(3000, () => console.log("Servidor iniciado em http://localhost:3000/"));

Esta aplicação aceitará requisições na rota /sum (definida pela app.get("/sum")). A partir da string de requisição, ela obterá dois parâmetros, num1 e num2 (os nomes desses parâmetros são arbitrários). Em seguida, converterá os valores desses parâmetros em números, calculará a soma e retornará o resultado como um objeto JSON {result: sum}.

Como a aplicação Angular será hospedada em um domínio e o Node.js em outro, precisaremos configurar o CORS para permitir requisições entre domínios. Isso é feito configurando os cabeçalhos apropriados com o método response.header.

Na linha de comando ou console, navegue até a pasta da aplicação Node.js e execute o script com o comando:

c:\node>node app.js

A saída será:

Servidor iniciado em http://localhost:3000/

O servidor Node.js para testar a aplicação em Angular

Definindo a Aplicação Cliente em Angular

Para enviar a requisição do Angular, vamos definir o seguinte serviço:

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";

@Injectable()
export class HttpService {
    
    constructor(private http: HttpClient) { }
    
    getSum(num1: number, num2: number) {
        return this.http.get("http://localhost:3000/sum?num1=" + num1 + "&num2=" + num2);
    }
}

Como os dados estão sendo passados por uma requisição GET, podemos concatenar os números diretamente na string da URL.

Agora, vamos definir o código do componente:

import { Component } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { CommonModule } from '@angular/common';
import { HttpService } from "./http.service";

@Component({
    selector: "my-app",
    standalone: true,
    imports: [FormsModule, CommonModule],
    template: `<div>
                <p>
                    <label>Digite o primeiro número</label><br>
                    <input type="number" name="num1" [(ngModel)]="num1" />
                <p>
                <p>
                    <label>Digite o segundo número</label><br>
                    <input type="number" name="num2" [(ngModel)]="num2" />
                </p>
                    <button (click)="submit()">Enviar</button>
                </div>
                <div *ngIf="done">
                    <p>Soma: {{sum}}</p>
                </div>
    `,
    providers: [HttpService]
})
export class AppComponent { 
        
    num1: number = 0;
    num2: number = 0;
    sum: number | undefined;
    done: boolean = false;
    
    constructor(private httpService: HttpService) { }

    submit() {
        this.httpService.getSum(this.num1, this.num2).subscribe({
            next: (data: any) => {
                this.sum = data.result;
                this.done = true;
            }
        });
    }
}

Ao clicar no botão, os números digitados são enviados ao servidor, e o resultado da soma é exibido acima do formulário de entrada.

Usando HttpParams

Também é possível usar a classe HttpParams para definir os parâmetros da requisição. Vamos modificar o serviço HttpService da seguinte maneira:

import { Injectable } from "@angular/core";
import { HttpClient, HttpParams } from "@angular/common/http";

@Injectable()
export class HttpService {

    constructor(private http: HttpClient) { }

    getSum(num1: number, num2: number) {
        const params = new HttpParams()
            .set("num1", num1.toString())
            .set("num2", num2.toString());
        return this.http.get("http://localhost:3000/sum", { params });
    }
}

Com o método set() do objeto HttpParams, os parâmetros são configurados e o objeto é então passado na requisição. O resultado final será o mesmo que no exemplo anterior.

Essa abordagem torna o código mais claro e organizado, especialmente quando há vários parâmetros a serem enviados.