Anschließend Angular und die WordPress-API mit WP-API-Angular anschließen

Dieses Tutorial zeigt die Verwendung der wp-api-angular -Bibliothek, um Angular 2 -Anwendungen mit der WordPress -REST -API zu verbinden. Die Bibliothek unterstützt wichtige WP -Ressourcen (Benutzer, Beiträge, Kommentare, Medien, Taxonomien). Wir erstellen Funktionen, in denen die Benutzerfreundlichkeit vorgestellt wird: JWT -Authentifizierung, Benutzer- und Postlistung sowie Post -CRUD -Operationen (Erstellen, Lesen, Aktualisieren, Löschen). Der vollständige Quellcode befindet sich auf GitHub. Während dieses Tutorial Angular 5 verwendet, gelten die Konzepte für Angular 2.

Schlüsselkonzepte:

• nahtlose Winkel 2 und WordPress Rest API -Integration mit wp-api-angular.
• WordPress -Setup: Aktivieren von Permalinks und Installation des JWT -Authentifizierungs -Plugins für den sicheren API -Zugriff.
• Winkelimplementierung: JWT -Authentifizierung, Benutzerauflistung und Post -CRUD -Operationen.
• asynchrones API -Handling mit Observablen und Versprechen in Angular.
• Zugriff auf die vollständige WordPress -API (Benutzer, Beiträge, Kommentare, Medien), um Winkelanwendungen zu verbessern.

Einrichten:

Dieses Tutorial verwendet eine selbst gehostete WordPress-Instanz. Aktivieren Sie Permalinks (siehe WordPress -Codex für Anweisungen; Für Nginx fügen Sie try_files $uri $uri/ /index.php?$args; zu nginx.conf hinzu). Installieren Sie das JWT -Authentifizierungs -Plugin für den sicheren API -Zugriff.

Winkelanwendungs ​​-Setup:

1. Erstellen Sie eine neue Winkelanwendung: ng new wp-api
2. Installieren Sie die Bibliothek: cd wp-api && npm install wp-api-angular --save
3. importieren die notwendigen Module in 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/', '');
}

Ersetzen Sie YOUR_DOMAIN_HERE durch Ihre WordPress -Domäne. Fügen Sie auch die erforderlichen Importe zu app.component.ts hinzu (einschließlich NgForm, HttpClientModule, Headers).

Authentifizierung (JWT):

1. Fügen Sie eine token -Variable zu app.component.ts.
hinzufügen
2. Erstellen Sie eine authentication -Komponente (ng generate component authentication).
3. In authentication.component.ts erstellen Sie ein user -Objekt und eine auth() Methode:

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. Erstellen Sie ein Anmeldeformular in authentication.component.html.

Benutzer auflisten:

1. Erstellen Sie eine user-list -Komponente (ng generate component user-list).
2. in user-list.component.ts, inject WpApiUsers und verwenden Sie getList(), um Benutzer abzurufen.

Arbeiten mit Posts (CRUD):

• Erstellen Beiträge: Erstellen Sie eine post-new -Komponente. Verwenden Sie WpApiPosts.create() mit JWT -Autorisierungsheadern.
• Auflistung Beiträge: Erstellen Sie eine post-list -Komponente. Verwenden Sie WpApiPosts.getList(), um Beiträge abzurufen.
• Beiträge löschen: Fügen Sie post-list eine Schaltfläche Löschen hinzu. Verwenden Sie WpApiPosts.delete() mit JWT -Autorisierungsheadern.
• Bearbeiten von Beiträgen: Erstellen Sie eine post-edit -Komponente. Verwenden Sie WpApiPosts.update() mit JWT -Autorisierungsheadern.

Schlussfolgerung:

Dieses Tutorial bietet eine Grundlage für die Integration von Angular in die WordPress Rest -API. Die wp-api-angular Bibliothek vereinfacht diesen Prozess und ermöglicht die effiziente Verwaltung von WordPress -Inhalten in Ihren Winkelanwendungen. Denken Sie daran, die Authentifizierung sicher zu verarbeiten und asynchrone Operationen effektiv zu verwalten. Die bereitgestellten Code -Ausschnitte und Erklärungen sollten Ihnen helfen, komplexere Interaktionen mit der WordPress -API zu erstellen.

Das obige ist der detaillierte Inhalt vonAnschließend Angular und die WordPress-API mit WP-API-Angular anschließen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!