Ce didacticiel démontre à l'aide 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, liste des utilisateurs et publiques, et publiez des opérations CRUD (créer, lire, mettre à jour, supprimer). Le code source complet est sur GitHub. Alors que ce tutoriel utilise Angular 5, les concepts s'appliquent à Angular 2.

Concepts clés:

• Seamless Angular 2 et WordPress REST API Intégration en utilisant wp-api-angulaire .
• Configuration de 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 publication.
• Gestion de l'API asynchrone avec des observables et des promesses en angulaire.
• accéder à 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 permalinks (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:

Créez une nouvelle application angulaire:
1. ng nouveau WP-API
Installez la bibliothèque:
2. CD WP-API && npm Installer WP-API-AGULAR --Save
Importez les modules nécessaires dans
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/', '');
}

votre_domain_here par votre domaine WordPress. Ajoutez également les importations nécessaires à app ..T.ts (y compris ngform , httpclientmodule , en-têtes ).

authentification (jwt):

Ajouter une variable
1. token à app .ponent.ts .
Créer un composant
2. Authentification ( ng Générer l'authentification du composant ).
dans
3. authentification.component.ts , créez un objet user et un auth () méthode:

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

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

Listing des utilisateurs:

Créer un composant
1. user-list ( ng Générer le composant utilisateur-list ).
dans
2. user-list.component.ts , injecter wpapiusers et utiliser getList () pour récupérer les utilisateurs.

Travailler avec les messages (crud):

• Création de messages: Créer un composant post-new . Utilisez wpapipost.create () avec les en-têtes d'autorisation JWT.
• Listing Posts: Créer un composant post-list . Utilisez wpapipost.getList () pour récupérer les messages.
• Suppression des messages: Ajoutez un bouton de suppression à post-list . Utilisez wpapipost.delete () avec les en-têtes d'autorisation JWT.
• Édition de messages: Créer un composant post-édit . Utilisez wpapipost.update () avec les en-têtes d'autorisation jwt.

Conclusion:

wp-api-angulaire 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.