=====Отправка данных в get запросе =====

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

Рассмотрим простейшую задачу. Допустим, на стороне сервера действует некоторый обработчик или скрипт, который принимает в качестве параметра два числа и вычисляет их сумму.\\
\\
В качестве стороны сервера мы могли бы взять разные технологии: PHP, ASP.NET и т.д. В данном случае для тестирования определим небольшое приложение на Node.js, так как данная технология представляет наиболее простейший способ для создания простейшего тестового приложения, да и сам Node.js установлен у всех разработчиков Angular. Приложение будет интуитивно понятным, более же подробно с данной технологией можно ознакомиться в [[https://metanit.com/web/nodejs/|руководстве по Node.js]\\
\\
Определим для приложения Node.js новый каталог где-нибудь на жестком диске. Далее в этом каталоге определим файл package.json:
<code javascript>
{
  "name": "expressapp",
  "version": "1.0.0",
  "dependencies": {
    "express": "^4.16.4"
  }
}
</code>
Наше приложение будет использовать фреймворк Express для обработки запросов. Установим пакеты командой npm install.\\
\\
Далее определим в папке приложения файл app.js - главный файл приложения, который будет содержать следующий код:
<code javascript>
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);
</code>
Данное приложение будет принимать запросы по адресу "/sum" (app.get("/sum")...). Из строки запроса получаем два параметра num1 и num2 (названия параметров произвольное). Далее конвертируем значения параметров в числа и вычисляем суммму. И возвращаем сумму в виде объекта json {result: sum}.\\
\\
Поскольку приложение Angular будет разворачиваться на одном домене, а приложение Node.js на другом, то нам необходимо будет настроить CORS - кроссдоменные запросы. Для этого с помощью метода response.header устанавливаются соответствующие заголовки.\\
\\
В командой строке/консоли перейдем к папке приложения node.js и запустим скрипт с помощью команды node app.js\\
<code powershell>
C:\WINDOWS\system32>cd C:\node\expressapp
C:\node\expressapp>node app.js
</code>
Мы можем простестировать приложение в браузере, обратившись к нему с запросом http://localhost:3000/sum?num1=5&num2=9:\\
\\
{{ :angular:angular2:http:6.11.png |}}
\\
====Определение клиентского приложения Angular====

Для отправки запроса из 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, то мы можем конкатенировать нужное число со строкой запроса.\\
\\
И определим код компонента:
<code javascript>
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;
        });
    }
}
</code>
По нажатию на кнопку отправляем введенное число на сервер, и поверх формы ввода отображаем полученный результат:\\
\\
{{ :angular:angular2:http:6.5.png |}}
\\
====HttpParams====
Также для определения параметров в запросе можно использовать класс HttpParams. В частности, изменим сервис HttpService следующим образом:
<code javascript>
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});
    }
}
</code>
С помощью метода **set()** объекта HttpParams устанавливаются параметры, и затем этот объект передается в запрос. В итоге результат будет тот же, что и в примере выше.