Angular Dependency Injection
0 likes101 views
The document provides an in-depth exploration of dependency injection in Angular, detailing how to use the UserService in various components and modules. It discusses the structure of injectors, including root and hierarchical injectors, as well as best practices for declaring providers. Additionally, it references official Angular documentation for further guidance on dependency injection concepts.
![AppModule RootInjector
providers: [ UserService ]](https://image.slidesharecdn.com/ngdideepdive-181212184907/85/Angular-Dependency-Injection-17-320.jpg)
![AppModule RootInjector
providers: [ UserService ]
BrowserModule providers
FontAwesomeModule
providers](https://image.slidesharecdn.com/ngdideepdive-181212184907/85/Angular-Dependency-Injection-18-320.jpg)
![AppModule RootInjector
providers: [ UserService ]
BrowserModule providers
FontAwesomeModule
providers
providers: [ UserService ]
BrowserModule providers
FontAwesomeModule providers](https://image.slidesharecdn.com/ngdideepdive-181212184907/85/Angular-Dependency-Injection-19-320.jpg)
![AppModule RootInjector
providers: [ UserService ]
AppComponent
constructor(user: UserService)
BrowserModule providers
FontAwesomeModule
providers
providers: [ UserService ]
BrowserModule providers
FontAwesomeModule providers](https://image.slidesharecdn.com/ngdideepdive-181212184907/85/Angular-Dependency-Injection-20-320.jpg)
![AppModule RootInjector
providers: [ UserService ]
AppComponent
constructor(user: UserService)
BrowserModule providers
FontAwesomeModule
providers
providers: [ UserService ]
BrowserModule providers
FontAwesomeModule providers
UserService](https://image.slidesharecdn.com/ngdideepdive-181212184907/85/Angular-Dependency-Injection-21-320.jpg)
![AppModule RootInjector
providers: [ UserService ]
AppComponent
constructor(user: UserService)
BrowserModule providers
FontAwesomeModule
providers
providers: [ UserService ]
BrowserModule providers
FontAwesomeModule providers
UserService](https://image.slidesharecdn.com/ngdideepdive-181212184907/85/Angular-Dependency-Injection-22-320.jpg)
![AppModule RootInjector
providers: [ UserService ]
AppComponent
constructor(user: UserService)
BrowserModule providers
FontAwesomeModule
providers
providers: [ UserService ]
BrowserModule providers
FontAwesomeModule providers
UserService
BlaComponent
constructor(user: UserService)](https://image.slidesharecdn.com/ngdideepdive-181212184907/85/Angular-Dependency-Injection-23-320.jpg)
![AppModule RootInjector
providers: [ UserService ]
AppComponent
constructor(user: UserService)
BrowserModule providers
FontAwesomeModule
providers
providers: [ UserService ]
BrowserModule providers
FontAwesomeModule providers
UserService
BlaComponent
constructor(user: UserService)](https://image.slidesharecdn.com/ngdideepdive-181212184907/85/Angular-Dependency-Injection-24-320.jpg)
![AppModule RootInjector
providers: [ UserService ]
AppComponent
constructor(user: UserService)
BrowserModule providers
FontAwesomeModule
providers
providers: [ UserService ]
BrowserModule providers
FontAwesomeModule providers
UserService
BlaComponent
constructor(user: UserService)](https://image.slidesharecdn.com/ngdideepdive-181212184907/85/Angular-Dependency-Injection-25-320.jpg)
Angular Dependency Injection
- 3. constructor(private user: UserService) constructor(@Inject(UserService) public user: UserService)
- 17. AppModule RootInjector providers: [ UserService ]
- 18. AppModule RootInjector providers: [ UserService ] BrowserModule providers FontAwesomeModule providers
- 19. AppModule RootInjector providers: [ UserService ] BrowserModule providers FontAwesomeModule providers providers: [ UserService ] BrowserModule providers FontAwesomeModule providers
- 20. AppModule RootInjector providers: [ UserService ] AppComponent constructor(user: UserService) BrowserModule providers FontAwesomeModule providers providers: [ UserService ] BrowserModule providers FontAwesomeModule providers
- 21. AppModule RootInjector providers: [ UserService ] AppComponent constructor(user: UserService) BrowserModule providers FontAwesomeModule providers providers: [ UserService ] BrowserModule providers FontAwesomeModule providers UserService
- 22. AppModule RootInjector providers: [ UserService ] AppComponent constructor(user: UserService) BrowserModule providers FontAwesomeModule providers providers: [ UserService ] BrowserModule providers FontAwesomeModule providers UserService
- 23. AppModule RootInjector providers: [ UserService ] AppComponent constructor(user: UserService) BrowserModule providers FontAwesomeModule providers providers: [ UserService ] BrowserModule providers FontAwesomeModule providers UserService BlaComponent constructor(user: UserService)
- 24. AppModule RootInjector providers: [ UserService ] AppComponent constructor(user: UserService) BrowserModule providers FontAwesomeModule providers providers: [ UserService ] BrowserModule providers FontAwesomeModule providers UserService BlaComponent constructor(user: UserService)
- 25. AppModule RootInjector providers: [ UserService ] AppComponent constructor(user: UserService) BrowserModule providers FontAwesomeModule providers providers: [ UserService ] BrowserModule providers FontAwesomeModule providers UserService BlaComponent constructor(user: UserService)
- 28. AppComponent constructor(user: UserService) Component C RootComponentInjector (A) ParentInjector (B) ChildInjector (C) Component Tree Injector Tree Component A Component B
- 30. AppModule AppComponen Component C Component A Component B RootComponentInjector (A) ParentInjector (B) ChildInjector (C) RootInjector
- 31. AppModule AppComponen Component C Component A Component B RootComponentInjector (A) ParentInjector (B) ChildInjector (C) RootInjector LazyLoadModule Component C Component A Component B RootComponentInjector (A) ParentInjector (B) ChildInjector (C) LazyLoadRootInjector
- 34. AppModule AppComponen Component C Component A Component B RootComponentInjector (A) ParentInjector (B) ChildInjector (C) RootInjector LazyLoadModule Component C Component A Component B RootComponentInjector (A) ParentInjector (B) ChildInjector (C) LazyLoadRootInjector
- 35. AppModule AppComponen Component C Component A Component B RootComponentInjector (A) ParentInjector (B) ChildInjector (C) RootInjector LazyLoadModule Component C Component A Component B RootComponentInjector (A) ParentInjector (B) ChildInjector (C) LazyLoadRootInjector PlatformInjector
- 38. • @Injectable() Tree-Shakable • @NgModule Import, Lazy
- 39. • @Injectable() Tree-Shakable • @NgModule Import, Lazy • @Component Hierarchical @Directive
- 40. Beware of provider declaration
- 41. Reference • https://angular.io/guide/hierarchical-dependency-injection • https://angular.io/guide/dependency-injection-providers • https://angular.io/guide/providers • https://angular.io/guide/singleton-services • https://angular.io/guide/lazy-loading-ngmodules