AngularJs 2- service

이제까지는 code example을 CodeComponent의 필드값을 이용해 받았다. 만약 example들을 코드내의 하드코딩이 아닌 인터넷 어딘가에서 가져온다고 생각해보자(또는 DB일 수도있다). 물론 CodeComponent 내에 이런 역할을 하는 코드를 직접 넣을 수도 있을 것이다. 그럼 다른 콤포넌트들(CodeComponent의 하위 콤포넌트가 아니라면) 이 값을 사용하기 위해 또 같은 코딩을 해야 할까? 물론 이 경우에만 필요한 것은 아니고 하나의 예만 생각해 본 것이다. 뭐 어쨋든 필요하니 만들어 두었을 것이고 이를 이용하도록 해보자.

현재 우리가 필요한 것은 ExampleCodes라는 sample code 배열만 받으면 된다. service 코드는 다음과 같이 될 것이다.

<code.service.ts>

Injectable이라는 것이 보이는데, AngularJs는 서비스를 사용하도록 넘겨주는 것을 이렇게 표현한다. 서비스를 넣어준다는 의미인가? 아무튼, 용어는 넣어두고, Injectable 이면 Inject 당하는 곳도 있다는 말이다. 당연한 말이지만, 만들어진 서비스를 사용하는 곳도 있어야 하니까.

<code.component.ts>

21번째 줄에 constructor 메소드가 추가되었다. 여기에서 CodeService라는 서비스를 받아서 private 변수인 _codeService라는 변수로 저장한다.

Inject할 것도 있고, 받는 곳도 있는데, 그럼 누가 저걸 Inject해 줄까? AngularJs가 그걸 해주어야 하는데, 그렇게 하라고 얘기해 준 곳이 바로 12번째 줄의 providers 부분이다.

27번째 줄의 ngOnInit라는 메소드도 보이는데 여기서 codes변수를 설정하고 있다. constructor에 넣어도 되지만 생성자에는 되도록 많은 것을 넣지 않는 것이 좋단다. ngOninit는 콤포넌트의 생명주기동안 AngularJs에서 자동으로 호출되는 메소드이다. 첫번째 줄처럼 core 에서 import하고 15번째 줄처럼 implement 를 사용한다.

https://angular.io/docs/ts/latest/tutorial/toh-pt4.html