Angular Dependency Injection Infographic

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

Comments

[Lars Gyrup Brink Nielsen]

Thank you for creating this 👏

A few comments:

1. We can also reference set Angular module as the provider scope, using providedIn: MyModule.
2. Using strings and other primitive values as dependency injecton tokens has been deprecated since version 4.0.0 and should not be encouraged because of this.

[Christian Kohler]

Thank you Lars. Very good input.

1. I'll add providedIn: MyModule. Also thinking about examples when to use what. Especially now with Ivy and the "any" provider 🤔

2. Good point. What would you say, would you completely remove the example or rather mark it as deprecated?

Thank you for your feedback 💪

[Lars Gyrup Brink Nielsen]

1. 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: MyModule syntax is just the tree-shakable way of expressing the module provider scope that's been around since v2.0.0 (the providers metadata for Angular modules).

2. 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 Map of InjectionTokens or something like that instead.

[Christian Kohler]

Thank you. Great article.