{"id":18946,"date":"2017-01-21T12:00:21","date_gmt":"2017-01-21T03:00:21","guid":{"rendered":"http:\/\/www.sssg.org\/blogs\/hiro345\/?p=18946"},"modified":"2017-01-21T10:43:54","modified_gmt":"2017-01-21T01:43:54","slug":"wordpress%e3%81%aerest-api%e3%82%92%e5%88%a9%e7%94%a8%e3%81%99%e3%82%8bangular2%e3%82%a2%e3%83%97%e3%83%aa%e3%82%92%e3%81%95%e3%81%a3%e3%81%a8%e5%8b%95%e3%81%8b%e3%81%97%e3%81%a6%e3%81%bf%e3%82%8b","status":"publish","type":"post","link":"https:\/\/www.hiro345.net\/blogs\/hiro345\/archives\/18946.html","title":{"rendered":"WordPress\u306eREST API\u3092\u5229\u7528\u3059\u308bAngular2\u30a2\u30d7\u30ea\u3092\u3055\u3063\u3068\u52d5\u304b\u3057\u3066\u307f\u308b\u3002"},"content":{"rendered":"

\u300cAngular2\u3092\u4f7f\u3063\u3066Web\u30b5\u30fc\u30d0\u304b\u3089\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3057\u3066\u307f\u305f | hiro345<\/a>\u300d\u3067\u7d39\u4ecb\u3057\u305f\u3088\u3046\u306b\u3001Angular2\u3060\u3068REST API\u304b\u3089\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3059\u308b\u306e\u306f\u7c21\u5358\u3067\u3059\u3002\u3068\u3044\u3046\u3053\u3068\u3067WordPress\u306eREST API\u304b\u3089\u30c7\u30fc\u30bf\u53d6\u5f97\u3092\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002
\n<\/p>\n

\u6e96\u5099<\/h2>\n

\u300cAngular2\u3092\u4f7f\u3063\u3066Web\u30b5\u30fc\u30d0\u304b\u3089\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3057\u3066\u307f\u305f | hiro345<\/a>\u300d\u306e\u4e0b\u8a18\u306e\u3068\u3053\u308d\u307e\u3067\u9032\u3081\u3066Hello Angular2\u304c\u8868\u793a\u3055\u308c\u308b\u3088\u3046\u306b\u3057\u3066\u304a\u3044\u3066\u304f\u3060\u3055\u3044\u3002\u307e\u305f\u3001ts\u30d5\u30a1\u30a4\u30eb\u306f\u3001quickstart\/app\u306b\u3042\u308a\u307e\u3059\u304b\u3089\u3001\u305d\u3053\u3092\u898b\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n

\r\n$ npm start\r\n<\/pre>\n
app.service.ts<\/h2>\n
\u307e\u305a\u3001app.service.ts\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002(wordpress url)\u306b\u306f\u4f8b\u3048\u3070\u3001http:\/\/example.jp\/wp\u306e\u3088\u3046\u306b\u3001WordPress\u306eURL\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002WordPress\u306e\u6295\u7a3f\u3092\u53d6\u5f97\u3059\u308b\u306b\u306fapi_url + ‘\/posts’\u3078\u30a2\u30af\u30bb\u30b9\u3057\u307e\u3059\u3002\u8fd4\u5374\u5024\u306fJSON\u306a\u306e\u3067\u3001res.json()\u3067\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3078\u5909\u63db\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n
\r\nimport { Injectable } from '@angular\/core';\r\nimport { Http, Response } from '@angular\/http';\r\nimport { Observable } from 'rxjs\/Observable';\r\nimport 'rxjs\/add\/operator\/map';\r\n\r\n@Injectable()\r\nexport class AppService {\r\n\r\n  private api_url = "(wordpress url)\/wp-json\/wp\/v2";\r\n\r\n  constructor(private http: Http) { }\r\n\r\n  getPosts(): Observable<any> {\r\n    return this.http\r\n    .get(this.api_url + '\/posts')\r\n    .map((res: Response) => res.json());\r\n  }\r\n}\r\n<\/pre>\n
app.module.ts<\/h2>\n
\u6b21\u306b\u3001\u30e2\u30b8\u30e5\u30fc\u30eb\u3092\u6709\u52b9\u306b\u3059\u308b\u305f\u3081\u306b\u3001app.module.ts\u3092\u4fee\u6b63\u3057\u307e\u3059\u3002HttpModule\u3092\u8ffd\u52a0\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n
\r\nimport { NgModule }      from '@angular\/core';\r\nimport { HttpModule }    from "@angular\/http";\r\nimport { BrowserModule } from '@angular\/platform-browser';\r\n\r\nimport { AppComponent }  from '.\/app.component';\r\n\r\n@NgModule({\r\n  imports:      [ BrowserModule, HttpModule ],\r\n  declarations: [ AppComponent ],\r\n  bootstrap:    [ AppComponent ]\r\n})\r\nexport class AppModule { }\r\n<\/pre>\n
app.component.ts<\/h2>\n
\u6b21\u306b\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4fee\u6b63\u3057\u307e\u3059\u3002app.service.ts\u304b\u3089AppService\u3092import\u3057\u3066\u3001\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3067\u6295\u7a3f\u306e\u60c5\u5831\u3092\u8868\u793a\u3059\u308b\u3088\u3046\u306b\u3057\u3066\u3044\u307e\u3059\u3002providers\u3067\u5148\u307b\u3069\u4f5c\u6210\u3057\u305fAppService\u3092\u6307\u5b9a\u3057\u3066\u5229\u7528\u3067\u304d\u308b\u3088\u3046\u306b\u3057\u3066\u3044\u307e\u3059\u3002AppComponent\u306fOnInit\u30a4\u30f3\u30bf\u30d5\u30a7\u30fc\u30b9\u3092\u5b9f\u88c5\u3059\u308b\u306e\u3067\u3001@angular\/core\u304b\u3089OnInit\u3092import\u3057\u3066\u3044\u308b\u70b9\u306b\u3082\u6ce8\u610f\u3057\u3066\u304f\u3060\u3055\u3044\u3002getPosts()\u3067\u306f\u3001this.appService.getPosts()\u3067\u53d6\u5f97\u3057\u305fObservable\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306b\u5bfe\u3057\u3066\u3001\u300cres => { this.posts = res; }\u300d\u3092subscribe()\u3067\u767b\u9332\u3057\u3066\u3044\u307e\u3059\u3002\u3053\u308c\u306b\u3088\u308a\u3001\u30c7\u30fc\u30bf\u304c\u53d6\u5f97\u3067\u304d\u305f\u6642\u70b9\u3067\u3001\u300cthis.posts = res;\u300d\u306e\u4ee3\u5165\u304c\u5b9f\u884c\u3055\u308c\u308b\u3053\u3068\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n
\r\nimport { Component, OnInit } from '@angular\/core';\r\nimport { AppService } from '.\/app.service';\r\n\r\n@Component({\r\n  selector: 'my-app',\r\n  template: `<ul>\r\n    <li *ngFor="let post of posts">\r\n      <h2>{{ post.title.rendered }}<\/h2>\r\n      <div [innerHTML]="post.content.rendered"><\/div>\r\n    <\/li>\r\n    <\/ul>`,\r\n  providers: [AppService],\r\n})\r\nexport class AppComponent implements OnInit {\r\n  posts:any;\r\n\r\n  constructor(private appService: AppService) { }\r\n\r\n  getPosts() {\r\n    this.appService\r\n     .getPosts()\r\n     .subscribe(res => {\r\n       this.posts = res;\r\n     });\r\n  }\r\n\r\n  ngOnInit() {\r\n    this.getPosts();\r\n  }\r\n}\r\n<\/pre>\n
\u52d5\u4f5c\u78ba\u8a8d<\/h2>\n
http:\/\/localhost:3000\/ \u3078\u30a2\u30af\u30bb\u30b9\u3059\u308b\u3068\u30d6\u30ed\u30b0\u306e\u8a18\u4e8b\u304c\u8868\u793a\u3055\u308c\u3066\u3044\u308b\u306f\u305a\u3067\u3059\u3002\u52d5\u304b\u306a\u3044\u5834\u5408\u306f\u3001\u300c$ npm start\u300d\u3092\u3084\u308a\u76f4\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002TypeScript\u304b\u3089JavaScript\u3078\u5909\u63db\u3059\u308b\u3068\u304d\u306b\u554f\u984c\u304c\u3042\u308b\u5834\u5408\u306f\u3001\u305d\u308c\u3067\u30a8\u30e9\u30fc\u304c\u8868\u793a\u3055\u308c\u308b\u306f\u305a\u3067\u3059\u3002\u305d\u3053\u306e\u30a8\u30e9\u30fc\u304c\u306a\u304f\u306a\u3063\u3066\u304b\u3089\u30d6\u30e9\u30a6\u30b6\u3067\u8868\u793a\u3092\u3057\u3066\u3082\u3001\u307e\u3060\u8868\u793a\u3067\u304d\u306a\u3044\u5834\u5408\u306f\u30d6\u30e9\u30a6\u30b6\u306e\u958b\u767a\u30c4\u30fc\u30eb\u3067\u78ba\u8a8d\u3092\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n
\u5e83\u544a\uff1a
\n