ANGULAR DEPENDENCY INJECTION EXPLAINED

  • Code without DI
export class Cpu {

constructor() {}
}
export class Ram {

constructor() {}
}
export class Laptop {
cpu: Cpu;
ram: Ram;

constructor() {
this.cpu = new Cpu();
this.ram = new Ram();
}

}
export class Ram {
size: number;
unit: string;

constructor(size: number, unit: string) {
this.size = size;
this.unit = unit;
}
}
export class Cpu {
model: string;

constructor(model: string) {
this.model = model;
}
}
export class Laptop {
cpu: Cpu;
ram: Ram;

constructor(cpuModel: string, ramSize: number, ramUnit: string) {
this.cpu = new Cpu(cpuModel);
this.ram = new Ram(ramSize, ramUnit);
}
}
  • DI as a design pattern
export class Laptop {
cpu: Cpu;
ram: Ram;

constructor(cpu: Cpu, ram: Ram) {
this.cpu = cpu;
this.ram = ram;
}
}
const cpu: Cpu = new Cpu('Intel');       
const ram: Ram = new Ram(8,'GB');
const laptop: Laptop = new Laptop(cpu, ram);
const cpu: Cpu = new Cpu('Intel', 'i9-9900K');
const ram: Ram = new Ram(8,'GB');
const laptop: Laptop = new Laptop(cpu, ram);
  • DI as a framework
@Injectable()
export class Cpu {
model: string;
generation: string;

constructor(@Inject('model') model: string, @Inject('generation') generation: string) {
this.model = model;
this.generation = generation;
}
}
providers: [   
Cpu,
Ram,
{provide: 'model', useValue: 'Intel'},
{provide: 'generation', useValue: 'i9-9900K'},
{provide: 'size', useValue: 8},
{provide: 'unit', useValue: 'GB'}
],
constructor(private cpu: Cpu, private ram: Ram) {
this.createLaptop();
}

createLaptop(): void {
const laptop: Laptop = new Laptop(this.cpu, this.ram);
console.log('Laptop: ', laptop);
}
providers: [
Ram, Cpu,
{provide: 'model', useValue: 'AMD'},
{provide: 'generation', useValue: 'Radeon'},
{provide: 'size', useValue: 32},
{provide: 'unit', useValue: 'GB'}

]
providers: [
Ram, Cpu,
{provide: 'model', useValue: 'Intel'},
{provide: 'generation', useValue: 'i9-9900K'},
{provide: 'size', useValue: 16},
{provide: 'unit', useValue: 'GB'}
]
  • Conclusions

--

--

--

Senior Front End Software Engineer focused on Angular. Passionate about learning new skills and sharing my knowledge. Blog agdev.tech in progress.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

TIL/2021–01–04

How To Write Secure JavaScript Code

How to switch test runner to jest instead of mocha in anchor

How to Implement Brute Force Attacks on Hash Values in JavaScript

JAVA /Abstract Methods and Classes

Custom React Hooks: Why Do We Need a Context

How I made my first chrome extension

Best way to customize user verification in laravel

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
AG Dev

AG Dev

Senior Front End Software Engineer focused on Angular. Passionate about learning new skills and sharing my knowledge. Blog agdev.tech in progress.

More from Medium

Angular proxy configuration for API calls

Unit Testing in Angular

How to fix “ng: command not found” in angular

How to fix