Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
Ben Nadel at CFUNITED 2010 (Landsdown, VA) with: Rolando Lopez and Ryan Jeffords
Ben Nadel at CFUNITED 2010 (Landsdown, VA) with: Rolando Lopez@rolando_lopez ) and Ryan Jeffords@ryanjeffords )

Exploring Dependency-Injection Tokens Using Pictures In Angular 2

By Ben Nadel on

The other week, I carried out a fun little exploration in using class delegates or class proxies in the dependency-injection mechanism in Angular 2. While I don't think this will be a terribly common use-case, the exploration really forces you to think about how dependency-injection tokens work and how they are mapped to provider instances by the hierarchical injector. This can lead to a non-trivial mental model. So, as suggested by Sean (in the comments of said post), I wanted to try and articulate this crazy mind map a little bit more clearly.... using pictures:


 
 
 

 
Exploring provider tokens in the Angular 2 dependency-injection mechanism.  
 
 
 

As you can see, the "common case" is actually pretty straightforward - you use a Class as the provider token for the single instance of that class. But, once you step outside the common use-case, it can start to get quite a bit more hairy. And this graphic doesn't even attempt to look at all the different use-cases for the various provider types (ie, class vs. value vs. factory, etc.). But, hopefully this graphic does sheds a little light on how tokens map to instances in the Angular 2 dependency-injector; and, how you can use that mechanism to do some interesting things.




Reader Comments

Post A Comment

You — Get Out Of My Dreams, Get Into My Comments
Live in the Now
Oops!
Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.