「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へ変換するときに問題がある場合は、それでエラーが表示されるはずです。そこのエラーがなくなってからブラウザで表示をしても、まだ表示できない場合はブラウザの開発ツールで確認をしましょう。
広告：