Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
Ben Nadel at CFUNITED 2009 (Lansdowne, VA) with: Sandy Clark
Ben Nadel at CFUNITED 2009 (Lansdowne, VA) with: Sandy Clark@sandraclarktw )

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.



Looking For A New Job?

Ooops, there are no jobs. Post one now for only $29 and own this real estate!

100% of job board revenue is donated to Kiva. Loans that change livesFind out more »

Reader Comments