Menyambung Angular dan API WordPress dengan WP-API-Angular

Tutorial ini menunjukkan menggunakan perpustakaan wp-api-angular untuk menyambungkan aplikasi Angular 2 dengan API REST WordPress. Perpustakaan menyokong sumber utama WP (pengguna, jawatan, komen, media, taksonomi). Kami akan membina ciri -ciri yang mempamerkan kemudahan penggunaannya: Pengesahan JWT, Pengguna dan Penyenaraian Pos, dan Post CRUD (Buat, Baca, Kemas kini, Padam). Kod sumber lengkap adalah pada GitHub. Walaupun tutorial ini menggunakan Angular 5, konsep digunakan untuk sudut 2.

Konsep Utama:

lancar Angular 2 dan WordPress REST API Integration menggunakan
• . wp-api-angular
Persediaan WordPress: Membolehkan permalinks dan memasang plugin pengesahan JWT untuk akses API selamat.
Pelaksanaan Angular: Pengesahan JWT, Penyenaraian Pengguna, dan Operasi CRUD.
• pengendalian API asynchronous dengan pemerhatian dan janji -janji dalam sudut.
• mengakses API WordPress penuh (pengguna, jawatan, komen, media) untuk meningkatkan aplikasi sudut.

Menyediakan:

Tutorial ini menggunakan contoh WordPress yang dihoskan sendiri. Dayakan permalinks (lihat codex WordPress untuk arahan; untuk nginx, tambah

ke

). Pasang plugin pengesahan JWT untuk akses API selamat. try_files $uri $uri/ /index.php?$args; nginx.conf

Persediaan Aplikasi Angular:

Buat aplikasi sudut baru:

1. ng new wp-api Pasang perpustakaan:
2. cd wp-api && npm install wp-api-angular --save import modul yang diperlukan dalam
:
3. src/app/app.module.ts

Gantikan dengan domain WordPress anda. Juga, tambahkan import yang diperlukan untuk

<code class="language-typescript">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/', '');
}</code>

(termasuk

, YOUR_DOMAIN_HERE, app.component.ts). NgForm HttpClientModule Headers Pengesahan (JWT):

tambah pembolehubah

ke

.
1. token Buat komponen app.component.ts (
).
2. authentication dalam ng generate component authentication, buat objek
dan kaedah
3. : authentication.component.ts user auth()

Buat borang log masuk dalam

<code class="language-typescript">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);
    }
  });
}</code>

.

4. authentication.component.html
Penyenaraian Pengguna:

Buat komponen

(

).
1. user-list dalam ng generate component user-list, suntikan
dan gunakan
2. untuk mengambil pengguna. user-list.component.ts WpApiUsers getList()
Bekerja dengan jawatan (CRUD):

• Mencipta jawatan: Buat komponen post-new. Gunakan WpApiPosts.create() dengan tajuk kebenaran JWT.
• Penyenaraian jawatan: Buat komponen post-list. Gunakan WpApiPosts.getList() untuk mengambil jawatan.
• Menghapus jawatan: Tambah butang padam ke post-list. Gunakan WpApiPosts.delete() dengan tajuk kebenaran JWT.
• Penyuntingan siaran: Buat komponen post-edit. Gunakan WpApiPosts.update() dengan tajuk kebenaran JWT.

Kesimpulan:

Tutorial ini menyediakan asas untuk mengintegrasikan Angular dengan API REST WordPress. Perpustakaan wp-api-angular memudahkan proses ini, yang membolehkan pengurusan kandungan WordPress yang cekap dalam aplikasi sudut anda. Ingatlah untuk mengendalikan pengesahan dengan selamat dan menguruskan operasi tak segerak dengan berkesan. Coretan kod dan penjelasan yang disediakan harus membantu anda membina interaksi yang lebih kompleks dengan API WordPress.

Atas ialah kandungan terperinci Menyambung Angular dan API WordPress dengan WP-API-Angular. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!