Как отправить ответ REST на html в Angular?
В этой статье мы увидим, как отправлять ответы 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 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 > |
Выход: