WordPressのREST APIを利用するAngular2アプリをさっと動かしてみる。

Angular2を使ってWebサーバからデータを取得してみた | hiro345」で紹介したように、Angular2だとREST APIからデータを取得するのは簡単です。ということでWordPressのREST APIからデータ取得をしてみましょう。

準備

Angular2を使ってWebサーバからデータを取得してみた | hiro345」の下記のところまで進めてHello Angular2が表示されるようにしておいてください。また、tsファイルは、quickstart/appにありますから、そこを見てください。

$ npm start

app.service.ts

まず、app.service.tsを作成します。(wordpress url)には例えば、http://example.jp/wpのように、WordPressのURLを指定します。WordPressの投稿を取得するにはapi_url + ‘/posts’へアクセスします。返却値はJSONなので、res.json()でオブジェクトへ変換しています。

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Injectable()
export class AppService {

  private api_url = "(wordpress url)/wp-json/wp/v2";

  constructor(private http: Http) { }

  getPosts(): Observable<any> {
    return this.http
    .get(this.api_url + '/posts')
    .map((res: Response) => res.json());
  }
}

app.module.ts

次に、モジュールを有効にするために、app.module.tsを修正します。HttpModuleを追加しています。

import { NgModule }      from '@angular/core';
import { HttpModule }    from "@angular/http";
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }  from './app.component';

@NgModule({
  imports:      [ BrowserModule, HttpModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

app.component.ts

次に、コンポーネントを修正します。app.service.tsからAppServiceをimportして、テンプレートで投稿の情報を表示するようにしています。providersで先ほど作成したAppServiceを指定して利用できるようにしています。AppComponentはOnInitインタフェースを実装するので、@angular/coreからOnInitをimportしている点にも注意してください。getPosts()では、this.appService.getPosts()で取得したObservableオブジェクトに対して、「res => { this.posts = res; }」をsubscribe()で登録しています。これにより、データが取得できた時点で、「this.posts = res;」の代入が実行されることになります。

import { Component, OnInit } from '@angular/core';
import { AppService } from './app.service';

@Component({
  selector: 'my-app',
  template: `<ul>
    <li *ngFor="let post of posts">
      <h2>{{ post.title.rendered }}</h2>
      <div [innerHTML]="post.content.rendered"></div>
    </li>
    </ul>`,
  providers: [AppService],
})
export class AppComponent implements OnInit {
  posts:any;

  constructor(private appService: AppService) { }

  getPosts() {
    this.appService
     .getPosts()
     .subscribe(res => {
       this.posts = res;
     });
  }

  ngOnInit() {
    this.getPosts();
  }
}

動作確認

http://localhost:3000/ へアクセスするとブログの記事が表示されているはずです。動かない場合は、「$ npm start」をやり直してみましょう。TypeScriptからJavaScriptへ変換するときに問題がある場合は、それでエラーが表示されるはずです。そこのエラーがなくなってからブラウザで表示をしても、まだ表示できない場合はブラウザの開発ツールで確認をしましょう。

広告:

同じタグの記事: Angular2
同じタグの記事: WordPress
同じカテゴリの記事: Linux
関連書籍: WordPress