Overview

Dependency Injection (DI) is a fundamental concept in Angular that plays a crucial role in building scalable, maintainable, and testable applications. In this comprehensive guide, we will start with the basics of Dependency Injection in Angular and gradually delve into advanced concepts, exploring how it empowers developers to create flexible and modular applications.

Introduction to Dependency Injection

What is Dependency?

A dependency is a relationship between two software components where one component relies on the other component to work properly.

What is Dependency Injection?

Dependency Injection is a design pattern that allows object to depend on abstractions rather than concrete implementations. means a design pattern in which a class requests dependencies from external sources rather than creating them. In the context of Angular, DI refers to the mechanism by which components, services, and other Angular constructs receive their dependencies. In the context of Angular and many other frameworks, Dependency Injection refers to the following principles:

1. Dependencies: Dependencies are services or objects that a class or component relies on to perform its tasks. For example, a component might depend on a service to fetch data from a server.
2. Injection: Instead of a component or class creating its own dependencies, these dependencies are “injected" or provided to the component from an external source, typically by a framework or a container.
3. Inversion of Control (IoC): Dependency Injection inverts the control of creating and managing dependencies. In traditional programming, a class might create its own dependencies. With DI, the responsibility of creating and managing dependencies is shifted to an external entity, typically a DI container.

Here's a Simple example in Angular:

// Without Dependency Injection
class UserService {
	// Service Logic
}

class UserComponent {
	private userService: UserService;
	
	constructor() {
		this.userService = new UserService();	// Creating the dependency here.
	}
}

// With Dependency Injection
class UserService {
	// Service logic
}

class UserComponent {
	constructor (private userService: UserService) {
		// Dependency is injected from an external source (DI container)
	}
}

Why use Dependency Injection?

• Modularity: DI promotes modularity by decoupling components and services from their dependencies, making it easier to replace or extend functionality.
• Testability: It simplifies unit testing by enabling the injection of mock or test doubles of dependencies.
• Reusability: Encourages the reuse of services across different parts of the application.
• Loose Coupling: Components become less tightly coupled with their dependencies, making the codebase more maintainable and flexible.
• Scalability: Makes it easier to scale your application by managing the instantiation and lifecycle components efficiently.

Basic Usage of Dependency Injection

Injecting Services into Components

Angular components often depend on services for data retrieval, business logic, or other functionality. By using Dependency injection, you can inject these services into your components' constructor.

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

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
})
export class MyComponent {
  constructor(private myService: MyService) {}
}

Disadvantages of not Using Dependency Injection (DI)

1. Without dependency injection, a class is tightly coupled with its dependency. This makes a class non-flexible. Any change in dependency forces us to change the class implementation.
2. It makes testing of class difficult. Because if the dependency changes, the class has to change. And when the class changes, the unit test mock code also has to be change.