В прошлых темах были рассмотрены простейшие запросы к файлу json, который содержал некоторые данные. Однако нередко возникает необходимость обращаться с более сложными запросами к удаленному ресурсу, передавая ему некоторые параметры. Вначале рассмотрим, как передать параметры в get-запросе.

Рассмотрим простейшую задачу. Допустим, на стороне сервера действует некоторый обработчик или скрипт, который принимает в качестве параметра два числа и вычисляет их сумму.

В качестве стороны сервера мы могли бы взять разные технологии: PHP, ASP.NET и т.д. В данном случае для тестирования определим небольшое приложение на Node.js, так как данная технология представляет наиболее простейший способ для создания простейшего тестового приложения, да и сам Node.js установлен у всех разработчиков Angular. Приложение будет интуитивно понятным, более же подробно с данной технологией можно ознакомиться в [[https://metanit.com/web/nodejs/|руководстве по Node.js]

Определим для приложения Node.js новый каталог где-нибудь на жестком диске. Далее в этом каталоге определим файл package.json:

{
  "name": "expressapp",
  "version": "1.0.0",
  "dependencies": {
    "express": "^4.16.4"
  }
}

Наше приложение будет использовать фреймворк Express для обработки запросов. Установим пакеты командой npm install.

Далее определим в папке приложения файл app.js - главный файл приложения, который будет содержать следующий код:

const express = require("express");
 
const app = express();
 
// обработчик по маршруту localhost:3000/sum
app.get("/sum", function(request, response){
 
    // получаем параметры из строки запроса и преобразуем в числа
    const number1 = parseInt(request.query.num1);
    const number2 = parseInt(request.query.num2);
 
    // вычисляем сумму
    const sum = number1 + number2;
 
    // настройка заголовков CORS для кроссдоменных запросов
    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);

Данное приложение будет принимать запросы по адресу «/sum» (app.get(«/sum»)…). Из строки запроса получаем два параметра num1 и num2 (названия параметров произвольное). Далее конвертируем значения параметров в числа и вычисляем суммму. И возвращаем сумму в виде объекта json {result: sum}.

Поскольку приложение Angular будет разворачиваться на одном домене, а приложение Node.js на другом, то нам необходимо будет настроить CORS - кроссдоменные запросы. Для этого с помощью метода response.header устанавливаются соответствующие заголовки.

В командой строке/консоли перейдем к папке приложения node.js и запустим скрипт с помощью команды node app.js

C:\WINDOWS\system32>cd C:\node\expressapp
C:\node\expressapp>node app.js

Мы можем простестировать приложение в браузере, обратившись к нему с запросом http://localhost:3000/sum?num1=5&num2=9:

Для отправки запроса из Angular определим следующий сервис: 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);
  }

} Поскольку данные передаются через запрос GET, то мы можем конкатенировать нужное число со строкой запроса.

И определим код компонента:

import { Component, OnInit} from '@angular/core';
import { HttpService} from './http.service';
 
@Component({
    selector: 'my-app',
    template: `<div *ngIf="done">Сумма = {{sum}}</div>
                <div class="form-group">
                    <label>Введите первое число</label>
                    <input class="form-control" type="number" name="num1" [(ngModel)]="num1" />
                </div>
                <div class="form-group">
                    <label>Введите второе число</label>
                    <input class="form-control" type="number" name="num2" [(ngModel)]="num2" />
                </div>
                <div class="form-group">
                    <button class="btn btn-default" (click)="submit()">Отправить</button>
                </div>`,
    providers: [HttpService]
})
export class AppComponent { 
 
    num1: number;
    num2: number;
    sum: number;
    done: boolean = false;
    constructor(private httpService: HttpService){}
    submit(){
        this.httpService.getSum(this.num1, this.num2).subscribe((data:any) => {
            this.sum=data.result; 
            this.done=true;
        });
    }
}

По нажатию на кнопку отправляем введенное число на сервер, и поверх формы ввода отображаем полученный результат:

Также для определения параметров в запросе можно использовать класс HttpParams. В частности, изменим сервис HttpService следующим образом:

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});
    }
}

С помощью метода set() объекта HttpParams устанавливаются параметры, и затем этот объект передается в запрос. В итоге результат будет тот же, что и в примере выше.