AppDividend
Latest Code Tutorials

Angular 9/8/7/6/5 Dependency Injection Example

Dependency Injection in Angular

0

Dependencies are services or objects that a class needs to perform its function. DI is a coding pattern in which a class asks for dependencies from external sources rather than creating them itself.

In Angular, the DI framework provides declared dependencies to a class when that class is instantiated. This guide explains how DI works in Angular, and how you use it to make your apps flexible, efficient, and robust, as well as testable and maintainable.

Angular Dependency injection is an essential application design pattern. Angular has its dependency injection framework, and you really can’t build an Angular application without it. It’s used so widely that almost everyone just calls it DI.

Angular Dependency Injection

First, we will take an example of what is the scenario where we do not use any DI pattern.

Here, I am describing the example as a primary dependency injection.

Example

Let us take the example of a Computer. The Computer consists of the following things.

  1. Monitor
  2. CPU
  3. Keyboard

So to complete the Computer, we need those three things.

In this example, we need to require a total of four classes to build a fully functional computer.

  1. Computer class
  2. Monitor class
  3. CPU class
  4. Keyboard class

Without DI(Dependency Injection)

First, create four classes. All Four classes are in the src  >>  app directory.

Make Monitor.ts class.

// Monitor.ts

export class Monitor {
     public monitorNo = 2;
}

Next Keyboard.ts class.

// Keyboard.ts

export class Keyboard {
    public keyboardNo = 1;
}

Now, create CPU.ts class.

// CPU.ts

export class CPU {
    public cpuNo = 3;
}

Finally, create the Computer.ts class.

// Computer.ts

import { Monitor } from './Monitor';
import { CPU } from './CPU';
import { Keyboard } from './Keyboard';

export class Computer {
 
  public monitor: Monitor;
  public cpu: CPU;
  public keyboard: Keyboard;
 
  constructor() {
    this.monitor = new Monitor();
    this.cpu = new CPU();
    this.keyboard = new Keyboard();
  }
 public description = 'This Matrix computer';
  complete() {
    return `${this.description} has ` +
      `${this.monitor.monitorNo} monitors, ${this.cpu.cpuNo} cpus and, ${this.keyboard.keyboardNo} keyboard.`;
  }
}

To complete the Computer class, we need to import all three classes here and make one fully functional Matrix computer.

Now, here we have created three classes instances in the constructor of Computer class.

Note that the Computer class is dependent on these three classes. Otherwise, it will not complete the Computer.

We are creating instances in the constructor. So monitors, CPUs, and keyboards are not decoupled from the Computer class.

Finally, to work this example, we need to change the app.component.ts file.

// app.component.ts

import { Component } from '@angular/core';
import { Computer } from './Computer';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
	public computer: Computer;

	constructor(){
		this.computer = new Computer();
	}
  makeComputer(){
  	return this.computer.complete();
  }
}

And to change the view, edit the app.component.html

<!--The whole content below can be removed with the new code.-->
<div style="text-align:center">
  <h1>
      {{makeComputer()}}!!
  </h1>
</div>

Output

Save this file and type the following command.

ng serve
Note: I am using Angular CLI for a quick configuration.
At http://localhost:4200/
You can see the String like This Matrix computer has two monitors, three CPUs, and one keyboard.!!

Example With Dependency Injection(DI)

If we are using Dependency Injection, then we do not need to create the instances in the constructor.

First, we need to provide all the dependencies to the app.module.ts class.

// app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { Monitor } from './Monitor';
import { CPU } from './CPU';
import { Keyboard } from './Keyboard';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [Monitor, CPU, Keyboard],
  bootstrap: [AppComponent]
})
export class AppModule { }

In providers array, we need to provide all three dependencies.

Then, In the Computer.ts class, inject those dependencies into Computer’s constructor.

// Computer.ts

import { Monitor } from './Monitor';
import { CPU } from './CPU';
import { Keyboard } from './Keyboard';

export class Computer { 
 constructor(public monitor: Monitor, public cpu: CPU, public keyboard: Keyboard) {}
 public description = 'This Matrix computer';
  complete() {
    return `${this.description} has ` +
      `${this.monitor.monitorNo} monitors, ${this.cpu.cpuNo} cpus, and ${this.keyboard.keyboardNo} keyboard.`;
  }
}

Finally, modify the app.component.ts file.

// app.component.ts

import { Component } from '@angular/core';
import { Computer } from './Computer';
import { Monitor } from './Monitor';
import { CPU } from './CPU';
import { Keyboard } from './Keyboard';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
public computer: Computer;	
constructor(){
	this.computer = new Computer(new Monitor(), new CPU(), new Keyboard());
}
 makeComputer(){
  	return this.computer.complete();
  }
}

So, we have passed the argument at the time of the creation of a Computer instance.

When a computer instance is created at that time, also all the other instances of other classes are created.

After, save this file, the output will be the same as the previous one.

Basic Angular 9/8/7/6/5 Dependency Injection Example is over.

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.