Angular dependency injection (DI) is a fundamental concept in the Angular framework that employs a hierarchical arrangement of injectors to manage the creation and dependencies of objects. The primary role of an injector is to produce an instance of a specific class or service and supply it to other segments of the application that rely on it.
Key takeaways:
Angular DI is a powerful system for managing dependencies in applications.
It promotes loose coupling, enhances testability, and improves code maintainability.
The three types of DI in Angular are constructor, property, and method injection.
The
@Injectabledecoratord is crucial for classes that need to be injected or have dependencies.Advanced techniques like
useClass,useFactory, anduseValueoffer flexibility in dependency provision.
The Angular dependency injection (DI) functions by enrolling services and other dependencies with an injector, which it then injects into components, services, and other classes that require them. Upon creating an instance of a service, the injector is also responsible for producing any dependencies that the service necessitates. It’s a way to achieve Inversion of Control (IoC), where the control of object creation and lifecycle management is inverted, or handed over to a container (in this case, Angular’s DI system).
Modularity: Using DI simplifies dividing our code into more manageable and reusable pieces that can be evaluated separately.
Testability: It helps in the unit testing of our code.
Maintainability: The use of DI enhances the adaptability of our code and makes it simpler to modify since it reduces the degree of interdependence between various components of the application.
Angular’s DI system consists of three main components:
Injector: The injector is responsible for creating and managing instances of dependencies.
Provider: Providers tell the injector how to create instances of dependencies.
Dependency: The actual service or object that a component or another service requires.
When a component or service requires a dependency, Angular’s DI system follows these steps:
Look up the provider for the requested dependency in the injector hierarchy.
If found, use the provider to create an instance of the dependency.
Inject the instance into the requesting component or service.
Angular supports three types of dependency injection:
Constructor injection: Dependencies are provided through a class constructor.
constructor(private http: HttpClient) {}
Property injection: Dependencies are assigned to properties of the class.
@Inject(HttpClient) private http: HttpClient;
Method injection: Dependencies are provided as parameters to methods.
someMethod(@Inject(HttpClient) http: HttpClient) {}
Constructor injection is the most common and recommended approach in Angular applications.
To use dependency injection, we first import Injectable and use the @Injectable decorator before the service, component, or class we want to inject.
import { Injectable } from '@angular/core';@Injectable({providedIn: 'root'})
Suppose we have a service called CustomerService that provides customer information to our application. We also have a component called AllCustomerComponent that displays a list of customers. We want to inject the CustomerService into the AllCustomerComponent to display the list of customers.
To create the CustomerService, we must import the necessary modules and then create the service class. The CustomerService class would have a method getCustomers() that retrieves the list of customers:
import { Injectable } from '@angular/core';@Injectable({providedIn: 'root'})export class CustomerService {getCustomers() {return [{ id: 1, name: 'Hamza' },{ id: 2, name: 'Ali' },{ id: 3, name: 'Shahroz' },{ id: 4, name: 'Sara' },{ id: 5, name: 'Ahsan' }];}}
Next, we would create the AllCustomerComponent and inject the CustomerService into it using the constructor. In the ngOnInit() lifecycle hook, the getCustomers() method of the CustomerService is called to retrieve the list of customers and assign it to the customers property of the AllCustomerComponent, as follows:
import { Component, OnInit } from '@angular/core';import { CustomerService } from './customer.service';@Component({selector: 'app-all-customers',template: `<h2>All Customers</h2><ul><li *ngFor="let customer of customers">{{ customer.name }}</li></ul>`})export class AllCustomersComponent implements OnInit {customers: any[];constructor(private customerService: CustomerService) {}ngOnInit() {this.customers = this.customerService.getCustomers();}}
In this example, the AllCustomerComponent injects the CustomerService using the constructor. The CustomerService is then used to retrieve the list of customers and assign it to the customers property of the AllCustomerComponent.
Here is an application that uses the code explained above:
Here are some advanced dependency injection techniques:
useClass: Allows to provide a different implementation of a service.
{ provide: MyService, useClass: MyAlternativeService }
useFactory: Enables dynamic creation of dependencies based on runtime conditions.
{ provide: MyService, useFactory: myServiceFactory, deps: [Dependency1, Dependency2] }
useValue: Provides a fixed value as a dependency.
{ provide: 'API_URL', useValue: ' https://api.example.com ' }
Angular’s dependency injection system enables us to build robust, scalable, and maintainable applications. By leveraging DI effectively, we can create loosely coupled components, improve testability, and manage complex dependencies with ease. As we continue to work with Angular, learning dependency injection will significantly enhance the ability to create high-quality applications.
Haven’t found what you were looking for? Contact Us
Free Resources
