Este tutorial demuestra el uso de la biblioteca wp-api-ogular para conectar aplicaciones Angular 2 con la API REST de WordPress. La biblioteca admite los principales recursos de WP (usuarios, publicaciones, comentarios, medios de comunicación, taxonomías). Construiremos características que muestren su facilidad de uso: autenticación JWT, listado de usuarios y publicaciones, y publicar operaciones CRUD (crear, leer, actualizar, eliminar). El código fuente completo está en GitHub. Si bien este tutorial usa Angular 5, los conceptos se aplican a Angular 2.

conceptos clave:

• sin costura Angular 2 y WordPress REST API Integration usando wp-api-angular .
• Configuración de WordPress: Habilitar enlaces permanentes e instalar el complemento de autenticación JWT para el acceso a API seguro.
• implementación angular: autenticación JWT, listado de usuarios y publicar operaciones CRUD.
• Manejo de API asíncrono con observables y promesas en Angular.
• accediendo a la API de WordPress completa (usuarios, publicaciones, comentarios, medios) para mejorar las aplicaciones angulares.

configurando:

Este tutorial usa una instancia de WordPress autohospedada. Enable Permalinks (consulte el códice de WordPress para obtener instrucciones; para nginx, agregue try_files $ uri $ uri / /index.php?$args; horrible y&&] a nginx.conf ). Instale el complemento de autenticación JWT para el acceso a la API seguro.

Configuración de la aplicación angular:

cree una nueva aplicación angular:
1. ng nuevo wp-api
Instale la biblioteca:
2. cd wp-api && npm instalar wp-api-ogular --save
importar los módulos necesarios en
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 con su dominio de WordPress. Además, agregue las importaciones necesarias a app.component.ts (incluyendo ngform , httpclientmodule , encabezados ). ]

autenticación (jwt):

agregue una variable
1. token a app.component.ts .
cree una autenticación
2. autenticación componente ( ng Genere Component Authentication ).
in
3. autenticación.component.ts , crea un método user y un 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);
    }
  });
}

cree un formulario de inicio de sesión en
4. autenticación.component.html .

enumerar usuarios:

crea una lista de user-list
1. componente ( ng Generar componente user-list ). in
user-list.component.ts
2. , inyect wpapiusers y use getList () para obtener usuarios.

creando publicaciones:
• crea un componente post-new . Use wpapiposts.create () con encabezados de autorización JWT. Publicaciones de listado:
crea un componente de post-list
• . Use wpapiposts.getList () para obtener publicaciones. Eliminar publicaciones: Agregue un botón Eliminar a
post-list
• . Use wpapiposts.delete () con encabezados de autorización JWT. editando publicaciones: crea un componente post-edit
. Use
• wpapiposts.update () con encabezados de autorización JWT. Conclusión:

wp-api-ogular simplifica este proceso, permitiendo una gestión eficiente del contenido de WordPress dentro de sus aplicaciones angulares. Recuerde manejar la autenticación de forma segura y administrar las operaciones asincrónicas de manera efectiva. Los fragmentos y explicaciones de código proporcionados deberían ayudarlo a construir interacciones más complejas con la API de WordPress.