将角和WordPress API与wp-api-angular连接

本教程演示了使用wp-api-angular库将Angular 2应用程序与WordPress REST API连接的。 该图书馆支持主要的WP资源（用户，帖子，评论，媒体，分类法）。我们将构建展示其易用性的功能：JWT身份验证，用户和发布列表，以及Post Crud（创建，读取，更新，删除）操作。 完整的源代码在GitHub上。 虽然本教程使用Angular 5，但这些概念适用于Angular 2。

密钥概念：

无缝的Angular 2和WordPress REST API使用
• >。 wp-api-angular WordPress设置：启用永久链接并安装JWT身份验证插件以进行安全API访问。
• > Angular实现：JWT身份验证，用户列表和后CRUD操作。
• 异步API处理具有可观察和承诺的角度。>访问完整的WordPress API（用户，帖子，评论，媒体）以增强角度应用程序。
• 设置：

本教程使用一个自托管的WordPress实例。 启用永久链接（有关说明，请参见WordPress codex;有关NGINX，添加）。 安装JWT身份验证插件以供安全API访问。

>

try_files $uri $uri/ /index.php?$args; Angular应用程序设置：nginx.conf

创建一个新的Angular应用程序：> 安装库：

>
1. 在ng new wp-api中导入必要的模块：
2. cd wp-api && npm install wp-api-angular --save
>用WordPress域替换
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> authentication（JWT）： app.component.ts NgForm HttpClientModule<Headers变量

。

创建一个component（）。

>

in
1. ，创建token对象和app.component.ts方法：
>
2. authentication ng generate component authentication
在
3. >中创建登录表单 authentication.component.ts user auth()列表用户：

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);
    }
  });
}

创建

component（
4. ）。authentication.component.html
in

>，注入

并使用来获取用户。>

1. >使用帖子（crud）：user-listng generate component user-list>
   • 创建帖子：创建post-new组件。 在JWT授权标题中使用WpApiPosts.create()>
   • >列表帖子：创建post-list组件。使用WpApiPosts.getList()来获取帖子。
   • 删除帖子：将删除按钮添加到。在JWT授权标题中使用post-list> WpApiPosts.delete()
   • >编辑帖子：创建component。在JWT授权标题中使用post-edit> WpApiPosts.update()

   结论： >本教程为将角度与WordPress REST API集成为基础。

   库简化了此过程，从而可以在角度应用程序中有效地管理WordPress内容。 记住要安全地处理身份验证并有效地管理异步操作。 提供的代码片段和解释应帮助您与WordPress API构建更复杂的交互。

以上是将角和WordPress API与wp-api-angular连接的详细内容。更多信息请关注PHP中文网其他相关文章！