Как отправить ответ REST на html в Angular?

Опубликовано: 21 Февраля, 2023

В этой статье мы увидим, как отправлять ответы API с помощью модуля HttpClient в HTML с помощью Angular, а также разберемся с базовой реализацией на примерах.

Angular — это среда JavaScript, с помощью которой мы можем создавать реактивные одностраничные веб-приложения. Для реализации мы используем последнюю версию Angular (Angular 14) для обработки HTTP. Для приложений Angular HTTP-клиент в @angular/common/HTTP предоставляет упрощенный клиентский HTTP API, основанный на интерфейсе XMLHttpRequest, предоставляемом браузерами. Функции тестируемости, типизированные объекты запросов и ответов, перехват запросов и ответов, API-интерфейсы Observable и упрощенная обработка ошибок — вот некоторые дополнительные преимущества HttpClient. Чтобы получить данные с сервера и отправить их нашему приложению, нам нужен HTTP-клиент.

Прежде чем мы приступим к процессу установки, в нашей системе должны быть установлены NodeJS и NPM (менеджер пакетов узлов). Если нет, обратитесь к статье «Установка Node.js в Windows или Linux» для получения подробной информации о процедуре установки.

Шаги для отправки ответа REST в Angular:

Шаг 1: Установка Angular с использованием NPM

Установите Angular с помощью NPM, чтобы установить:

npm install -g @angular/cli

Шаг 2: Создайте новый проект

В angular нам нужно использовать ng new project_name для создания нового проекта.

ng new api_response

Шаг 3: Импорт HttpClientModule для запроса и ответа

Для настройки HttpClient нам нужно импортировать HttpClientModule в src/app/app.module.ts.

app.module.ts:

Javascript

import { NgModule } from "@angular/core";
import { BrowserModule } 
    from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { HttpClientModule } 
    from "@angular/common/http";
import { AppComponent } from "./app.component";
  
@NgModule({
    imports: [BrowserModule, 
              FormsModule, 
              HttpClientModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule {}

Шаг 4. Использование HttpClient в файле app.component.ts

Нам нужно использовать HttpClient для запроса вызова API для получения некоторых данных в ответ. Во-первых, мы создаем приватную переменную httpClient типа HttpClient с помощью конструктора. Затем создайте один метод для вызова API с помощью метода GET и сохранения ответа в переменной результатов. Вызов этого метода в ngOnInit() для загрузки получает ответ при загрузке страницы.

app.component.ts:

Javascript

import { Component, OnInit } from "@angular/core";
import { HttpClient } from "@angular/common/http";
  
@Component({
    selector: "my-app",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
    title = "GeeksForGeeks API Response";
  
    results: any;
    constructor(private http: HttpClient) {
    }
  
    ngOnInit(): void {
        this.getApiResponse();
    }
  
    getApiResponse() {
        this.http.get(
        // API Link
        "https://.../products").subscribe((response) => {
            this.results = response;
        });
    }
}

Шаг 5: Отображение данных в формате таблицы

Мы используем поддельный API магазина для получения списка продуктов или массива продуктов. Каждый продукт имеет некоторые свойства, такие как идентификатор, название, цена, описание, категория и рейтинг. Ниже добавьте изображение одного объекта продукта.

У нас есть множество продуктов со схожими свойствами. Использование цикла ngFor для отображения данных ответа в файле HTML. Мы используем указанный ниже API для получения данных.

Ссылка API: Вы можете использовать любую ссылку API. Например — https://…/products

приложение.component.html:

HTML

<div class="container mt-5">
    <table class="table table-bordered">
        <thead>
            <tr>
                <th scope="col">Id</th>
                <th scope="col">Title</th>
                <th scope="col">Price</th>
                <th scope="col">Description</th>
                <th scope="col">Category</th>
                <th scope="col">Rating</th>
            </tr>
        </thead>
        <tbody>
            <ng-container *ngFor="let result of results">
                <tr>
                    <th scope="row">{{ result.id }}</th>
                    <td>{{ result.title }}</td>
                    <td>{{ result.price }}</td>
                    <td>{{ result.description }}</td>
                    <td>{{ result.category }}</td>
                    <td>{{ result.rating["rate"] }}</td>
                </tr>
            </ng-container>
        </tbody>
    </table>
</div>

Выход:

Technical Scripter Picked AngularJS

Как отправить ответ REST на html в Angular?

Javascript

Javascript

HTML

РЕКОМЕНДУЕМЫЕ СТАТЬИ