| نوع الطلب الشبكي (`HTTP Method`) | الغرض المعماري الأساسي | الأثر المباشر على الخادم |
|---|---|---|
| `POST` | إرسال بيانات جديدة كلياً لإنشاء سجل جديد في الخادم | إنشاء مورد جديد وإرجاع كائن البيانات المُنشأ مع معرفه الفريد |
| `PUT / PATCH` | تعديل أو تحديث سجل موجود مسبقاً بشكل كامل أو جزئي | تحديث البيانات الحالية ومزامنة التغييرات البرمجية |
| `DELETE` | طلب حذف سجل محدد من الخادم عبر تمرير المعرف (`ID`) | إزالة المورد المستهدف نهائياً من قاعدة البيانات |
التفاعل مع قواعد البيانات لا يقتصر على القراءة، بل يتطلب إرسال البيانات وتحديثها وحذفها عبر طلبات التعديل (POST, PUT, DELETE). يتعامل نظام HttpClient في Angular 22.1 مع هذه الطلبات بمرونة تامة، داعماً تمرير الهياكل البرمجية (Payloads) مع ضمان مزامنة حالة التطبيق مع الخادم الخارجي بكل أمان.
تتطلب عمليات الكتابة والإرسال تمرير كائن البيانات كوسيط إضافي، حيث يقوم نظام أنجولر بترجمته تلقائياً إلى صيغة JSON وإرساله للخادم.
من الضروري التعامل مع استجابة طلبات التعديل لتحديث واجهة المستخدم أو تخزين المعرفات الجديدة للموارد المُنشأة فوراً.
| 1 | import { Component, inject } from '@angular/core'; |
| 2 | import { CommonModule } from '@angular/common'; |
| 3 | import { HttpClient } from '@angular/common/http'; |
| 4 | import { FormsModule } from '@angular/forms'; |
| 5 | |
| 6 | @Component({ |
| 7 | selector: 'app-product-creator', |
| 8 | standalone: true, |
| 9 | imports: [CommonModule, FormsModule], |
| 10 | template: ` |
| 11 | <div class="api-card"> |
| 12 | <h3>إضافة منتج جديد عبر طلب POST</h3> |
| 13 | <input [(ngModel)]="productName" placeholder="اسم المنتج..." class="input-field" /> |
| 14 | <button (click)="createProduct()" class="action-btn">إرسال للخادم</button> |
| 15 | <p *ngIf="successMessage" class="success">{{ successMessage }}</p> |
| 16 | </div> |
| 17 | `, |
| 18 | styles: [` |
| 19 | .api-card { background: #090d16; color: #fff; padding: 24px; border-radius: 12px; border: 1px solid #1e293b; } |
| 20 | .input-field { width: 100%; padding: 10px; background: #1e293b; border: 1px solid #334155; color: #fff; border-radius: 6px; margin-bottom: 12px; box-sizing: border-box; } |
| 21 | .action-btn { background: #10b981; color: #fff; border: none; padding: 10px 20px; font-weight: bold; border-radius: 6px; cursor: pointer; } |
| 22 | .success { color: #38bdf8; margin-top: 10px; } |
| 23 | `] |
| 24 | }) |
| 25 | export class ProductCreatorComponent { |
| 26 | productName: string = ''; |
| 27 | successMessage: string = ''; |
| 28 | private http = inject(HttpClient); |
| 29 | |
| 30 | createProduct(): void { |
| 31 | const payload = { title: this.productName, price: 99.99 }; |
| 32 | |
| 33 | this.http.post<{ id: number; title: string }>('https://jsonplaceholder.typicode.com/posts', payload) |
| 34 | .subscribe({ |
| 35 | next: (response) => { |
| 36 | this.successMessage = `تم الإنشاء بنجاح برقم معرف: ${response.id}`; |
| 37 | console.log('استجابة خادم الـ POST:', response); |
| 38 | }, |
| 39 | error: (err) => console.error('خطأ أثناء إرسال البيانات:', err) |
| 40 | }); |
| 41 | } |
| 42 | } |