Как использовать службы HttpClient и Http в Angular 17

В этом руководстве объясняется, как использовать службы HttpClient и Http в Angular 17. Вы узнаете, как создавать, отправлять и обрабатывать HTTP-запросы и ответы.

Шаг создания HttpClient & HTTP-сервис в Angular 17

• Шаг 1: Создайте проект Angular 17
• Шаг 2: экспортируйте ProvideHttpClient()
• Шаг 3. Создайте сервис для API
• Шаг 4: Использование сервиса для компонентов
• Шаг 5: Обновленный файл представления
• Запустите приложение Angular

Итак, давайте посмотрим на приведенный ниже пример, шаг за шагом, как создать службу HTTP и как ее использовать.

Шаг 1. Создайте проект Angular 17

Вы можете легко создать свое угловое приложение, используя следующую команду:

ng new my-new-app

Шаг 2: экспортируйте ProvideHttpClient()

На этом этапе нам нужно экспортировать метод ProvideHttpClient() в файл app.config.ts. поэтому давайте импортируем его, как показано ниже:

src/app/app.config.ts

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
  
import { routes } from './app.routes';
import { provideAnimations } from '@angular/platform-browser/animations';
  
import { provideHttpClient } from '@angular/common/http';
   
export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes), provideAnimations(), provideHttpClient()]
};

Шаг 3. Создайте сервис для API

Здесь нам нужно создать сервис для запроса http-клиента. мы создадим служебный файл и напишем код http-запроса клиента. этот сервис будет использовать в нашем файле компонента. Итак, давайте создадим сервис и вставим следующий код:

ng g s services/post

Теперь давайте добавим код, как показано ниже:

src/app/services/post.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
  
@Injectable({
  providedIn: 'root'
})
export class PostService {
  private url = 'http://jsonplaceholder.typicode.com/posts';
   
  constructor(private httpClient: HttpClient) { }
  
  getPosts(){
    return this.httpClient.get(this.url);
  }
  
}

Шаг 4. Используйте сервис для компонентов

Теперь нам нужно использовать эти сервисы для нашего компонента приложения. Итак, давайте обновим код, как показано ниже:

src/app/app.comComponent.ts

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
  
import { PostService } from './services/post.service';
  
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    posts:any;
  
    constructor(private service:PostService) {}
  
    ngOnInit() {
  
      this.service.getPosts()
        .subscribe(response => {
          this.posts = response;
        });
  }
    
}

Шаг 5: Обновленный файл просмотра

Теперь мы обновим наш html-файл. давайте поместим следующий код:

src/app/app.comComponent.html

<h1>Angular 17 HttpClient for Sending Http Request Example - ItSolutionStuff.com</h1>
  
<ul class="list-group">
  <li 
      *ngFor="let post of posts"
      class="list-group-item">
      {{ post.title }}
  </li>
</ul>

Запустите приложение Angular:

Все необходимые шаги выполнены, теперь вам нужно ввести приведенную ниже команду и нажать Enter, чтобы запустить приложение Angular:

ng serve

Теперь перейдите в веб-браузер, введите указанный URL-адрес и просмотрите выходные данные приложения:

http://localhost:4200

#angular