Angular Dependency Injection

Angular is an open-source framework for building web modern web applications. One of the key principles of Angular is dependency injection. Dependency Injection is one of the widely used techniques in application programming. It is included in almost every framework. In this article, we will learn about Dependency Injection and how to perform Dependency Injection in Angular.

Prerequisites

• NodeJS NPM
• Angular CLI

What is Dependency Injection ?

Dependency Injection is a design pattern in which components or services are provided with their dependencies instead of creating or locating them internally. In Angular, the Dependency Injection system manages the dependencies between various parts of an application, providing loose coupling and modular development.

Key Concepts of Dependency Injection in Angular

1. Providers:
   • Providers are responsible for registering dependencies with the Angular Dependency Injection system.
   • They define how instances of services or values are created and made available throughout the application.
   • Providers are typically registered at the module level using the providers array in the module metadata or at the component level using the providers property in the component metadata.
2. Injection Tokens:
   • Injection tokens serve as keys for looking up dependencies in Angular’s Dependency Injection system.
   • They are typically classes or values that act as unique identifiers for specific dependencies.
   • Angular provides built-in injection tokens for commonly used services like HttpClient, RouterModule, etc.
3. Injection Mechanism:
   • Components, services, or other Angular constructs declare dependencies in their constructors by specifying the corresponding injection tokens as parameters.
   • When Angular creates an instance of a component or service, it resolves the dependencies by looking up the providers registered in the current injector hierarchy.
   • Angular automatically injects the appropriate dependencies into the constructor parameters based on the injection tokens.
4. Hierarchical Nature:
   • Angular’s Dependency Injection system is hierarchical, meaning that each component has its own injector that can access dependencies provided by its parent component or any ancestor component.
   • This hierarchical nature allows dependencies to be scoped at different levels of the application, promoting encapsulation and reusability.

Steps to Create Angular Application And Installing Module:

Step 1: Create a Angular application using the following command:

ng new my-App

Step 2: Go to your project directory

cd my-App

Step 3: Create a service using the following command.

ng generate service my-service

We have now completed setting up the angular environment and created a service.

Project Structure:

Dependencies:

"dependencies": {
    "@angular/animations": "^15.2.0",
    "@angular/common": "^15.2.0",
    "@angular/compiler": "^15.2.0",
    "@angular/core": "^15.2.0",
    "@angular/forms": "^15.2.0",
    "@angular/platform-browser": "^15.2.0",
    "@angular/platform-browser-dynamic": "^15.2.0",
    "@angular/router": "^15.2.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.12.0"
  },

Below is the example of performing dependency injection in Angular

HTML

<!-- app.component.html -->

<button (click)="user()">Get Users</button>
<div *ngIf="status">
    <table>
        <tr>
            <th>Name</th>
            <th>Country</th>
        </tr>
        <tr *ngFor="let user of users">
            <td>{{user.name}}</td>
            <td>{{user.country}}</td>
        </tr>
    </table>
</div>

JavaScript

//my-service.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs';

@Injectable({
    providedIn: 'root'
})
export class MyService {

    baseUrl = 'http://localhost:8080/';
    constructor(private http: HttpClient) { }

    getusers() {
        return this.http.get(this.baseUrl + 'getusers').pipe(
            map((response: any) => {
                const user = response;
                if (user) {
                    return user;
                }
            })
        );
    }
}

JavaScript

//app.component.ts

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    users: any;
    status: boolean = false;
    constructor(private service: MyService, private router: Router) {

    }
    ngOnInit(): void {

    }
    user() {
        this.service.getusers().subscribe({
            next: (users) => {
                this.users = users;
                console.log(this.users);
                this.status = true;
            },
        })
    }
}

In the above example two services are injected which are Http Client a built in service provided by the angular to deal with the http requests and responses and MyService which is a service created by us. MyService component uses injected http service to get the users from the database. app component uses injected MyService to display those users on the page once the user clicks the get users button.

Output:

Benefits of Dependency Injection in Angular

• Modularity and Encapsulation: Dependency Injection helps in modular development by allowing components and services to declare their dependencies explicitly. It promotes encapsulation by decoupling components from the concrete implementations of their dependencies.
• Testability: Dependency Injection provides unit testing by making it easy to replace dependencies with mock objects or stubs during testing. Components and services can be tested in isolation, leading to more reliable and maintainable tests.
• Reusability and Maintainability: Dependency Injection promotes code reuse by enabling components and services to be easily composed and reused across different parts of the application. It improves maintainability by reducing code duplication and making it easier to understand and refactor code.