Connexion angulaire et API WordPress avec WP-API-AGULAR

Ce didacticiel démontre l'utilisation de la bibliothèque wp-api-angular pour connecter les applications Angular 2 avec l'API WordPress REST. La bibliothèque prend en charge les principales ressources WP (utilisateurs, publications, commentaires, médias, taxonomies). Nous allons créer des fonctionnalités présentant sa facilité d'utilisation: Authentification JWT, listing des utilisateurs et publiques, et publiez des opérations CUD (créer, lire, mettre à jour, supprimer). Le code source complet est sur GitHub. Bien que ce tutoriel utilise Angular 5, les concepts s'appliquent à Angular 2.

Concepts clés:

• Intégration d'API Angular 2 et WordPress et WordPress en utilisant wp-api-angular.
• Configuration WordPress: activer les permaliens et installer le plugin d'authentification JWT pour l'accès à l'API sécurisé.
• Implémentation angulaire: authentification JWT, liste d'utilisateurs et opérations de post CRUD.
• Manipulation API asynchrone avec observables et promesses en angulaire.
• Accès à l'API WordPress complète (utilisateurs, publications, commentaires, médias) pour améliorer les applications angulaires.

Configuration:

Ce tutoriel utilise une instance WordPress auto-hébergée. Activer les permaliens (voir le codex WordPress pour les instructions; pour nginx, ajouter try_files $uri $uri/ /index.php?$args; à nginx.conf). Installez le plugin d'authentification JWT pour l'accès à l'API sécurisé.

Configuration de l'application angulaire:

1. Créez une nouvelle application angulaire: ng new wp-api
2. Installez la bibliothèque: cd wp-api && npm install wp-api-angular --save
3. Importez les modules nécessaires dans 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/', '');
}

Remplacer YOUR_DOMAIN_HERE par votre domaine WordPress. Ajoutez également les importations nécessaires à app.component.ts (y compris NgForm, HttpClientModule, Headers).

Authentification (JWT):

1. Ajouter une variable token à app.component.ts.
2. Créer un composant authentication (ng generate component authentication).
3. dans authentication.component.ts, créez un objet user et une méthode 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);
    }
  });
}

4. Créez un formulaire de connexion dans authentication.component.html.

Listing des utilisateurs:

1. Créer un composant user-list (ng generate component user-list).
2. dans user-list.component.ts, injecter WpApiUsers et utiliser getList() pour chercher les utilisateurs.

Travailler avec les messages (crud):

• Création de messages: Créer un composant post-new. Utilisez WpApiPosts.create() avec les en-têtes d'autorisation JWT.
• Postes de liste: Créer un composant post-list. Utilisez WpApiPosts.getList() pour récupérer les poteaux.
• Suppression des messages: Ajoutez un bouton de suppression à post-list. Utilisez WpApiPosts.delete() avec les en-têtes d'autorisation JWT.
• Posts de montage: Créer un composant post-edit. Utilisez WpApiPosts.update() avec les en-têtes d'autorisation JWT.

Conclusion:

Ce tutoriel fournit une base pour intégrer Angular à l'API WordPress REST. La bibliothèque wp-api-angular simplifie ce processus, permettant une gestion efficace du contenu WordPress dans vos applications angulaires. N'oubliez pas de gérer l'authentification en toute sécurité et de gérer efficacement les opérations asynchrones. Les extraits de code fournis et les explications devraient vous aider à créer des interactions plus complexes avec l'API WordPress.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!