【Angular入門（8）】Rest APIをコールしてみる

package com.example;

import java.io.IOException;

import org.springframework.context.ApplicationContext;
import org.springframework.context.annotation.Bean;
import org.springframework.http.converter.json.Jackson2ObjectMapperBuilder;
import org.springframework.http.converter.json.MappingJackson2HttpMessageConverter;
import org.springframework.http.converter.json.MappingJacksonValue;
import org.springframework.web.bind.annotation.ControllerAdvice;
import org.springframework.web.servlet.mvc.method.annotation.AbstractJsonpResponseBodyAdvice;

import com.fasterxml.jackson.core.JsonGenerator;
import com.fasterxml.jackson.databind.ObjectMapper;

@ControllerAdvice
public class JsonpAdvice extends AbstractJsonpResponseBodyAdvice {
    public JsonpAdvice() {
        super("callback");
    }
    @Bean
    public MappingJackson2HttpMessageConverter MappingJackson2HttpMessageConverter(ApplicationContext ctx) {
        ObjectMapper mapper = Jackson2ObjectMapperBuilder.json().applicationContext(ctx).build();
        return new MappingJackson2HttpMessageConverter(mapper) {
            @Override
            protected void writePrefix(JsonGenerator generator, Object obj) throws IOException {
                if (!(obj instanceof MappingJacksonValue))
                    return;
                String funcName = ((MappingJacksonValue) obj).getJsonpFunction();
                if (funcName != null)
                    generator.writeRaw(funcName + "(");
            }
        };
    }
}

import { Injectable }    from '@angular/core';
import { Headers, Http, Jsonp, RequestOptionsArgs, RequestOptions, URLSearchParams} from '@angular/http';
import {Observable} from  "rxjs/Observable";
import "rxjs/add/operator/map";

import { Item } from '../item';

@Injectable()
export class ItemService {

  //RestAPIのURL
  private itemsUrl = 'http://localhost:8080/api/items';
  //JSONPコールバック関数名(Angular固有値）
  CALLBACK = 'JSONP_CALLBACK';
  

  //コンストラクタで利用するモジュールをインスタンス化
  constructor(private http: Http, private jsonp: Jsonp) { }


  //商品一覧取得
  getItems(): Observable<Item[]> {
    //リクエストパラメータセット
    let option : RequestOptions;
    option = this.setHttpGetParam(this.itemsUrl);

    //レスポンス返却
    return this.jsonp.request(this.itemsUrl, option)
      .map((response) => {
        let content;
        let obj = response.json();
        content = {
          error: null,
          data: obj
        };
        console.dir(content);
        return content;

      });
               
  }


  //Http(Get)通信のリクエストパラメータをセットする
  private setHttpGetParam(url: string): RequestOptions {
    let param = new URLSearchParams();
    param.set("callback", this.CALLBACK);
    let options: RequestOptionsArgs = {
      method: "get",
      url: url,
      search: param
    };
    return new RequestOptions(options);
  }

}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
//RestAPIコールに利用するモジュール追加
import { HttpModule,JsonpModule} from '@angular/http';

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

//商品情報取得用serviceを追加
import {ItemService} from './services/item.service';

@NgModule({
  declarations: [
    AppComponent,
    //DashboardComponentを読み込めるように追加
    DashboardComponent
  ],
  imports: [
    BrowserModule,
    //RestAPIコールに利用するモジュール追加
    HttpModule,
    JsonpModule
  ],
  providers: [
    //商品情報取得用serviceをDIできるように追加
    ItemService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

import {Component, OnInit} from "@angular/core";
import {Item} from "./item";
import {ItemService} from "./services/item.service";

@Component({
    selector: "my-dashboard",
    template: `
        <ul>
            <li *ngFor = "let item of itemList">
                {{item.name}}:{{item.price}}円
            </li>
        </ul>
    `,

})

export class DashboardComponent implements OnInit{

    //コンポーネント生成時の処理
    constructor(private itemService: ItemService){}

    //商品リスト
    itemList : Item[];

    //画面初期表示イベント処理
    ngOnInit(): void {
        this.itemService.getItems().subscribe(
            result => this.setItems(result),
            error => alert('通信エラー' + error)
        );
    }

    //Web APIから取得したデータを商品リストにセットする
    setItems(result): void {
        if(result.error) {
            alert('Web APIエラー' + result.message);
        }

        this.itemList = result.data;
    }
}

> ng serve