Dependency Injection in Angular
Author : Adarsh K V?
What is Dependency Injection in Angular??
Dependency injection (DI) is the part of the Angular framework that provides components with access to services and other resources. Angular provides the ability for you to inject a service into a component to give that component access to the service.?
When Angular creates a new instance of a component class, it determines which services or other dependencies that component needs by looking at the constructor parameter types. For example,?
constructor(private service: MyDataService) { }?
Here in this constructor, we are going to inject MyDataService, so a whenever instance of the component will be created at that time it determines that which service and other dependencies needed for a component by just looking the parameters of the constructor.?
Core principles:?
Dependency Consumer: A class that relies on other classes (dependencies) to function. Examples include components, directives, pipes, and services.?
Dependency Provider: A mechanism that tells Angular how to create and provide instances of dependencies.?
Benefits of DI:?
Loose Coupling: Components don't need to know how to create their dependencies, making them more reusable and easier to test in isolation.?
Testability: By injecting mock dependencies, you can easily test components and services without relying on external factors.?
Flexibility: The injector system allows you to configure how dependencies are provided throughout the application.??
Ways to implement DI in Angular?
. ? Using @Injectable() in the service??
? ? Using @NgModules() in the module?
? ? Using Providers in the component?
How to use @Injectable () to implement DI in Services?
by default it will be registered with the root injector using @Injectable () decorator, below is the simple example.??
@Injectable({??providedIn: 'root',??})?
How to use @Injectable () to implement Dependency Injection in Modules?
This is another approach to register a provider to module level it means that we are allowing that our service will be accessible to all of the components relevant to the current module In which we are registering our service.??
@NgModule({??
providers: [??...??
MyDataService,
// Registering service??
RoutingModule,??
...,??...??],??})?
Here in the above example, we have imported our service file called MyDataService and we are providing it to the array of providers so that it can be used by any component using the current module file.?
How to use providers to implement Dependency Injection in the component?
Register our service using @Component decorator into the component, so that every time, whenever a new instance of the component will be created at that time we will get the new instance of the service.??
@Component({??selector: 'my-app',?
templateUrl: './my-app.component.html',?
providers: [MyDataService ]??})??
What is Dependency Injection token?
领英推荐
Every injector maintains the internal token which is used to map the dependency. And the token will be used as a map, in other words, we can say that the instance is the dependency value and the class type will act as a lookup key.?
dataService : MyDataService;?
Here in this line, MyDataService is a type as token and dataService as a value, the same way we can use it inside the constructor as a parameter to initialize the instance like this.??
constructor(myDataService : MyDataService){}?
Conclusion?
In conclusion, dependency injection (DI) is a powerful tool that underpins Angular's approach to building well-structured applications. By embracing DI, you achieve:?
Improved maintainability: Loose coupling keeps components focused and easier to understand and modify.?
Enhanced testability: You can isolate components for testing by injecting mock dependencies.?
Increased code reusability: Components don't depend on how dependencies are created, making them more reusable across the application.?
Greater flexibility: The injector system allows you to control how dependencies are provided throughout your application.?
?
?
?
?
?
?
?
??
?
?
?
?
?
?
?
?
?
Senior Technical Architect at SEB Administrative Service Inc | Mentor | Instructor | Passionate About Generative AI
7 个月here is another example of dependency injection in angular The inject function in Angular is a powerful feature used to retrieve dependencies in various contexts, especially within Angular's dependency injection system. It is commonly used in functions, classes, or services where the constructor-based injection isn't applicable. Use constructor-based injection for most standard cases where dependencies are required by a class. It is more readable and easier to manage in terms of lifecycle and testing. Use the inject function for scenarios where you need more flexibility, such as in standalone functions, or when you need to inject dependencies dynamically or lazily. #angulardevelopment #Angular #angulardeveloper https://www.youtube.com/watch?v=UkTlZD2TY2c?