1.서비스와 의존성 주입

서비스 ?

• 애플리케이션의 비즈니스 로직을 담는 클래스
• 컴포넌트에서 비지니스 로직을 분리하기 위해 서비스를 사용한다.
• 컴포넌트는 뷰와 서비스의 비지니스 로직으 ㄹ관리하는 컨트롤 타워 역할
• 비지니스 로직은 가능한 한 서비스에 기술하는 것이 좋다.

서비스 사용해보기

1. ng g service 서비스명 다음 명령어를 이용해 서비스 클래스를 생성한다.

2. 서비스를 사용할 컴포넌트에 임포트 해온다.

3. 클래스의 생성자의 인자로 서비스를 추가한다.

   • 생성자의 매개 변수에 접근 제어자를 붙이면 클래스의 속성으로 선언된다.

   constructor(
       public i18nSupporter: I18nSupportService
   ) {}

   생성자에 인자로 선언하면 일어나는 일은?

   생성자 매개 변수로 선언한 서비스코드를 new서비스컴포넌트() 로 생성할 필요 없이 앵귤러에서 대신 클래스를 생성해서 제공해 준다.
   이러한 과정을 의존성 주입이라고 한다.

   서비스를 생성자 인자로 선언하므로서 선언한 컴포넌트는 서비스에 의존하고 있다.

4. 앵귤러 모듈에 의존성 주입 정보를 선언한다.

   📄app.module.ts
   
   @NgModule({
       //...,
   		providers: ['서비스명']
   })

2.상태 관리 및 공유

뷰의 상태는 뷰와 연관된 컴포넌트가 관리한다.

여러 컴포넌트에 동일한 상태 정보가 필요한 경우도 흔한데, 이는 컴포넌트 기반으로 구축된 웹 애플리케이션의 화면이 다양한 컴포넌트가 구성되어 만들어지기 때문이다.

컴포넌트 사이에 데이터를 공유하는 방법은 여러가지가 있다.

지시자

지시자는 템플릿을 동적으로 만들어 주는 요소이다.

크게 구조지시자와 속성 지시자로 구분할 수 있다. 구조지시자는 DOM의 구조를 동적으로 처리할때 사용하고, 속성 지시자는 DOM의 속성을 앵귤러 방식으로 관리할 때 사용한다.

파이프

파이프는 템플릿에 데이터를 보여 주 ㄹ때 가공이 필요한 경우 사용할수 있다.

파이프 사용해보기

1. ng g pipe 파이프명 해당 명령어로 파이프 파일을 생성한다.

2. transform메서드에 가공한후 변화된 값을 반환하는 로직을 구현한다.

   📁lang-selector/lang-selector-btn.pipe.ts
   
   transform(lang: LangData): any {
       return `${lang.name}, ${lang.code}`
   }

3. 가공한 파이프를 템플릿에 적용한다.

   • @Pipe 의 name값을 선언해 주면된다.

   	@Pipe({
       	name: 'langSelectorBtn',
       })
   	export class LangSelectorBtnPipe implements PipeTransform {
       	transform(lang: LangData): any {
           	return `${lang.name}, ${lang.code}`
           }
       }

4. 코드에 | 와 함께 선언하면 해당 파이프가 적용된다.
   

        {{ ... | pipeName }}

모듈

앵귤러 안에서 관련된 요소를 하나로 묶는 애플리케이션을 구성하는 단위

모든 앵귤러 애플리케이션은 반드시 하나의 모듈을 가진다. 이 모듈을 루트 모듈이라 한다.
(관례상 AppModule로 부르고 클래스를 생성한다)

루트 모듈 왜 필요한가?
앵귤러는 모듈 단위로 애플리케이션의 코드를 인식하기 때문이다. 컴포넌트, 서비스, 지시자, 파이프를 모듈에 선언하지 않을 경우 애플리케이션을 사용 할 수 없다.

---

위 포스팅은 앵귤러 첫걸음(조우진) 책의 내용을 학습 목적을 위해 요약 정리한 내용 입니다.