AngularとSpring Bootで商品一覧画面を作ってみる

$ ng new itemListDisplaySample

$ npm install --save @angular/cdk
$ npm install --save @angular/material @angular/animations
$ npm install --save hammerjs

$ npm install https://github.com/angular/flex-layout-builds.git

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = '商品一覧画面';
}

<div>
  <h1>
    {{title}}
  </h1>
</div>
<!-- DashboardComponent読み込み -->
<my-dashboard></my-dashboard>

/*テーマ設定*/
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

export class Item {
    price : number;
    name : String;
    imgPath : String;
}

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 {Component, OnInit} from "@angular/core";
import {Item} from "../../item";
import {ItemService} from "../../services/item.service";

@Component({
    selector: 'my-dashboard',
    templateUrl: './dashboard.component.html'
})

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;
    }
}

<md-card>
  <md-card-content>
    <h2 class="example-h2">商品一覧画面コンポーネント</h2>
    <div fxLayoutWrap fxLayoutAlign="space-around center">
      <md-card *ngFor = "let item of itemList" class="example-card" fxFlex="48%" fxFlex.xs="100%">
        <md-card-header>
          <md-card-title>{{item.name}}</md-card-title>
          <md-card-subtitle>これは「{{item.name}}」です</md-card-subtitle>
        </md-card-header>
        <img md-card-image src="http://localhost:8080/{{item.imgPath}}">
        <md-card-content>
          <p>この「{{item.name}}」は{{item.price}}円です。</p>
        </md-card-content>
        <md-card-actions>
          <button md-button>詳細情報</button>
          <button md-button>削除</button>
        </md-card-actions>
      </md-card>
    </div>
  </md-card-content>
</md-card>

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule,JsonpModule} from '@angular/http';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import 'hammerjs';
import {MdCheckboxModule,MdRadioModule,MdCardModule,MdInputModule,MdButtonModule} from '@angular/material';
import {FlexLayoutModule} from "@angular/flex-layout";

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

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

@NgModule({
  declarations: [
    AppComponent,
    DashboardComponent
  ],
  imports: [
    BrowserModule,
    HttpModule,
    JsonpModule,
    BrowserAnimationsModule,
    MdCheckboxModule,
    MdRadioModule,
    MdCardModule,
    MdInputModule,
    MdButtonModule,
    FlexLayoutModule
  ],
  providers: [
    ItemService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

$ cd itemListDisplaySample

$ ng serve