Angular2 준비 #04 의존성 주입

의속성 주입(Dependency Injection)

• 참조 사이트 … Dependecy Injection in Angular

의속성 주입(Dependency Injection)은 Angular에서 가장 강력한 기능 중에 하나 입니다.

Angular 1.x 에서의 의존주입은 몇가지 제한 사항이 있었습니다.

내부캐시(Internal cache) : 종손성은 싱글톤 입니다. 라이프 사이클당 한번만 생성
네임스페이스 출동(Namespace collision) : 오직 한가지 유형만을 가질 수 있습니다.
단단한 결합(Tightly coupled) : Angular 1.x 프레임워크에 내장되어 있습니다.

의존성 삽입을 설명하기 위해 다음 예제를 사용합니다.
차를 만드는 클래스를 생성하겠습니다.
일반적인 방법으로 아래와 같습니다.

class Car {
  constructor() {
    this.engine = new Engine();
    this.tyres = Tyres.getInstance();
  }
}

이 방법은 괜찮습니다. 하지만, 우리는 엔진 생성자와 싱글 톤 타이어에서 엔진을 얻을 수 있습니다.
만약 우리가 MockEngine 을 생성자로 대체해서 코드를 테스트해야 한다면 새로운 코드를 작성해야 합니다.
테스트 할 수 잇는 코드를 만들면 우연히 재사용 가능한 코드를 빌드하게 됩니다. 이 코드르 더 재사용 가능하게 만드는 한가지 방법은 TypeScript 생성자를 사용하여 형식과 값을 전달하는 것입니다.
다음은 그 예입니다.

class Car {
  constructor(engine, tires) {
    this.engine = engine;
    this.tyres = tyres;
  }
}

우리는 생성자로부터 의존성 생성을 제거하고 모든 필요한 종속성을 기대학 위해 생성자 함수를 확장했습니다. 이제 코드의 구현을 하드 코딩하지 않았습니다.
우리는 생성자에 옮겼습니다.
새차를 만드려면 다음과 같이 실행하면 됩니다.

var car = new Car(
  new Engine(),
  new Tyres()
);

코드를 테스트 할 필요가 있다면 모의 의존성을 보낼 수 있습니다. 예를 들면 다음과 같습니다.

var car = new Car(
  new MockEngine(),
  new MockTyres()
);

이제, 이것이 의존성 주입입니다.
Angular2 에서의 의존성 주입은 다음과 같이 구성이 됩니다.

인젝터(Injector) : API 를 노출하는 객체입니다.
공급자(Provider) : 인젝터에게 종속성의 인스턴스를 만드는 방법을 알려줍니다.
종속성(Dependency) : 객체를 생성해야 하는 유형

Angular2 에서는 동일한 객체를 만드려면 다음과 같이 정의합니다.

import { Injector } from 'angular2/core';

var injector = Injector.resolveAndCreate([
  Car,
  Engine,
  Tyres
]);

var car = injector.get(Car);

Angular2 에서 import하는 Injector는 Injector.resolveAndCreate()를 생성하는데 도움을 주는 API 를 확장하는 팩토리 함수이며 이는 제공자의 목록을 가져옵니다.

TypeScript 에서는 다음과 같이 Car 클래스를 정의합니다.

class Car {
  constructor(engine: Engine, tires: Tires, doors: Doors) {
    ...
  }
}

이 방법으로 의존성 주입을 생성함으로 이름 충돌 문제를 제거 할 수 있습니다.이 구조화 된 형식은 Angular 1.x 의 모든 문제를 제거 합니다.