Programmazione di Ku0re

Angular 4 Tutorial Undicesimo) Angular 4 HeroEditor - 참고 부록 : in-memory web api 본문

Programmazione/Angular

Angular 4 Tutorial Undicesimo) Angular 4 HeroEditor - 참고 부록 : in-memory web api

ku0re kuore 2017. 5. 12. 18:35

이 글은 단순히 Angular 공식사이트의 Tutorial을 보고 Angular를 공부하면서 정리한 글입니다.

공부하실 분은 Angular 공식사이트의 Tutorial을 보시고 제 포스팅은 참고만 하세요! :)




Angular 4 HeroEditor - 참고 부록



참고 부록 : in-memory web api


App이 데이터를 검색하는 데만 필요한 경우 heroes.json 파일에서 영웅을 얻을 수 있다.


src/app/heroes.json


데이터 서버가 하는 것과 동일한 이유 때문에 영웅 배열을 데이터 속성이 있는 객체로 랩핑한다.

최상위 수준의 JSON 배열로 인한 security risk를 완화한다.


엔드 포인트를 다음과 같이 JSON 파일로 설정한다.


src/app/toh/hero.service.ts


get heroes 시나리오는 효과가 있지만 앱이 JSON 파일의 변경 사항을 저장할 수 없기 때문에 웹 API 서버가 필요하다.


이 데모 용 실제 서버가 없으므로 실제 XHR 백 엔드 서비스 대신 Angular in-memory 웹 API 시뮬레이터로 대체된다.


in-memory web api는 Angular proper의 일부가 아니다.

npm과 함께 설치되는 angular-in-memory-web-api 라이브러리의 선택적인 서비스다.(package.json 참고)


구성 옵션, 기본 작동 및 제한 사항에 대해서는 README 파일을 참고해라.


in-memory web API는 키가 콜레가시녀 이름이고 값이 해당 콜렉션에 있는 오브젝트의 배열인 맵을 리턴하는 createDb() 메소드로 사용자 정의 애플리케이션 클래스에서 데이터를 가져온다.



JSON 데이터를 기반으로한 샘플의 클래스는 다음과 같다.


src/app/hero-data.ts



HeroService 엔드 포인트가 웹 API를 참조하는지 확인해라.


src/app/toh/hero.service.ts


마지막으로 InMemoryWebApiModule을 AppModule.imports 목록에 추가하여 클라이언트 HTTP 요청을 in-memory web API로 redirect한다.


동시에 HeroData 클래스를 사용하여 forRoot() 구성 메서드를 호출한다.


src/app/app.module.ts



추가된 것은 import 에 HeroData 파일을 import 시킨 부분과 forRoot() 메서드에 HeroData 클래스를 사용해 호출한 부분이다.



그럼 어떻게 작동되는가?


Angular의 http 서비스는 클라이언트 / 서버 통신 작업을 XHRBackend라는 도우미 서비스에 위임한다.


표준 앵글 공급자 등록 기술을 사용하여 InMemoryWebApiModule은 기본 XHRBackend 서비스를 자체 메모리 내 대체 방법으로 바꾼다.


동시에 forRoot() 메소드는 mock hero dataset의 seed data로 in-memory web API를 초기화한다.


forRoot () 메서드 이름은 루트 AppModule의 메타 데이터를 설정하는 동안 InMemoryWebApiModule을 한 번만 호출해야 한다는 것을 상기 시키는 강력한 알림이다.


다음은 src/app/app.module.ts의 최종 개정판이다.


src/app/app.module.ts


InMemoryWebApiModule의 XHRBackend 공급자가 다른 모든 것을 대체하도록 HttpModule 뒤에 InMemoryWebApiModule을 가져온다.


0 Comments
댓글쓰기 폼