يوضح هذا البرنامج التعليمي باستخدام مكتبة wp-api-angular لتوصيل تطبيقات Angular 2 باستخدام واجهة برمجة تطبيقات WordPress Rest. تدعم المكتبة موارد WP الرئيسية (المستخدمين ، المشاركات ، التعليقات ، الوسائط ، تصنيفات). سنقوم ببناء ميزات تعرض سهولة الاستخدام: مصادقة JWT ، وإدراج المستخدم والنشر ، ونشر عمليات CRUD (إنشاء ، قراءة ، تحديث ، حذف). رمز المصدر الكامل على جيثب. بينما يستخدم هذا البرنامج التعليمي Angular 5 ، تنطبق المفاهيم على Angular 2.

مفاهيم المفاتيح:

• سلس Angular 2 و WordPress Rest Integration API باستخدام wp-api-angular .
• إعداد WordPress: تمكين الرابط الثابت وتثبيت المكون الإضافي لمصادقة JWT للوصول الآمن API.
• التنفيذ الزاوي: مصادقة jwt ، قائمة المستخدمين ، وعمليات post crud.
• معالجة واجهة برمجة التطبيقات غير المتزامنة مع الملاحظات والوعود في الزاوية.
• الوصول إلى واجهة برمجة تطبيقات WordPress الكاملة (المستخدمين ، المشاركات ، التعليقات ، الوسائط) لتعزيز التطبيقات الزاوية.

إنشاء:

يستخدم هذا البرنامج التعليمي مثيل WordPress مستضيف ذاتيًا. تمكين الرابط الثابت (انظر مخطوطة WordPress للحصول على التعليمات ؛ من أجل nginx ، أضف try_files $ uri $ uri / / inindex.php؟umargs ؛ budap&&] إلى nginx.conf ). قم بتثبيت المكون الإضافي لمصادقة JWT للوصول الآمن API.

إعداد تطبيق Angular:

قم بإنشاء تطبيق زاوي جديد:
1. ng wp-api جديد
قم بتثبيت المكتبة:
2. cd wp-api && npm تثبيت wp-api-angular-save
استيراد الوحدات اللازمة في
3. src/app/app.module.ts :

import { Http } from '@angular/http';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { WpApiModule, WpApiLoader, WpApiStaticLoader } from 'wp-api-angular';

@NgModule({
  // ...
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    WpApiModule.forRoot({
      provide: WpApiLoader,
      useFactory: WpApiLoaderFactory,
      deps: [Http]
    })
  ],
  // ...
})

export function WpApiLoaderFactory(http: Http) {
  return new WpApiStaticLoader(http, 'http://YOUR_DOMAIN_HERE/wp-json/wp/v2/', '');
}

استبدال

أيضًا ، أضف الاستيرادات اللازمة إلى app.component.ts (بما في ذلك ngform ، المصادقة (jwt):

أضف A

رمز متغير إلى app.component.ts

.

1. إنشاء مصادقة مصادقة مكون ( ng إنشاء مصادقة مكون ).
2. in antaintication.component.ts ، قم بإنشاء مستخدم كائن و
uper ()
3. الطريقة: Auth () { this.http.post ('http: // your_domain/wp-json/jwt-auth/v1/token' ، { اسم المستخدم: this.user.login ، كلمة المرور: this.user.password }). الاشتراك (البيانات => { if (Data ['token']) { this.token = data ['token'] ؛ this.tokenchange.emit (this.token) ؛ } }) ؛ }

قم بإنشاء نموذج تسجيل الدخول في

auth() {
  this.http.post('http://YOUR_DOMAIN/wp-json/jwt-auth/v1/token', {
    username: this.user.login,
    password: this.user.password
  }).subscribe(data => {
    if (data['token']) {
      this.token = data['token'];
      this.tokenChange.emit(this.token);
    }
  });
}

إدراج المستخدمين:
قم بإنشاء مكون

user-list

مكون ( ng قم بإنشاء عنصر مستخدم مكون ).

in
1. user-list.component.ts ، حقن wpapiusers واستخدم getList ()
لجلب المستخدمين.
2. العمل مع المنشورات (crud):

إنشاء منشورات:

قم بإنشاء مكون post-new . استخدم

wpapiposts.create ()

برؤوس ترخيص JWT.
• منشورات الإدراج: إنشاء مكون post-list مكون. استخدم wpapiposts.getList ()
لجلب المنشورات.
• حذف المنشورات: أضف زر حذف إلى post-list . استخدم wpapiposts.delete ()
برؤوس ترخيص JWT.
• تحرير منشورات: إنشاء مكون post-edit مكون. استخدم wpapiposts.update ()
برؤوس ترخيص JWT.
• خاتمة: يوفر هذا البرنامج التعليمي أساسًا لدمج Angular مع واجهة برمجة تطبيقات WordPress Rest. تقوم مكتبة
wp-api-angular

بتبسيط هذه العملية ، مما يسمح بإدارة فعالة لمحتوى WordPress داخل تطبيقاتك الزاوية. تذكر أن تتعامل مع المصادقة بشكل آمن وإدارة العمليات غير المتزامنة بشكل فعال. يجب أن تساعدك مقتطفات الرمز والتفسيرات المقدمة في بناء تفاعلات أكثر تعقيدًا مع واجهة برمجة تطبيقات WordPress.