كيفية دمج Angular 4 مع واجهات برمجة تطبيقات RESTful APIs دليل عملي

يعد دمج Angular 4 مع واجهات برمجة التطبيقات RESTful APIs أمرًا حيويًا لمطوري تطبيقات الويب الحديثة. تسمح واجهات برمجة تطبيقات RESTful بالتفاعل مع الأنظمة الخلفية. فهي تتيح تبادل البيانات وعمليات CRUD (إنشاء وقراءة وتحديث وحذف). يبسّط Angular 4، مع وحدة HttpClientModule المدمجة فيه، هذا التكامل. في هذا الدليل، سنستكشف في هذا الدليل كيفية ربط تطبيق Angular 4 بواجهة برمجة تطبيقات RESTful، خطوة بخطوة.
ما ستتعلمه في هذا الدليل
1. إعداد مشروع Angular 4.
2. تثبيت التبعيات المطلوبة.
3. تكوين HttpClientModule.
4. إنشاء طلبات GET و POST و POST و PUT و DELETE.
5. معالجة الأخطاء وتحسين تجربة المستخدم.
المتطلبات الأساسية فهم أساسي ل Angular 4. تثبيت Node.js و npm. واجهة برمجة تطبيقات RESTful للتفاعل معها (على سبيل المثال، JSONPlaceholder أو الواجهة الخلفية الخاصة بك).
الخطوة 1: إعداد مشروع Angular 4 الخاص بك
للبدء، قم بإنشاء مشروع Angular 4 جديد أو استخدم مشروعًا موجودًا. استخدم CLI Angular لإنشاء المشروع وخدمته.
”’باش
ng جديد angular-rest-API
cd angular-rest-api
خدمة ng
“`
يجب أن يعمل تطبيقك الآن على
الخطوة 2: تثبيت التبعيات المطلوبة
يأتي Angular 4 مع HttpClientModule كجزء من وحداته الأساسية. تأكد من توفرها في مشروعك.
””bash
npm install @angular/common@4 – حفظ
npm تثبيت npm @angular/http@4 – حفظ
“`
الخطوة 3: استيراد وحدة HttpClientModule وتكوينها
في Angular 4، استورد HttpClientModule في الوحدة النمطية الجذرية لتطبيقك. هذا يتيح وظائف HTTP.
افتح ‘src/app/app.module.ts’ وأضف ما يلي:
””، ”’نوع النص
استيراد { BrowserModule } من ‘@angular/platform-browser’;
استيراد { NgModule } من ‘@angular/core’;
استيراد { HttpClientModule } من ‘@angular/common/http’;
استيراد { AppComponent } من “./app.component”;
@NgModule({
الإعلانات: [AppComponent],
الواردات: [
BrowserModule,
HttpClientModule // استيراد HttpClientModule هنا
],
المزودين: [],
التمهيد: [مكون التطبيق]
})
تصدير فئة AppModule { }
“`
الخطوة 4: إنشاء خدمة لتفاعل API
تتيح لك الخدمات الزاويّة التفاف منطق HTTP. يمكنك إعادة استخدامها في المكونات.
أنشئ خدمة جديدة:
””باش
إنشاء خدمة ng إنشاء خدمة api
“`
في ‘src/app/API.service.ts’، قم بتنفيذ ما يلي:
””’نصّ نوعي
استيراد { Injectable } من ‘@angular/core’;
استيراد { HttpClient } من ‘@angular/common/http’;
استيراد { قابل للملاحظة } من ‘rxjs’;
@Injectable({
مزود في: ‘جذر’
})
تصدير فئة ApiService {
مُنشئ (http خاص: HttpClient) {} {}
// طلب GET
getPosts(): قابل للملاحظة {
إرجاع this.http.get(this.apiUrl);
}
// طلب POST
إنشاء بريد(بيانات: أي): قابل للملاحظة {
إرجاع (this.apiUrl, data);
}
// طلب PUT
تحديثPost(المعرف: رقم، البيانات: أي): قابل للملاحظة {
إرجاع هذا http.http.put(`${this.apiUrl}/${id}}، البيانات);
}
// طلب الحذف
حذف المنشور(المعرف: رقم): قابل للملاحظة {
إرجاع this.http.http.delete(`${this.apiUrl}/${id}});
}
}
“`
الخطوة 5: استخدام الخدمة في مكوّن ما
للتوضيح، سنستخدم الخدمة في المكون الجذر. افتح “src/app/app.component.ts” وعدّل على النحو التالي:
””’نصّ نوعي
استيراد { مكون، OnInit } من ‘@angular/core’;
استيراد { ApiService } من ‘./api.service’;
@مكوّن({
المحدد: ‘جذر التطبيق’,
قالب: ‘
الزاوي 4 وواجهة برمجة تطبيقات RESTful
الحصول على المشاركات
{{{ post.title }}}
`
})
تصدير صنف AppComponent ينفذ OnInit {
المشاركات: أي [] = [];
مُنشئ(خاص apiService: ApiService) {} {}
ngOnInInit() {
هذا.fetchPosts();
}
fetchPosts() { {
هذا.apiService.getPosts().subscription(
(البيانات) => { {
هذه المشاركات = البيانات;
},
(خطأ) => {
console.error(‘خطأ في جلب المشاركات’، خطأ);
}
);
}
}
“`
الخطوة 6: التعامل مع أخطاء HTTP
معالجة الأخطاء أمر بالغ الأهمية لتجربة مستخدم جيدة. يوفر HttpClient الخاص ب Angular’s HttpClient مشغلات مثل catchError لإدارة الأخطاء.
عدّل أساليب خدمتك للتعامل مع الأخطاء:
‘-‘ ‘نص مكتوب
استورد { catchError } من ‘rxjs/المشغلين’;
استيراد { throwError } من ‘rxjs’;
getPosts(): قابل للملاحظة {
إرجاع this.http.get(this.apiUrl).pipe(
catchError(هذا.handleError)
);
}
خاص التعامل مع الخطأ(خطأ: أي) { {
console.error(‘حدث خطأ:’، خطأ);
إرجاع throwError(‘حدث خطأ ما؛ يرجى المحاولة مرة أخرى لاحقًا’);
}
“`
الخطوة 7: اختبار عمليات CRUD
استخدم الأزرار في قالب المكون الخاص بك لتشغيل عمليات واجهة برمجة التطبيقات المختلفة. على سبيل المثال:
””html
إنشاء مشاركة
تحديث مشاركة
حذف مشاركة
“`
وتنفيذ هذه الطرق في المكون:
””نصية
إنشاء منشور جديد() {
const newPost = { العنوان: ‘منشور جديد’، النص الأساسي: ‘هذا منشور جديد’. };
هذا.apiService.createPost(newPost).subscribe(
(البيانات) => console.log(‘post created:’,’, data),
(خطأ) => (خطأ) => console.error(‘خطأ في إنشاء المنشور:’، خطأ)
);
}
تحديث المنشور(المعرف: رقم) {
const updatedPost = { العنوان: ‘منشور محدّث’، النص الأساسي: ‘محتوى محدّث’. };
هذا.apiService.updatePost(id, updatedPost).subscribe(
(البيانات) => console.log(‘تم تحديث المنشور:’، البيانات),
(خطأ) => (خطأ) => console.error(‘خطأ في تحديث المنشور:’، خطأ)
);
}
حذف منشور(المعرف: رقم) {
هذا.apiService.deletePost(id).subscription(
(البيانات) => console.log(‘تم حذف المنشور:’، البيانات),
(خطأ) => (خطأ) => console.error(‘خطأ في حذف المنشور:’,’, خطأ)
);
}
الخطوة 8: تحسين تجربة المستخدم
لتحسين تجربة المستخدم: اعرض مؤشرات التحميل أثناء انتظار استجابات واجهة برمجة التطبيقات. عرض رسائل خطأ سهلة الاستخدام. تخزين البيانات مؤقتًا لتحسين الأداء.
كيف تحصل على شهادة Angular JS 4؟
نحن شركة تكنولوجيا تعليمية تقدم دورات تدريبية للحصول على الشهادات لتسريع الحياة المهنية للمهنيين العاملين في جميع أنحاء العالم. نحن نقدم التدريب من خلال ورش عمل في الفصول الدراسية بقيادة مدرب، ودورات تدريبية افتراضية مباشرة بقيادة مدرب، ودورات التعلم الإلكتروني ذاتية التعلم.
لقد أجرينا بنجاح دورات تدريبية في 108 دول في جميع أنحاء العالم ومكّنا الآلاف من المهنيين العاملين من تعزيز نطاق حياتهم المهنية.
تشمل محفظتنا التدريبية للمؤسسات دورات تدريبية معتمدة ومعترف بها عالمياً ومطلوبة في إدارة المشاريع، وإدارة الجودة، وتحليل الأعمال، وإدارة خدمات تكنولوجيا المعلومات، و”أجايل” و”سكروم”، والأمن السيبراني، وعلوم البيانات، والتقنيات الناشئة. قم بتنزيل كتالوج تدريب المؤسسات من https://cciedump.spoto.net/ar/
تشمل الدورات الشائعة ما يلي:
إدارة المشاريع: PMP وAPP وCAPM وPMI RMP
إدارة الجودة: الحزام الأسود لستة سيجما، الحزام الأخضر لستة سيجما، إدارة اللين، إدارة اللين، Minitab، CMMI
تحليل الأعمال: CBCAP، CCCBA، ECBA
التدريب الرشيق: PMI ACP، CMS، CSPO، CSPO
تدريب سكروم: CSM
ديف أوبس
إدارة البرامج: PgMP
تكنولوجيا الحوسبة السحابية: الحوسبة السحابية: Exin الحوسبة السحابية
إدارة عميل سيتريكس: إدارة عميل سيتريكس إدارة سحابة سيتريكس: إدارة السحابة
الشهادات الـ 10 الأعلى أجراً المستهدفة في 2024 هي
محترف أمن نظم المعلومات المعتمد (CISSP)
خاتمة
لدمج Angular 4 مع واجهات برمجة تطبيقات RESTful، استخدم HttpClientModule لعمليات CRUD الفعالة.
يمكنك إنشاء تطبيقات قوية من خلال:
تغليف مكالمات واجهة برمجة التطبيقات في الخدمات.
معالجة الأخطاء بأمان.
تصميم مكونات قابلة لإعادة الاستخدام.
إتقان هذا التكامل سيجعل تطبيقات Angular ديناميكية. ومن ثم ستتواصل مع الأنظمة الخلفية بسلاسة.