What is dependency injection, and how does Angular implement it?

Introduction

In modern software development, managing dependencies efficiently is crucial for building scalable and maintainable applications. Dependency Injection (DI) is a design pattern that plays a key role in achieving this by promoting loose coupling and enhancing testability. Angular, a popular front-end framework, has a built-in hierarchical dependency injection system that simplifies dependency management.

This article explores what Dependency Injection is, how Angular implements it, and its benefits in building robust applications.

What is Dependency Injection (DI)?

Dependency Injection (DI) is a design pattern in which an object (or component) receives its dependencies from an external source rather than creating them internally. This helps to:

• Improve code maintainability and scalability.
• Reduce hard-coded dependencies, making code more flexible.
• Enhance reusability, allowing components and services to work independently.

How Angular Implements Dependency Injection

Angular provides a built-in DI framework that allows developers to define and inject dependencies into components, services, and directives. The core elements of Angular’s DI system include:

1. Providers

A provider is responsible for creating and managing instances of dependencies. It defines how Angular should supply a particular service.

2. Injectors

Injectors are responsible for looking up and injecting dependencies where needed. Angular maintains a hierarchical injector system, meaning different parts of the application can have different instances of a service if required.

3. Tokens

Tokens are unique identifiers used to reference dependencies. In most cases, classes serve as tokens, but Angular also supports custom tokens using InjectionToken.

4. Decorators

Angular uses decorators such as @Injectable(), @Inject(), and @Component() to define how dependencies should be injected.

Implementing Dependency Injection in Angular

1. Creating a Service Using @Injectable

To create a service in Angular, use the @Injectable() decorator. This marks the class as available for DI.

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

@Injectable({
  providedIn: 'root' // Registers the service at the root level
})
export class MyService {
  constructor() { }

  getData() {
    return 'Hello from MyService!';
  }
}

Here, the providedIn: 'root' property ensures that a single instance of the service is available across the entire application.

2. Injecting a Service into a Component

Once a service is created, it can be injected into a component’s constructor.

import { Component } from '@angular/core';
import { MyService } from './my-service.service';

@Component({
  selector: 'app-root',
  template: `<h1>{{ message }}</h1>`
})
export class AppComponent {
  message: string;

  constructor(private myService: MyService) {
    this.message = this.myService.getData();
  }
}

Angular automatically injects an instance of MyService into AppComponent when it is instantiated.

3. Providing a Service at the Module or Component Level

In some cases, services should be limited to a specific module or component rather than being globally available.

Providing a Service at the Module Level

@NgModule({
  providers: [MyService]
})
export class AppModule { }

Providing a Service at the Component Level

@Component({
  selector: 'app-child',
  providers: [MyService],
  template: `<p>Child Component</p>`
})
export class ChildComponent {
  constructor(private myService: MyService) { }
}

By defining providers inside ChildComponent, Angular ensures that a new instance of MyService is created only for that component and its children.

4. Using @Inject with InjectionToken

In cases where a non-class dependency (like a string or configuration object) is needed, Angular provides InjectionToken.

Defining and Using an Injection Token

import { InjectionToken, Injectable, Inject } from '@angular/core';

export const API_URL = new InjectionToken<string>('API_URL');

@Injectable()
export class ApiService {
  constructor(@Inject(API_URL) private apiUrl: string) { }
}

Providing the Token in the Module

@NgModule({
  providers: [{ provide: API_URL, useValue: 'https://api.example.com' }]
})
export class AppModule { }

This ensures that ApiService receives 'https://api.example.com' when injected.

Benefits of Dependency Injection in Angular

✅ Loose Coupling – Components and services are less dependent on each other, improving flexibility.

✅ Code Reusability – Services can be reused across multiple components without duplication.

✅ Easier Testing – Since dependencies are injected, unit tests can use mock services, making testing more efficient.

✅ Scalability – As the application grows, managing dependencies remains straightforward and structured.

Conclusion

Angular’s dependency injection system is a powerful mechanism for managing dependencies efficiently. By understanding how DI works in Angular, developers can build modular, scalable, and maintainable applications. Whether injecting services at the root, module, or component level, DI ensures that Angular applications follow best coding practices.

By leveraging Angular’s built-in DI framework, developers can enhance code reusability, flexibility, and testability, making their applications more robust and maintainable in the long run.

Learn more abut it here