Angular Dependency Injection

What is Dependency Injection (DI) in Angular 2?

Dependency Injection (DI) is a procedure in which we give a instance of an object to another object, which relies upon it. This is procedure is also called “Dependency of Control” (IoC). Dependency injection allows you to inject the dependencies (which are the requirements of your class/component) in your different components across your applications.

According to wikipedia:

Dependency injection is a technique whereby one object supplies the dependencies of another object. A dependency is an object that can be used (a service). An injection is the passing of a dependency to a dependent object (a client) that would use it.

Dependency Injection (DI) was a core feature of  Angular 1.x, and that has not changed in Angular 2. It allow you to inject dependencies in many other components across your applications, without needing to know, how those dependencies or objects are created, or what dependencies they need themselves.

When Angular creates a component, it first asks an injector for the services that the component requires.

Angular 2 Dependency Injection Framework:

Angular 2 Dependency Injection Framework helps us to implement the Dependency injection in our application. It creates & maintains the Dependencies and injects them into the Components or Services class which requests for it.

Angular Dependency Injection Framework mainly consists of this major parts:

1. @Injectable()  decorator
2. Consumer class
3. Dependency
4. Provider
5. Injector

1. @Injectable(): The @Injectable() lets Angular know that a class can be used with the dependency injector. To inject into a class, you need to declare @Injectable()  decorator,  like Components have @Component()  decorator,  but services are simple classes. If a service requires dependencies to be injected in it, you need to provide this decorator.

2. Consumer: This is the Component or class that needs/ask the dependencies or functionality.

3. Dependency: The Service that is being injected, To inject dependency into a class, we need to declare @Injectable()  decorator in to that class. Dependency are present in the form of objects by which you can access member function  or member data of  Intractable class.

4. Provider: It maintains the list of all the dependencies. It provides the instance of dependencies to the injector. We can define providers list(Array) in component it self in meta data or  can define in module file.

5. Injector: Injector is responsible for injecting the instance of the dependency(Service) to the Consumer(Component). To create an instance, injector looks for a provider.

Now Lets understand each of them with example, how Dependency Injection is actually works ?

How to Use Dependency Injection?

1. Injectable() –  In the previous tutorial we have created a class PostsService,  and used that service in to PostListingComponent to show the list of all post data. In post-service.ts file we have declare @Injectable decorator.

2. Consumer – In our example PostListingComponent class is the customer that use dependencies from PostsService class.

3. Injector:

In the above code snippets, in constructor function Injector is used for injecting the instance of the dependency(Service) in to component. private PostsServiceList: PostsService creates an object of PostService Class, by which you can access member function  or member data of  service class.

4. Dependency:

Now we can access dependencies  with the help of Object we have created. like we have call getPostData() method of service class.

5. Provider:  Provider can define in component it self with the meta data or  can define in module.ts file. 

Define providers: [ PostsService ]  in @Component with metadata.

or you can define in your module.ts file.

 

Dependency Injection Example: