Angular Dependency Injection
•
1 like•651 views
Slides from my latest talk (and videos) about Angular dependency injection, You can find related videos here: https://www.youtube.com/playlist?list=PLfZsWIHsTcftJl7WlidsXSBAHBXQBR4j2
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Angular Dependency Injection
Similar to Angular Dependency Injection (20)
More from Nir Kaufman
More from Nir Kaufman (20)
Recently uploaded
Recently uploaded (20)
Angular Dependency Injection
- 1. Dependency Injection Practical Angular Series: Nir Kaufman
- 2. Nir Kaufman Google Developer Expert in Angular. Frontend Tech Lead at Next Insurance. More about me at : nir.life Worldwide speaker and trainer.
- 3. Part I Node Injectors
- 4. ModuleInjector Meet the Injectors ElementInjector Created for each Directive Created for each Lazy Module @Component/@directive providers/viewProviders @Injectable({providedIn}) @NgModule.providers
- 5. ModuleInjector Meet the Injectors ElementInjector Created for each Directive Created for each Lazy Module @Component/@directive providers/viewProviders @Injectable({providedIn}) @NgModule.providers
- 6. Control the hierarchy Component Component Component Component Module AppModule PlatformModule NullInjector @Optional()
- 7. Control the hierarchy Component Component Component Component Module AppModule PlatformModule NullInjector ElementInjector providedIn: Module | ‘any’ providedIn: ‘root’ providedIn: ‘platform’
- 8. Reaching the top AppModule PlatformModule NullInjector Throw an Error Module Module Module Module Module Module providedIn: ’Module’ providedIn: ’any’ providedIn: ‘root’ providedIn `platform`
- 9. Injector Con fi guration R3Injector Abstract Injector NodeInjector static create(providers: StaticProvider[]): Injector;
- 10. The Provider Token Instructions Your Code Injector.get()
- 12. Provider instruction Class Instance useClass What you got What you want What to use Function The Result useFactory Object Keep as-is useValue
- 13. Provider instruction Class Instance useClass What you got What you want What to use Function The Result useFactory Object Keep as-is useValue
- 14. Provider instruction Class Instance useClass What you got What you want What to use Function The Result useFactory Object Keep as-is useValue
- 15. Prevent duplicate instance What you got What you want What to use Class A reference useExisting Already Instantiated
- 16. ModuleInjector Meet the Injectors ElementInjector Created for each Directive Created for each Lazy Module @Component/@directive providers/viewProviders @Injectable({providedIn}) @NgModule.providers
- 17. ModuleInjector Meet the Injectors ElementInjector Created for each Directive Created for each Lazy Module @Component/@directive providers/viewProviders @Injectable({providedIn}) @NgModule.providers
- 18. Control the hierarchy Component Component Component Component Module Component Component Component
- 19. Control the hierarchy Component Component Component Component Module Component Component Component NodeInjector NodeInjector NodeInjector NodeInjector
- 20. Control the hierarchy Component Component Component Component Module Component Component Component @Self() @SkipSelf() @Host()
- 21. Component level providers @Component providers[] @Component viewProviders[] Instance is scoped All Children Instance is scoped to Component View
- 22. Part II R3 & Providers
- 23. ModuleInjector Meet the Injectors ElementInjector Created for each Directive Created for each Lazy Module @Component/@directive providers/viewProviders @Injectable({providedIn}) @NgModule.providers
- 24. ModuleInjector Meet the Injectors ElementInjector Created for each Directive Created for each Lazy Module @Component/@directive providers/viewProviders @Injectable({providedIn}) @NgModule.providers
- 25. Control the hierarchy Component Component Component Component Module AppModule PlatformModule NullInjector @Optional()
- 26. Control the hierarchy Component Component Component Component Module AppModule PlatformModule NullInjector ElementInjector providedIn: Module | ‘any’ providedIn: ‘root’ providedIn: ‘platform’
- 27. Reaching the top AppModule PlatformModule NullInjector Throw an Error Module Module Module Module Module Module providedIn: ’Module’ providedIn: ’any’ providedIn: ‘root’ providedIn `platform`
- 28. Injector Con fi guration R3Injector Abstract Injector NodeInjector static create(providers: StaticProvider[]): Injector;
- 29. The Provider Token Instructions Your Code Injector.get()
- 31. Provider instruction Class Instance useClass What you got What you want What to use Function The Result useFactory Object Keep as-is useValue
- 32. Provider instruction Class Instance useClass What you got What you want What to use Function The Result useFactory Object Keep as-is useValue
- 33. Provider instruction Class Instance useClass What you got What you want What to use Function The Result useFactory Object Keep as-is useValue
- 34. Prevent duplicate instance What you got What you want What to use Class A reference useExisting Already Instantiated
- 35. Part III Injection Tokens
- 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 Your Code Implementation
- 38. Wrap external code External code Injection Token
- 39. One token - Many providers provider provider provider rovider provide