04. MVC 패턴으로 Http request

export * from './[모델명].model';

export interface [모델명] {
  [변수이름]: [자료형];
  userNo: number;
  startDt: Date;
  timeDivision: string;
  ...
}

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import {Observable} from 'rxjs/Observable'; <!-- Obserable을 사용하여 비동기통신 -->
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/delay';

import {Schedule} from '../models'; <!-- 위에서 생선한 모델명을 {}안에 입력 -->

@Injectable()
export class ScheduleService {
    constructor(public http: Http) {}
    
    getSchedules(): Observable<Schedule[]> {
        return this.http
          .get('http://localhost/schedule/selectScheduleList.do') <!-- 호출한 url 입력-->
          .delay(2000)
          .map((res: Response) => res.json());
    }
}

export * from './[추가한 서비스파일명]';

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { SchedulePage } from '../pages/schedule/schedule';

import { ScheduleService } from '../providers'; <!-- 추가한 서비스경로를 기입 -->

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    SchedulePage
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    SchedulePage
  ],
  providers: [
    ScheduleService, <!-- 추가한 서비스를 기입 -->
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

import { Component, OnInit } from '@angular/core'; <!-- OnInit 추가 -->
import { NavController, Refresher, NavParams } from 'ionic-angular'; <!-- Refresher 추가 -->

import {ScheduleService} from '../../providers'; <!-- 서비스와 모델 추가 -->
import {Schedule} from '../../models';

@Component({
  selector: 'page-schedule',
  templateUrl: 'schedule.html'
})
export class SchedulePage implements OnInit {
    schedules: Schedule[] = [];	<!-- json 호출 결과를 담을 변수 추가 -->
    loading: boolean;
    constructor(
        private scheduleService: ScheduleService, <!-- 서비스 생성자에 추가 -->
        public navCtrl: NavController,
        public navParams: NavParams
    ) {}
    
    ngOnInit() {
        this.loading = true;
        const subscription = this.scheduleService.getSchedules().subscribe(schedules => {
          this.schedules = schedules;
          this.loading = false;
          subscription.unsubscribe();
        }, () => this.loading = false);
    }

    doRefresh(refresher: Refresher) {
        const subscription = this.scheduleService.getSchedules().subscribe(schedules => {
          this.schedules = schedules;
          refresher.complete()
          subscription.unsubscribe();
        }, () => refresher.complete());
    }
}