Angular is incredibly effective because it takes use of the Dependency Injection design pattern. Classes, components, and modules can interact while yet remaining consistent under this programming paradigm. As a result, the class changes less frequently.
What is Dependency Injection?
Dependency injection, a well-known programming concept, is what separates a class from its dependencies. Through the use of dependency injection, dependent objects can be created independently of classes and provided to classes in a variety of other ways.
Think about the classes A and B. Assume class A makes use of class B's objects. A class B instance is typically generated in OOPS so that class A can access the objects. We use DI to remove the dependent objects' construction and binding from the class that depends on them.
There are often three different categories of courses, namely:
- Client Class - The dependent class on the service class is this one.
- Service Class - Class that offers the client class the service.
- Injector Class - Injects the object from the service class into the client class.
Types of Dependency Injection in Angular
In Angular, dependency injections come in three different types, and they are as follows:
- Constructor injection: Through a class constructor, it gives the dependencies in this case.
- Setter injection: The injector injects the dependence into a setter method that is used by the client.
- Interface injection: Any client that is provided to the injector method by the dependence will receive the injection of the dependency. A setter method that accepts the dependence must be exposed through an interface that the clients must implement.
Benefits of Dependency Injection
- loosely coupled - Our Component is currently just loosely connected to the ProductService. The ProductService cannot be created by AppComponent. In reality, it has no knowledge of the ProductService. It only functions with the ProductService that was provided to it. ProductService, BetterProductService, or MockProductService are all acceptable options. The AppComponent is apathetic.
- Easily Testable Testing AppComponent is now simpler. Our AppComponent is no longer reliant on a specific ProductService implementation. Any ProductService implementation that is provided to it will function. To pass during testing, simply create a mockProductService Class.
- Reusing the Component: It gets simpler to reuse the component. With every ProductService moving forward, our Component will function as long as the interface is respected.
Our AppComponent is now tested, maintainable, etc. thanks to the dependency injection technique.
But does it fully resolve all of our issues? No, we simply transferred the Problem from the Component to the Component Creator. How can we make a ProductService object and send it to the AppComponent? Angular Dependency Injection accomplishes that.
How DI (Dependency Injection) works
Take into account the following service, which is produced by:
ng g service test
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class TestService {
importantValue: number = 42;
constructor() { }
returnImportantValue() {
return this.importantValue;
}
}
As one can see, by including the @Injectable decorator in a class, we may construct injectable dependencies.
We include the aforementioned dependent in the component shown below:
import { TestService } from './../test.service';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls:
})
export class TestComponent implements OnInit {
value: number;
constructor(private testService: TestService) { }
ngOnInit() {
this.value = this.testService.returnImportantValue();
}
}
At the top of the page, one can see that we have imported our TestService. The returnImportantValue function of the service was then implemented when we generated an instance inside the function Object() { } of the component. We can see from the aforementioned example how angular offers a fluid approach to inject dependencies in any component.
An excellent, multipurpose framework that accelerates development is Angular. It provides deep linking and dependency injection and is a reliable platform for software development.
Read the full article
