本教程使用 wp-api angular 庫將Angular 2應用程序與WordPress REST API連接。 該圖書館支持主要的WP資源（用戶，帖子，評論，媒體，分類法）。我們將構建展示其易用性的功能：JWT身份驗證，用戶和發布列表，以及Post Crud（創建，讀取，更新，刪除）操作。 完整的源代碼在GitHub上。 雖然本教程使用Angular 5，但這些概念適用於Angular 2。

使用

。 角度實現：JWT身份驗證，用戶列表和郵政處理。

• 訪問完整的WordPress API（用戶，帖子，註釋，媒體）以增強角度應用程序。 [2 本教程使用一個自託管的WordPress實例。 啟用永久鏈接（有關指令，請參見WordPress codex; nginx，添加
）。 安裝JWT身份驗證插件以進行安全API訪問。
• [2
• 創建一個新的Angular應用程序：
NG NEW WP-API
安裝庫：
• CD WP-API && NPM安裝WP-API-ANGULAR--SAVE- -SAVE
[2

}）） ]，， // ... }）） 導出函數wpapiloaderfactory（http：http）{ 返回新的Wpapistaticloader（http，'http：// your_domain_here/wp-json/wp/v2/'，''）; }

app.component.ts （包括， httpclientmodule ）。 [2

添加一個變量添加到 app.component.ts

創建一個
1. authentication ng生成組件authentication ）。
authentication.component.ts
2. ，創建一個和 auth（）
3. [2 this.http.post（'http：// your_domain/wp-json/jwt-auth/v1/token'，{ 用戶名：this.user.login， 密碼：this.user.password }）。訂閱（data => { if（data ['token']）{ this.token = data ['token']; this.tokenchange.emit（this.token）; } }）; }

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/', '');
}

創建一個 user-list ng生成component user-list ）。 In user-list.component.ts, inject WpApiUsers and use getList()

[2

創建一個
1. post-new 列表帖子：創建一個 post-list
component。使用
2. wpapiposts.getlist（）來獲取帖子。 刪除帖子：將刪除按鈕添加到 post-list
。使用JWT授權標題。
3. 創建一個 post-edit 結論：

本教程為將Angular與WordPress REST API集成為基礎。   wp-api angular 庫簡化了此過程，從而可以在角度應用程序中有效地管理WordPress內容。  記住要安全地處理身份驗證並有效地管理異步操作。  提供的代碼片段和解釋應幫助您與WordPress API建立更複雜的交互。