DEV Community

loading...
Cover image for Angular Dependency Injection Infographic

Angular Dependency Injection Infographic

Christian Kohler
Originally published at christiankohler.net ・Updated on ・1 min read

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

thumbnail

Download Angular DI Infographic as PDF

Update 20.02.2020

  • Added providedIn: Module example
  • Simplified Provider Syntax (removed string tokens)
  • Minor design improvements

Discussion (4)

Collapse
layzee profile image
Lars Gyrup Brink Nielsen • Edited

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.
Collapse
christiankohler profile image
Christian Kohler Author

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 πŸ’ͺ

Collapse
layzee profile image
Lars Gyrup Brink Nielsen • Edited
  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.

Thread Thread
christiankohler profile image
Christian Kohler Author

Thank you. Great article.