*https://angular.io/guide/dependency-injection*

Dependency Injection

This is what the "Depender" code looks like. This is a the place the dependency is injected into.

Depender:

// Depender Component
import { DependencyThing } from 'the/location/its/from/dependency.thing'

@Component({...})
export class DependerClass {
	// Injected right here 👇
	constructor(private dependencyThing: DependencyThing) {}
}

How do you make a thing Injectable you ask? You give it a pretty decorator 🎄

Dependency:

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

@Injectable() // 👈 This fulla
export class DependencyThing{
	// do stuff
}

Providers

https://angular.io/guide/providers

"A provider is an instruction to the Dependency Injection system on how to obtain a value for a dependency"

Dependencies can be made available (provided) to the whole app or only to specific modules.

There are two ways you can specify where a dependency should be provided. Inside the @Injectable annotation or in the providers property of a given Module|Component|Directive.

@Injectable Annotation:

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

@Injectable({
	providedIn: 'root' // 👈
})
export class DependencyThing{}

Providers Property:

// Depender Module
@NgModule({
  declarations: [...],
  imports: [...],
  providers: [DependencyThing], // 👈
  bootstrap: [...]
})
export class AppModule { }

Configuring Providers

https://angular.io/guide/dependency-injection-providers

There are 4 types of providers: useClass, useExisting, useValue and useFactory.