Dieses Tutorial zeigt die Verwendung der Bibliothek wp-api-angular , 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 werden Funktionen erstellen, 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:

• Seamless Angular 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.
• Angular Implementierung: JWT -Authentifizierung, Benutzerauflistung und Post -Crud -Operationen.
• Asynchrones API -Umgang mit Observablen und Versprechen in Angular.
• Zugriff auf die vollständige WordPress -API (Benutzer, Beiträge, Kommentare, Medien), um eckige Anwendungen zu verbessern.

aufstellen:

Dieses Tutorial verwendet eine selbst gehostete WordPress-Instanz. Aktivieren Sie Permalinks (siehe den 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.

Angular Application Setup:

Erstellen Sie eine neue Angular-Anwendung:
1. ng neu wp-api
Installieren Sie die Bibliothek:
2. CD wp-api && npm install WP-api-angular ---save
Importieren notwendige Module in
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/', '');
}

ersetzen Sie

your_domain_here durch Ihre WordPress -Domain. Fügen Sie auch die notwendigen Importe zu app.component.ts (einschließlich ngform , httpclientModule , headers ) hinzu.

authentication (jwt):

fügen Sie eine

token
1. variable zu app.component.ts . hinzu erstellen Sie eine
authentication
2. component ( ng generieren Komponenten Authentifizierung ). in
authentication.component.ts
3. , erstellen Sie ein user objekt und an auth () methode:

auth () { this.http.post ('http: // your_domain/wp-json/jwt-auth/v1/token', { Benutzername: this.user.login, Passwort: this.user.Password }). abonnieren (data => { if (data ['token']) { this.token = data ['token']; this.tokenchange.emit (this.token); } }); }

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

Erstellen Sie ein Login -Formular in

authentication.component.html
4. .

Listing Benutzer:

erstellen Sie eine

userlist
1. component ( ng generieren Komponenten Benutzerlist ). in
user-list.component.ts
2. , inject wpapiusser und verwenden Sie getList () , um Benutzer zu holen. . .
.

arbeite mit posts (crud):

• posts erstellen: erstellen eine post-new component. Verwenden Sie wpapiposts.create () mit jwt Autorisierungsheadern.
• listing posts: erstellen eine postlist Komponente. Verwenden Sie wpapiposts.getList () um Beiträge zu holen.
• löschen Beiträge: fügen Sie postlist eine Schaltfläche Löschen hinzu. Verwenden Sie wpapiposts.delete () mit jwt Autorisierungsheadern.
• bearbeiten posting: erstellen eine post-edit component. Verwenden Sie wpapiposts.update () mit jwt Autorisierungsheadern.

Abschluss:

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 eine effiziente Verwaltung von WordPress-Inhalten in Ihren Angularanwendungen. 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.