Understanding the Angular Injector

One of the most powerful features in Angular is the dependency injection mechanism. You're just adding a provider inside your class constructor, and you getting the instance from Angular. Angular 9 introduced new way to register providers on any module level, and on the platform level. Let learn together how the DI works behind the scene. What are tree shakable providers and why we need new levels for registering them?

Transcript

1. Understanding the Angular Injector eliraneliassy
2. e-square.io — Founder & CEO @ e-square.io — GDE for Angular & Web Technologies — Writer for AngularInDepth — Community leader About mySelf
3. e-square.io R3Injector
4. e-square.io ProvidedIn - new options
5. e-square.io What are Injectors? • Injector is a Key-Value map of Token -> Provider
6. e-square.io Injector - get and register
7. e-square.io Creating providers
8. e-square.io Injecting the provider
9. e-square.io Resolve the Provider - component level
10. e-square.io Resolve the Provider
11. e-square.io Resolve the Provider - Module level
12. e-square.io providedIn levels • ‘root’: The application-level injector in most apps. • ‘any’: Provides a unique instance in every module (including lazy modules) that injects the token. • ‘platform’: A special singleton platform injector shared by all applications on the page.
13. e-square.io Resolve the Provider - special decorators • @Optional() • @Host() • @SkipSelf() • @Self()
14. e-square.io Live Coding…
15. e-square.io The magic - @Injectable
16. e-square.io The magic - defineInjectable
17. e-square.io Micro-Front end? Not yet…
18. e-square.io Where else then?
19. We’re here to help you!
20. Thank You @eliraneliassy eliran.eliassy@gmail.com eliraneliassy https://eliassy.dev https://e-square.io