25. التحضير للتواصل مع الواجهة الخلفية: HttpClient Module

يحتاج كل تطبيق Angular حديث تقريباً إلى التواصل مع واجهة برمجة تطبيقات خلفية (API backend) (عادةً REST أو GraphQL) لجلب البيانات أو إنشائها أو تحديثها أو حذفها. يوفر Angular خدمة HttpClient لهذا الغرض.

1. استيراد HttpClientModule

يتم توفير خدمة HttpClient بواسطة HttpClientModule. يجب علينا استيراد هذه الوحدة إلى وحدة تطبيقنا الجذر (AppModule) لجعل الخدمة متاحة للحقن.

typescript // app.module.ts import { HttpClientModule } from '@angular/common/http';

@NgModule({ declarations: [AppComponent, ...], imports: [ BrowserModule, HttpClientModule, // <-- أضف هذا السطر // ... ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

2. إنشاء خدمة بيانات

نقوم عادةً بتغليف جميع اتصالات API ضمن خدمات مخصصة للحفاظ على نظافة المكونات.

typescript // api.service.ts import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http';

@Injectable({ providedIn: 'root' }) export class ApiService { private baseUrl = 'https://jsonplaceholder.typicode.com';

// حقن HttpClient في المُنشئ constructor(private http: HttpClient) { }

// أماكن طرق لأفعال HTTP getUsers() { // Implementation coming soon }

createPost(data: any) { // Implementation coming soon } }

المفهوم الرئيسي: Observables

لا تُرجع أساليب HttpClient (.get(), .post(), إلخ) البيانات مباشرة. بدلاً من ذلك، فإنها تُرجع Observable. هذه هي آلية Angular المفضلة للتعامل مع العمليات غير المتزامنة. سنتعمق قريباً في Observables و RxJS، ولكن بالنسبة لـ HTTP، تذكر:

• يمثل Observable تدفقاً للبيانات المحتملة.
• لا يتم تنفيذ الطلب إلا عندما يقوم شيء ما بـ subscribes على Observable.