![Injector Con fi guration R3Injector Abstract Injector NodeInjector static create(providers: StaticProvider[]): Injector;](https://image.slidesharecdn.com/dependencyinjection2021-210430074053/75/Angular-Dependency-Injection-9-2048.jpg)
![Component level providers @Component providers[] @Component viewProviders[] Instance is scoped All Children Instance is scoped to Component View](https://image.slidesharecdn.com/dependencyinjection2021-210430074053/75/Angular-Dependency-Injection-21-2048.jpg)
![Injector Con fi guration R3Injector Abstract Injector NodeInjector static create(providers: StaticProvider[]): Injector;](https://image.slidesharecdn.com/dependencyinjection2021-210430074053/75/Angular-Dependency-Injection-28-2048.jpg)
Uploaded byNir Kaufman
Angular Dependency Injection
The document explores dependency injection in Angular, detailing various injector types such as Node Injector and Module Injector, and the hierarchy control within components. It emphasizes the use of providers, including @Injectable and @NgModule, explaining configurations like providedIn. Additionally, it highlights the importance of using Injection Tokens for abstract types in the code implementation.
Angular Dependency Injection
- 1. Dependency Injection Practical AngularSeries: Nir Kaufman
- 2. Nir Kaufman Google DeveloperExpert in Angular. Frontend Tech Lead at Next Insurance. More about me at : nir.life Worldwide speaker and trainer.
- 3. Part I NodeInjectors
- 4. ModuleInjector Meet the Injectors ElementInjector Createdfor each Directive Created for each Lazy Module @Component/@directive providers/viewProviders @Injectable({providedIn}) @NgModule.providers
- 5. ModuleInjector Meet the Injectors ElementInjector Createdfor each Directive Created for each Lazy Module @Component/@directive providers/viewProviders @Injectable({providedIn}) @NgModule.providers
- 6. Control the hierarchy Component ComponentComponent Component Module AppModule PlatformModule NullInjector @Optional()
- 7. Control the hierarchy Component ComponentComponent Component Module AppModule PlatformModule NullInjector ElementInjector providedIn: Module | ‘any’ providedIn: ‘root’ providedIn: ‘platform’
- 8. Reaching the top AppModule PlatformModule NullInjector Throwan Error Module Module Module Module Module Module providedIn: ’Module’ providedIn: ’any’ providedIn: ‘root’ providedIn `platform`
- 9. Injector Con fi guration R3Injector Abstract Injector NodeInjector staticcreate(providers: StaticProvider[]): Injector;
- 10. The Provider Token Instructions YourCode Injector.get()
- 11.
- 12. Provider instruction Class InstanceuseClass What you got What you want What to use Function The Result useFactory Object Keep as-is useValue
- 13. Provider instruction Class InstanceuseClass What you got What you want What to use Function The Result useFactory Object Keep as-is useValue
- 14. Provider instruction Class InstanceuseClass What you got What you want What to use Function The Result useFactory Object Keep as-is useValue
- 15. Prevent duplicate instance Whatyou got What you want What to use Class A reference useExisting Already Instantiated
- 16. ModuleInjector Meet the Injectors ElementInjector Createdfor each Directive Created for each Lazy Module @Component/@directive providers/viewProviders @Injectable({providedIn}) @NgModule.providers
- 17. ModuleInjector Meet the Injectors ElementInjector Createdfor each Directive Created for each Lazy Module @Component/@directive providers/viewProviders @Injectable({providedIn}) @NgModule.providers
- 18. Control the hierarchy Component ComponentComponent Component Module Component Component Component
- 19. Control the hierarchy Component ComponentComponent Component Module Component Component Component NodeInjector NodeInjector NodeInjector NodeInjector
- 20. Control the hierarchy Component ComponentComponent Component Module Component Component Component @Self() @SkipSelf() @Host()
- 21. Component level providers @Component providers[] @Component viewProviders[] Instanceis scoped All Children Instance is scoped to Component View
- 22. Part II R3& Providers
- 23. ModuleInjector Meet the Injectors ElementInjector Createdfor each Directive Created for each Lazy Module @Component/@directive providers/viewProviders @Injectable({providedIn}) @NgModule.providers
- 24. ModuleInjector Meet the Injectors ElementInjector Createdfor each Directive Created for each Lazy Module @Component/@directive providers/viewProviders @Injectable({providedIn}) @NgModule.providers
- 25. Control the hierarchy Component ComponentComponent Component Module AppModule PlatformModule NullInjector @Optional()
- 26. Control the hierarchy Component ComponentComponent Component Module AppModule PlatformModule NullInjector ElementInjector providedIn: Module | ‘any’ providedIn: ‘root’ providedIn: ‘platform’
- 27. Reaching the top AppModule PlatformModule NullInjector Throwan Error Module Module Module Module Module Module providedIn: ’Module’ providedIn: ’any’ providedIn: ‘root’ providedIn `platform`
- 28. Injector Con fi guration R3Injector Abstract Injector NodeInjector staticcreate(providers: StaticProvider[]): Injector;
- 29. The Provider Token Instructions YourCode Injector.get()
- 30.
- 31. Provider instruction Class InstanceuseClass What you got What you want What to use Function The Result useFactory Object Keep as-is useValue
- 32. Provider instruction Class InstanceuseClass What you got What you want What to use Function The Result useFactory Object Keep as-is useValue
- 33. Provider instruction Class InstanceuseClass What you got What you want What to use Function The Result useFactory Object Keep as-is useValue
- 34. Prevent duplicate instance Whatyou got What you want What to use Class A reference useExisting Already Instantiated
- 35. Part III InjectionTokens
- 36. Use an `InjectionToken`whenever the type you are injecting is not rei fi ed (does not have a runtime representation) such as when injecting an Interface, callable type, array or parameterized type. From the source
- 37. Depend on abstraction Abstraction YourCode Implementation
- 38. Wrap external code Externalcode Injection Token
- 39. One token -Many providers provider provider provider rovider provide
- 40.
- 41.