Overview Of Dependency Injection In Angular

Introduction

Dependency Injection is a way of programming in which we try to inject the set of operations called services to the modules. Without dependency injection, if we are creating the application at large scale, then we have to repeat the creation of a certain set of operations everywhere in the application. With the help of Dependency Injection, we simply create the services that contain the set operations related to creating the data and other manipulations and inject it everywhere it is using it. It allows us to create the loosely coupled application where components are independent of changes done by services externally.

Prerequisites

• HTML, CSS, and JS
• Basic knowledge of TypeScript

Note
See my previous article “Services in Angular” and see how we injected the simple service.

Eg,

class Student{
  marks;
  constructor()
  {
    this.marks = new Marks();
  }
}

In the above example, we are assigning the marks object by creating it. Suppose in the future, this Marks() constructor starts to take the parameter, then what will happen?

this.marks = new Marks(marksParameters);

We have to redefine its creation logic in the component where it is being utilized.

Is dependency injection achieved above? No, we are dependent on the logic of the Marks() class and based on the changes, we are changing its logic. Also, we have to be aware of the changes in the external component or service used.

Let us redefine the logic.

class Student{
  marks;
  constructor(marks)
  {
    this.marks = marks;
  }
}

Above, you can say we are using Dependency Injection somehow in a proper way. This time, we are not taking care of the Marks service, we are simply assigning it and utilizing it in our application. Any changes done in the logic of Marks will not affect the consumption of the application.

var marks = new Marks();
var student = new Student(marks);

Now, if we are going to create the student object then we are simply creating the marks object and passing it to the Student constructor while creating the object.

var marks = new Marks(Maths, English, Science);
var student = new Student(marks);

Again when we are creating the Student object. We are not going to make any change in creating a student object even if the Marks has started to take the parameters in creating an object.

This provides flexibility. While making the changes in the dependencies, our code is still as it is and working. Also, it is very helpful in testing. We are mocking the data in testing and if the DI is used and we are not dependent on external services other than utilizing them.

But still, there are some problems. The developer has to create the parameters to create the object. As the number of parameters increases, the overhead will increase.

Student constructor is taking only one parameter so it's fine. Suppose, it starts taking more than 10 or more objects to create the Student, then the developer will have to create those 10 or more objects first before creating the Student object.

var param1 = new Parameter1();
var param2 = new Parameter2();
var param3 = new Parameter3();
var param4 = new Parameter4();
var param5 = new Parameter5();
var student = new Student(param1, param2, param3, param4, param5);

Also, the problems may occur like those dependencies parameters also have dependencies on some other dependencies.

var subParam1 = new subParam1();
var subParam2 = new subParam2();
var param1 = new Parameter1(subParam1);
var param2 = new Parameter2();
var param3 = new Parameter3(subParam1, subParam2);
var param4 = new Parameter4();
var param5 = new Parameter5();
var student = new Student(param1, param2, param3, param4, param5);

It will become very difficult to manage the code as the number of dependencies increases.

This is the problem where we use the angular dependency injection framework.

In angular Dependency injection framework there is an Injector where you register all the dependencies.

Injector

The injector is nothing but the container where we register all the dependencies. Eg: service1, service2, service3, service4 and so on.

 

Now the framework will manage all the dependencies that you are managing. So your programming becomes much easier. Simply, we register all the services, dependencies in the injector. So when an object (say Student) is initialized, the injector provides all the required dependencies for a proper functioning of the Student component. So, the Angular DI framework works in this way.

• First, we create a service class.
• Second, we register the service in the Injector.
• Third, we declare those services as dependencies in the class where we are going to utilize.

Example

 

We have created the service StudentService and register it to the AppModule (where we kick-start the application) through provider metadata and utilized this service to the components like StudentDetails and StudentMarks.