やりかた

モジュールのインポート

まずは、app.module.tsにhttpモジュールを追記し、API呼び出しに使用するモジュールをインポートします。

/* 省略 */
import { HttpModule } from '@angular/http'; // 追記

@NgModule({
  declarations: [
    MyApp,
    HelloIonicPage,
    ItemDetailsPage,
    ListPage,
    PageIndexPage,
    PageShowPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HttpModule // 追記
  ],
/* 省略 */
})
export class AppModule {}

API呼び出し処理の実装

モジュールをインポートしたらコンポーネント側でAPI呼び出し処理を実装します。

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { PageShowPage } from '../page-show/page-show';
import { Http } from '@angular/http';  // 追記

/**
 * Generated class for the PageIndexPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
  
@Component({
  selector: 'page-page-index',
  templateUrl: 'page-index.html',
})
export class PageIndexPage {
  pages = [];
  result = '';
  api_url = 'https://moook.herokuapp.com/pages.json';

  constructor(public navCtrl: NavController, public navParams: NavParams, private http: Http) {
    this.get_pages_data();
  }

  get_pages_data(){
　　 // API呼び出し処理
    this.http.get(this.api_url).subscribe(
　    // 成功時
      respons => {
        let result = respons.text();
        this.pages = JSON.parse(result || null);
      },
      // 失敗時
      error => {
        let result = 'faild : '+ error.statusText;
        console.log(result);
      }
    );
  }
}