[IONIC] angular http 통신

ionic 차례

src/app/app.module.ts

....
import { HttpClientModule } from '@angular/common/http';

@NgModule({
    ....
    imports: [
        ....
        HttpClientModule,
    ],
    ....
})
....

 

interface 생성

$ ionic g interface interface

 

src/app/interface.ts

/**
 * 코드
 */
export interface ICommonCode {
    commonCd: string
}

 

 

service 생성하기

$ ionic g service api

src/app/api.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { ICommonCode } from './interface';

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  constructor(
    private httpClient: HttpClient
  ) { }

  /**
   * 공통코드 불러오기
   */
  getCommonData(param: String): Observable<ICommonCode[]> {
    return this.httpClient.get<ICommonCode[]>('/api/getData.do',
      {}
    ).pipe();
  }
}

src/app/main.page.ts

import { Component, OnInit } from '@angular/core';
import { ApiService } from '../api.service';

@Component({
    selector: 'app-main',
    templateUrl: './main.page.html',
    styleUrls: ['./main.page.scss'],
})
export class Tab4Page implements OnInit {

    constructor(
        private apiService: ApiService,
    ) { }

    ngOnInit() {
        this.getData()
    }

    getData() {
        this.apiService
            .getCommonData('param')
            .subscribe(res => {
                console.log(res)
            })
    }
}

 

ionic 차례