Dependency Injection in Angular

🚀 What is Dependency Injection?

• Dependency Injection (DI) is a design pattern.
• It allows a class to receive its dependencies (services, objects) from the outside, rather than creating them itself.
• Angular has a powerful built-in DI system that manages and injects dependencies automatically.

---

📦 Why Use Dependency Injection?

Benefit	Description
Loose Coupling	Classes are not tightly tied to their dependencies.
Reusability	Easier to reuse code and services.
Testability	Easier to mock dependencies for unit testing.
Maintainability	Cleaner, more modular code.

---

🔥 Basic Example

Suppose you have a service that provides user data:

1. Create a Service

ng generate service user

This generates user.service.ts:

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

@Injectable({
  providedIn: 'root' // Angular will automatically inject it
})
export class UserService {
  getUser() {
    return { name: 'John Doe', age: 30 };
  }
}

✅ @Injectable({ providedIn: 'root' }) makes the service available application-wide.

---

2. Inject Service into a Component

In your app.component.ts:

import { Component } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-root',
  template: `
    <h1>{{ user.name }}</h1>
    <p>Age: {{ user.age }}</p>
  `
})
export class AppComponent {
  user: any;

  constructor(private userService: UserService) {
    this.user = this.userService.getUser();
  }
}

✅ Angular automatically injects an instance of UserService into the AppComponent.

---

📄 How Dependency Injection Works Internally

1. Service Registration
   Services are registered in Angular's Injector (thanks to @Injectable).
2. Service Resolution
   Angular checks the constructor parameters of a component/class.
3. Service Provision
   Angular creates or reuses an instance and injects it.

---

🛠️ Providing Services in Different Scopes

Scope	How to Provide	Effect
Application-wide	@Injectable({ providedIn: 'root' })	Same instance everywhere
Module-level	In providers array of a module	Unique instance per module
Component-level	In providers array of a component	Unique instance per component

---

📚 Advanced: Manual Injection with Injector

You can manually inject dependencies using Angular's Injector if needed:

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

constructor(private injector: Injector) {}

someMethod() {
  const userService = this.injector.get(UserService);
  console.log(userService.getUser());
}

⚡ But 99% of the time, constructor injection (shown earlier) is enough!

---

📜 Summary

• DI simplifies creating and managing service instances.
• Services hold reusable logic or data.
• Angular's injector finds and injects the required services automatically.