Angular's DI
The last example introduced a hypothetical
Injector
object. Angular simplifies DI even further. With Angular, programmers almost never have to get bogged down with injection details.Angular's DI system is (mostly) controlled through
@NgModule
. Specifically the providers
and declarations
array. (declarations
is where we put components, pipes and directives; providers
is where we put services)For example:
import { Injectable, NgModule } from '@angular/core';
@Component({
// ...
})
class ChatWidget {
constructor(private authService: AuthService, private authWidget: AuthWidget,
private chatSocket: ChatSocket) {}
}
@NgModule({
declarations: [ ChatWidget ]
})
export class AppModule {
};
In the above example the
AppModule
is told about the ChatWidget
class. Another way of saying this is that Angular has been provided a ChatWidget
.That seems pretty straightforward, but astute readers will be wondering how Angular knows how to build
ChatWidget
. What if ChatWidget
was a string, or a plain function?Angular assumes that it's being given a class.
What about
AuthService
, AuthWidget
and ChatSocket
? How is ChatWidget
getting those?It's not, at least not yet. Angular does not know about them yet. That can be changed easily enough:
import { Injectable, NgModule } from '@angular/core';
@Component({
// ...
})
class ChatWidget {
constructor(private authService: AuthService, private authWidget: AuthWidget,
private chatSocket: ChatSocket) {}
}
@Component({
// ...
})
class AuthWidget {}
@Injectable()
class AuthService {}
@Injectable()
class ChatSocket {}
@NgModule({
declarations[ ChatWidget, AuthWidget ]
providers: [ AuthService, ChatSocket ],
})
Okay, this is starting to look a little bit more complete. Although it's still unclear how
ChatWidget
is being told about its dependencies. Perhaps that is related to those odd @Injectable
statements.Last modified 4yr ago