Introduction

Dependency Injection (DI) is a design pattern used to implement IoC (Inversion of Control), allowing a class to receive its dependencies from an external source rather than creating them itself. In Angular, DI is a core concept that enables efficient management of dependencies, making the code more modular, testable, and maintainable.

Key Concepts

Dependency: An object that another object depends on.
Injector: A service locator that provides dependencies to classes.
Provider: An object that tells the injector how to obtain or create a dependency.
Token: A key used to map a dependency to a provider.

How Dependency Injection Works in Angular

Registering Providers: Dependencies are registered with Angular's injector using providers.
Injecting Dependencies: Angular uses the injector to supply dependencies to classes that need them.

Registering Providers

Providers can be registered in different scopes:

Root Scope: Available application-wide.
Component Scope: Available only within a specific component and its children.

Example: Registering a Service in the Root Scope

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

@Injectable({
  providedIn: 'root',
})
export class DataService {
  getData() {
    return 'Data from DataService';
  }
}

Example: Registering a Service in a Component Scope

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

@Injectable()
export class LocalService {
  getLocalData() {
    return 'Data from LocalService';
  }
}

// In the component
import { Component } from '@angular/core';
import { LocalService } from './local.service';

@Component({
  selector: 'app-local',
  templateUrl: './local.component.html',
  styleUrls: ['./local.component.css'],
  providers: [LocalService],
})
export class LocalComponent {
  constructor(private localService: LocalService) {}
}

Injecting Dependencies

Dependencies are injected into a class via the constructor.

Example: Injecting a Service into a Component

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-data',
  templateUrl: './data.component.html',
  styleUrls: ['./data.component.css'],
})
export class DataComponent implements OnInit {
  data: string;

  constructor(private dataService: DataService) {}

  ngOnInit(): void {
    this.data = this.dataService.getData();
  }
}

Practical Exercise

Task

Create a new Angular service named LoggingService that logs messages to the console.
Register the LoggingService in the root scope.
Inject the LoggingService into a component and use it to log a message when the component initializes.

Solution

Create the LoggingService

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

@Injectable({
  providedIn: 'root',
})
export class LoggingService {
  log(message: string) {
    console.log(message);
  }
}

Inject the LoggingService into a Component

import { Component, OnInit } from '@angular/core';
import { LoggingService } from './logging.service';

@Component({
  selector: 'app-logger',
  templateUrl: './logger.component.html',
  styleUrls: ['./logger.component.css'],
})
export class LoggerComponent implements OnInit {
  constructor(private loggingService: LoggingService) {}

  ngOnInit(): void {
    this.loggingService.log('LoggerComponent initialized');
  }
}

Common Mistakes and Tips

Forgetting to Register Services: Ensure that services are registered either in the root scope or the component scope.
Circular Dependencies: Be cautious of circular dependencies, which can cause runtime errors.
Using providedIn: 'root': This is the recommended way to register services in the root scope as it ensures tree-shakable providers.

Conclusion

Dependency Injection is a powerful feature in Angular that promotes modularity and testability. By understanding how to register and inject dependencies, you can create more maintainable and scalable applications. In the next section, we will explore hierarchical injectors and how they can be used to manage dependencies more effectively.

Dependency Injection

Introduction

Key Concepts

How Dependency Injection Works in Angular

Registering Providers

Example: Registering a Service in the Root Scope

Example: Registering a Service in a Component Scope

Injecting Dependencies

Example: Injecting a Service into a Component

Practical Exercise

Task

Solution

Common Mistakes and Tips

Conclusion

Angular Course

Module 1: Introduction to Angular

Module 2: Angular Components

Module 3: Data Binding and Directives

Module 4: Services and Dependency Injection

Module 5: Routing and Navigation

Module 6: Forms in Angular

Module 7: HTTP Client and Observables

Module 8: State Management

Module 9: Testing in Angular

Module 10: Advanced Angular Concepts

Module 11: Deployment and Best Practices