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