Dependency Injection

Dependency Injection is a pattern used in Angular to provide parts of an application to other parts of an application. Dependency injection can be thought of a pizza delivery service. Just bear with me. When you, a customer, wants pizza from a pizza parlour across town, you would order it giving your specifications for toppings and flavours after which it is delivered to you by the pizza delivery service.

In comparison, when one part of the application(You the customer) wants methods/properties/objects (The pizza) from another part of the application(The pizza parlour across town), the first part of the application requests it and is transferred from one part of the application to another. The requester asks for the different customizations (flavours and toppings) Who knew? 😱

There are usually two actors in dependency injection; the consumer and the provider. The interaction between the two actors is facilitated by the an injector. Story time again? 💽

An injector can be thought of as really experienced bartender/mixologist who knows how to make all types of cocktails ordered by customers in a bar based on exact requirements by the customers. In the same way, in Angular injectors should know how to create instances of the providers and give them to the consumers.

When the consumer requests a provider, the injector checks if the provider class has already been instantiated and gives it to the consumer(bartender with a ready made drink). However, when the class has not been instantiated, the injector instantiates the class then provides it to the consumer.

To make a class in Angular a dependency provider, it requires a decorator, @Injectable ().

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DependencyProviderDemoService {

  constructor() { }
}

A decorator can be seen like decorations in a house. The decorations in a house, e.g. christmas decorations are used to add special feeling in the house, that is, it is christmas. In the same way, decorators in Angular add special properties to a class. In this case, it makes the class a special class that can be injected as a provider.

On the consumer side, the class needs to be added in special property inside various decorators such as ngModule decorator when its being added to a module, the component decorator when its being added to component class or the directive decorator when its being added to a directive.

@NgModule({
///other props
  ],
  providers: [DependencyProviderDemoService],
  bootstrap: [AppComponent]
})
export class AppModule { }

When added to a module that is not provided as a root module, only one instance exists for all members of a module, that is, it’s components and directives. When it’s not a root module, every instance of the module creates a new instance of the provided class.

import { Directive } from '@angular/core';
import { DependencyProviderDemoService } from '../services/dependency-provider-demo.service';

@Directive({
  selector: '[appTest]',
  providers:[DependencyProviderDemoService]
})
export class TestDirective {

  constructor() { }

}

Similarly, for every instance created for a class/directive, the provided class is also instantiated. Finally, for the consumer to use the providers’ objects/methods/properties(eating the pizza), it is injected through declaration in the constructor of the class. That’s all folks!