03-08 의존성 주입(Dependency Injection)

의존성주입

의존성주입은 클래스의 새로운 인스턴스에 필요한 완전한 형태의 의존성을 제공하는 방법입니다. 대부분의 의존성은 서비스입니다. Angular는 새로운 컴포넌트에 서비스를 제공하기 위해 의존성 주입을 사용합니다.

Angular는 생성자 매개수의 유형을 살펴봄으로써 컴포넌트에 필요한 서비스를 알수 있습니다. 예를 들어 HeroListComponent의 생성자에는 HeroService가 필요합니다.

src/app/hero-list.component.ts (constructor)

constructor(private service: HeroService) { }

Angular가 컴포넌트를 만들면 먼저 컴포넌트에 필요한 서비스를 인젝터에 요청합니다.

인젝터는 이전에 생성한 서비스 인스턴스의 컨테이너를 관리합니다. 요청된 서비스 인스턴스가 컨테이너에 없으면 인젝터는 서비스를 Angular에 리턴하기 전에 컨테이너에 서비스를 추가합니다. 요청 된 모든 서비스가 확인되고 리턴되면 Angular는 이러한 서비스를 사용하여 컴포넌트의 생성자를 인수로 호출할 수 있습니다. 이것이 의존성주입입니다.

HeroService 주입 과정은 다음과 같습니다.

인젝터에 HeroService가 없는 경우, 인젝터가 서비스 만드는 방법을 어떻게 알 수 있습니까?

간단히 말해, 인젝터가 있는 HeroService 공급자를 사전에 등록했어야 합니다. 공급자는 일반적으로 서비스 클래스 자체를 생성하거나 리턴할 수 있는 서비스입니다.

공급자를 모듈 또는 컴포넌트에 등록 할 수 있습니다.

일반적으로, 동일한 서비스 인스턴스를 모든 곳에서 사용할수 있도록 공급자를 루트모듈에 추가합니다.

src/app/app.module.ts (module providers)

providers: [   BackendService,   HeroService,   Logger ],

또다른 방법으로, @Component 메타 데이터의 providers 프로퍼티에 있는 컴포넌트단에 등록합니다.

src/app/hero-list.component.ts (component providers)

@Component({   selector:    'hero-list',   templateUrl: './hero-list.component.html',   providers:  [ HeroService ] })

컴포넌트단에 등록하면 해당 컴포넌트의 새로운 인스턴스가 나올 때마다 새로운 서비스 인스턴스를 얻게됩니다.

의존성 주입에 대해 기억해야 할 점 :

l  의존성 주입은 Angular 프레임워크에 연결되어 어디서나 사용됩니다.

l  인젝터가 주요 메커니즘입니다.

n  인젝터는 생성 한 서비스 인스턴스의 컨테이너를 유지 관리합니다.

n  인젝터는 공급자로부터 새로운 서비스 인스턴스를 생성 할 수 있습니다.

l  공급자는 서비스를 만드는 방법입니다.

l  공급자(providers)에 인젝터를 등록하십시오.

 

마무리

당신은 Angular 응용프로그램의 8 가지 기본 구성 요소에 대한 기본 사항을 배웠습니다.

l  모듈

l  컴포넌트

l  템플릿

l  메타 데이터

l  데이터 바인딩

l  디렉티브

l  서비스

l  의존성 주입

위 내용은 Angular애플리케이션의 모든 기능을 배우기 위한 토대가 될 것입니다. 그러나 알아야 할 모든 것을 포함하지는 않습니다.

다음은 Angular의 다른 중요한 기능과 서비스를 알파벳 순으로 나열한 간단한 목록입니다. 대부분이 문서에서 다루고 있습니다 (또는 곧 지원 될 예정 임).

 

애니메이션(Animation) : 애니메이션 기술이나 CSS에 대한 깊은 지식없이 Angular의 애니메이션 라이브러리로 컴포넌트 동작에 애니메이션을 적용

변경 감지(Change detection) : 변경 감지 문서에서는 컴포넌트 프로퍼티 값이 변경된 시점, 화면 업데이트시기 및 비동기 활동을 가로채기 위해 영역을 사용방법 및 변경 감지 전략을 실행하는 방법에 대해 설명합니다.

이벤트(Event) : 이벤트 문서는 컴포넌트와 서비스를 사용하여 이벤트를 게시하고 가입하기 위한 메커니즘을 사용하여 이벤트를 발생시키는 방법에 대해 다룹니다.

폼(Forms) : HTML 기반 유효성 검사 및 더티 검사로 복잡한 데이터 입력 시나리오를 지원합니다.

HTTP : HTTP 클라이언트를 사용하여 서버와 통신하여 데이터를 가져오고 데이터를 저장하며 서버 측 작업을 호출합니다.

라이프사이클 후크(Lifecycle hooks) : 라이프사이클 후크 인터페이스를 구현하여 컴포넌트의 생성에서 파기까지 주요 수명을 활용하십시오.

파이프(Pipes) : 템플릿의 파이프를 사용하여 표시 할 값을 변환하여 사용자 경험을 향상시킵니다. 이 currency 파이프 표현식을 고려해보십시오.

price | currency : 'USD': true

이것은 금액42.33을 $42.33으로 표시합니다.

라우터(Router) : 클라이언트 응용프로그램 내에서 페이지간에 탐색하며, 절대 브라우저를 벗어나지 않습니다.

테스트(Testing) : Angular 테스트 플랫폼을 사용하여 Angular 프레임워크와 상호 작용할 때 응용프로그램 파트에서 단위 테스트를 실행합니다.