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!