AngularとWordPress APIをWP-Api-Angularと接続します

このチュートリアルでは、

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

重要な概念：

シームレスな角度2および

。
• WordPressセットアップ：Permalinksを有効にし、Secure APIアクセス用のJWT認証プラグインをインストールします。 wp-api-angularAngular実装：JWT認証、ユーザーリスト、およびCRUD操作の投稿。
Angularでの観測可能性と約束を使用した非同期API処理。
Angularアプリケーションを強化するために、完全なWordPress API（ユーザー、投稿、コメント、メディア）にアクセスします。
• セットアップ：
このチュートリアルでは、自己ホストされたWordPressインスタンスを使用しています。 パーマリンクを有効にします（命令については、WordPress Codexを参照してください。nginxについては、を

に追加してください）。 Secure APIアクセス用のJWT認証プラグインをインストールします

角度アプリケーションのセットアップ：

try_files $uri $uri/ /index.php?$args;新しい角度アプリケーションを作成します：nginx.conf

ライブラリのインストール：

：

で必要なモジュールをインポートします
1. ng new wp-api
2. > wordPressドメインに置き換えます。 また、必要な輸入品をcd wp-api && npm install wp-api-angular --save、
、
3. 、src/app/app.module.tsを含む）に追加します。

<code class="language-typescript">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/', '');
}</code>

認証（jwt）：

YOUR_DOMAIN_HERE app.component.ts NgForm HttpClientModule Headers

コンポーネント（）。を作成します in

、A メソッドを作成してください：

1. token app.component.ts
2. 。authenticationでログインフォームを作成します ng generate component authentication
3. ユーザーのリスト：authentication.component.tsuser auth()
a

コンポーネント（

<code class="language-typescript">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);
    }
  });
}</code>

）。

を作成します
4. inauthentication.component.html、
を注入し、

を使用してユーザーをフェッチします。

投稿の操作（CRUD）：

• 投稿の作成：post-newコンポーネントを作成します。 JWT Authorization Headersを使用してWpApiPosts.create()を使用します。
• 投稿のリスト：post-listコンポーネントを作成します。 WpApiPosts.getList()を使用して、投稿を取得します。
• 投稿の削除：削除ボタンをpost-listに追加します。 JWT Authorization Headersを使用してWpApiPosts.delete()を使用します。
• 投稿の編集：post-editコンポーネントを作成します。 JWT Authorization Headersを使用してWpApiPosts.update()を使用します。

結論：

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

以上がAngularとWordPress APIをWP-Api-Angularと接続しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。