DataService

1. app.module.ts 위에 import 선언

import { HttpModule } from '@angular/http';

import { DataService } from '../services/data.service'; // 아래 json 데이터 불러오는 ts를 만든다.

2. app.module.ts 에서 NgModule imports에 HttpModule를 넣고, providers에 DataService를 넣는다.

@NgModule({

    imports: [

        BrowserModule, HttpModule, BrowserAnimationsModule,

        FormsModule,

        HttpClientModule,

        RouterModule.forRoot(appRoutes, { useHash: true }),

    ],

    declarations: [],

    

    providers: [DataService],

    bootstrap: [AppComponent]

})

3. data.service.ts 불러올 json 데이터를 설정

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

import { Http } from '@angular/http';

import 'rxjs/add/operator/map';

@Injectable()

export class DataService {

constructor(public http:Http) {

console.log('data.service : constructor');

}

getPosts() {

return this.http.get('/assets/json/test.json').map(res => res.json());

}

}

4. 해당 ts파일

import { DataService } from '../../services/data.service'; // 3번의 경로를 넣음

export class AnimationsComponent implements OnInit{

    // json 데이터 불러오는 부분

    name:string = 'airwindtree'

    posts:Post[];

    constructor(private dtservice:DataService){

        console.log('data.service : constructor');

    }

    ngOnInit() {

        console.log('data.service : ngOnInit');

        this.dtservice.getPosts().subscribe((posts) => {

            //console.log( posts );

            this.posts = posts;

        });            

    }

}

interface Post {

    id:number,

    title:string,

    body:string,

    userId:number

}