Angular has its own dependency injection framework. It's very powerful and helps increase the efficiency and modularity of your application. It can also be quite complex when compared to traditional DI frameworks.
The official documentation is very well written and a must read for every Angular developer. The only thing missing for me was a good graphical overview. This is why I created this infographic poster.
👩🚀 Protip: 🖨 Print your DI poster and hang it in the toilet. Within a few weeks your work colleagues are DI experts 😀
✅ Also feel free to use the poster for education purposes like workshops or in classes.
👆 It took me hours to complete this cheatsheet. If you like it follow me on twitter and spread the word 🙌
🤓 Did you find a mistake? Please help improve the infographic and open an issue here
Download Angular DI Infographic as PDF
Download Angular DI Infographic as PDF
Update 20.02.2020
- Added providedIn: Module example
- Simplified Provider Syntax (removed string tokens)
- Minor design improvements
Top comments (4)
Thank you for creating this 👏
A few comments:
providedIn: MyModule.Thank you Lars. Very good input.
I'll add providedIn: MyModule. Also thinking about examples when to use what. Especially now with Ivy and the "any" provider 🤔
Good point. What would you say, would you completely remove the example or rather mark it as deprecated?
Thank you for your feedback 💪
I have an example of what to use a module scope for in my article "Tree-shakable dependencies in Angular projects". Of course, the
providedIn: MyModulesyntax is just the tree-shakable way of expressing the module provider scope that's been around since v2.0.0 (theprovidersmetadata for Angular modules).I would say remove it. It's been deprecated for almost 3 years (since v4.0.0). Some projects use it for dynamic injection tokens, but that's an edge case and should be implemented using a
MapofInjectionTokens or something like that instead.Thank you. Great article.