このチュートリアルは、 wp-api-angular ライブラリを使用して、Angular 2アプリケーションをWordPress REST APIに接続することを示しています。 ライブラリは、主要なWPリソース（ユーザー、投稿、コメント、メディア、分類法）をサポートしています。 JWT認証、ユーザーおよび投稿リスト、およびポストCRUD（作成、読み取り、更新、削除）操作などの使いやすさを紹介する機能を構築します。 完全なソースコードはGitHubにあります。 このチュートリアルではAngular 5を使用していますが、概念はAngular 2に適用されます。

重要な概念：

• wp-api-angular 。
WordPressセットアップ：Permalinksを有効にし、Secure APIアクセス用のJWT認証プラグインをインストールします。
Angular実装：JWT認証、ユーザーリスト、およびCRUD操作の投稿。
Angularでの観測可能性と約束を使用した非同期API処理。
Angularアプリケーションを強化するために、完全なWordPress API（ユーザー、投稿、コメント、メディア）にアクセスします。

セットアップ：

このチュートリアルは、自己ホストされたWordPressインスタンスを使用しています。 パーマリンクを有効にします（命令については、WordPress Codexを参照してください。nginxについては、

try_files $ uri $ uri / / index.php？$ args; から nginx.conf を追加してください）。 安全なAPIアクセス用のJWT認証プラグインをインストールします。

Angular Application Setup：

新しい角度アプリケーションを作成します：
1. ng new 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/', '');
}

your_domain_here をWordPressドメインに置き換えます。 また、必要なインポートを app.component.ts （ ngform 、 httpclientmodule 、）に追加します。 authentication（jwt）：

token

変数を
1. app.component.ts 。に追加します。 認証
component（
2. ng generate component authentication ）。を作成します。 in authentication.component.ts
、
3. ユーザーオブジェクトと auth（）メソッドを作成します：]
auth（）{ this.http.post（ 'http：// your_domain/wp-json/jwt-auth/v1/token'、{ ユーザー名：this.user.login、 パスワード：this.user.password }）。subscribe（data => { 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);
    }
  });
}

authentication.component.html

。
4. でログインフォームを作成します。
リストユーザー：

user-list

component（
1. ng generate component user-list ）。を作成します。 in user-list.component.ts
、inject
2. wpapiusers を使用し、 getList（）を使用してユーザーを使用します。 working working（crud）：

投稿の作成：

を作成します。
• wpapiposts.create（）をjwt authorization headers。で使用します。 リスト投稿： を作成します。
wpapiposts.getList（）
• を使用して投稿を取得します。 投稿の削除：削除ボタンを post-list に追加します。
wpapiposts.delete（）
• をjwt authorizationヘッダーで使用します。 編集投稿： post-edit コンポーネントを作成します。
wpapiposts.update（）
• をjwt authorization headersを使用します。 結論： このチュートリアルは、AngularをWordPress REST APIと統合するための基盤を提供します。
wp-api-angular

ライブラリはこのプロセスを簡素化し、角度アプリケーション内のWordPressコンテンツの効率的な管理を可能にします。 認証を安全に処理し、非同期操作を効果的に管理することを忘れないでください。 提供されたコードスニペットと説明は、WordPress APIとのより複雑な相互作用を構築するのに役立つはずです。