[Angular] 서비스 개념

• 컴포넌트
  • 뷰(템플릿)와 뷰를 위한 모델에 관련된 코드
• 서비스 => 리액트에서의 상태라이브러리, 쉽게말하면 리액트에서 사용하는 리덕스 스토어같은 역할
  • 컴포넌트 혹은 다른 서비스에서 사용하는 재사용 가능한 기능의 집합
  • 컴포넌트에 주입하거나, 모듈에 주입해서 사용 
• 'A컴포넌트에서 S서비스를 사용한다' 라는 말은 
  • A에서 S의 인스턴스를 생상해서 사용(X)
  • A에서 S를 주입해주면 앵귤러에서 알아서 객체를 만들어서 사용할 수 있도록 맡아서 처리.
    • 1. 컴포넌트에 서비스를 주입
    • 2. 모듈에 서비스를 주입
      • 모듈에 있는 모든 컴포넌트에서 같은 서비스를 사용
• =>'A컴포넌트에 S서비스를 주입한다.'라고 한다.

//traditional 방식

class EngineService {
	public start(): void{
    console.log('엔진스타트');
    }
}

class WheelService {
	public start(): void{
    console.log('바퀴스타트');
    }
}

class CarCompnent {
	private _engine = new EngineService();
    private _wheel = new WheelService();
    
    constructor(){
    }
    public start(): void {
    	this._engine.start();
        this._wheel.start();
    }
}

const cart = new CarComponent();
car.start();

여기서 개념을 거꾸로 바꿔서 걔네가 나한테 넣어주는것 = 제어의 역전

 

 

dependency vs injection

 

제어의 역전!!!

 

Dependency injector 즉 앵귤러가 주입해주는 방식이다.

이렇게 하면 좋은게 => 주입한애를 바꿔치기하기도 편하다.(독립적으로 주입하는애, 받아쓰는애)

 

• 디펜던시 인젝터는 앵귤러
• 어떻게 인젝트 해줄건지는 우리의 설정
• provider(s)라는 이름으로 설정
• 설정하는 방식은 같으나, 설정하는 위치가 다름
  1. 컴포넌트의 메타데이터 -> 따로따로 사용하고싶을때 
  2. 모듈의 메타데이터 -> 공유할때

 

1과 2가 어떻게 다르냐?

 

//log.service를 만들고

//company 컴포넌트에 provider로 직접주입

 

//home 컴포넌트에 provider로 직접주입

얘네들은 count가 0 0이뜬다.

 

반면 모듈 provider 에서 공유시?

count는 0,1

이 말은 공유한다는 의미.

 

---

여러가지 주입방식 ----> provider안에 들어가는것

• 그냥 class
• useValue
• useClass
• useExisting
• useFactory

https://stackoverflow.com/questions/60801513/angular-9-error-ng2003-no-suitable-injection-token-for-parameter-url-of-cla