Mean스텍 입문 (4) - Angular 서비스 설정-

(4) - Angular 서비스 설정- 

Angular는 Service기능을 통해, http모듈을 활용해서 DB에 있는 파일을 프론트에 전송한다. 싱글 페이지를 지향하는 Angular의 특성상 Http모듈로 DB 데이터를 뿌려주는 임시 창고를 만들어두고, 계속 사용하는 원리라고 이해하면 되겠다.

 

1. cmd창에서 해당 폴더로 가서 다음 명령어를 실행한다.

-> ng generate service Post

 

//결과 

-> src/app 폴더에 아래와 같이 service.ts 파일과 service.spec.ts 파일이 생성된다.

 

2. service.ts 파일 수정

->  import { Http } from '@angular/http';  모듈을 입력한다.

-> import 'rxjs/add/operator/map'; 모듈을 입력한다. rxjs는 서버의 데이터를 json형태로 가져오는 것을 의미한다.

 

-> @Injectable( )은 필수적으로 넣어줘야하는 건 아니지만, 웬만하면 넣어주는 게 좋다.

-> PostService 클래스를 작성해보자.

---

 @Injectable( )

export class PostService {

result : any;

constructor( private _http:Http) {  }

getPosts( ) {

return this._http.get("/api/posts")

.map(result => this.result = result.json( ));

}

}

---

-> result : any 는 타입스크립트 방식으로 result 배열을 선언해주는 것을 의미한다.

-> constructor에서 Http 모듈기능을 "_http" 변수에 담는다.

-> getPosts( ) 매서드를 생성하고, http모듈 기능 중에서 get방식으로 "api/posts"에 있는 json데이터를 받아온다. 

 

-> .map은 자바스크립트 문법인데, this._http.get('/api/posts')에서 받아온 데이터를 result 배열에 담아주는 양념을 친다는 의미라 해석할 수 있다.

 

-> result => this.result = result.json( ) , ES6에서 선보이는 새로운 문법이다.  화살표 함수를 예전 방식으로 수정하면 다음과 같다.

 

---

function( result ) {

this.result = result.json( );

}

---

-> .map( )으로 위에서 선언한 result 배열에 http모듈로 가지고 온 json 데이터를 맵핑(덮어씌움)한 코드이다.

 

// 코드정리

---

[post.service.ts ]

 

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

import 'rxjs/add/operator/http';

 

@Injectable( )
export class PostService {

   result : any;

  constructor(private _http:Http) {

           getPosts( ){
                     return this._http.get('/api/posts').map( result => this.result = result.json( ) );
               }

       }

}

---

 

3. app.module.ts, PostService 등록

 ng generate 명령어로 모든 angular 코어가 임포트 되지는 않는다. 따라서 아래에서 필요한 부분을 타이핑해서 넣어두자.(훗날 필요) 빨간색 부분은 PostService 부분이다.

 

---

[app.module.ts]

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { PostService } from './post.service';

 

 

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpModule,
    AppRoutingModule
  ],

  providers: [PostService],
  bootstrap: [AppComponent]
})
export class AppModule { }

---