Where is the injector in this diagram?

[binaryMoods]

From Angular JS conceptual overview. It says: "What changed? We moved the convertCurrency function and the definition of the existing currencies into the new file finance2.js...

This is where Dependency Injection comes into play... Within Angular, the DI container is called the injector." Link to conceptual overview - https://docs.angularjs.org/guide/concepts

Which one is the injector in their diagram? The invoice module (it holds the dependency being injected) or the finance module (it is the code being injected)?

[Vaibhav Gupta]

Hi,

In this diagram injector is not mentioned explicitly. Injector is the component which achieves dependency injection in angularjs. The above scenario illustrates one of the ways to achieve dependency injection. You may refer to the complete documentation for DI in angular here:

https://docs.angularjs.org/guide/di

Does this answer your question?

Regards,

Vaibhav Gupta

[Sander Elias]

Hi binaryMoods,

In your diagram, the blue lines are the injector.. :)

The injector itself isn't actually in your diagram. It is the piece of angular that does the lookup for you. What happens is, you 'register' all your code into the injector's internal catalog. You do that by using the `.controller('name', function)`. The same goes for services/factories/etc

that is how you 'register' something. 

Once everything is registered, and your app has booted, the injector makes sure your function's  get what you asked for. How does this work?

Actually, every function you register, has an $injected property. that property takes an array of strings, which represents the functions that are registered with the injector.

There are a number of ways to create this property.

1. Create it manually. 
   
   someController.$inject=['currencyConverter']
   function someController(currencyConverter) {...}
   
   
2. Use a tool like ngAnnotate
3. provide an array instead of a function. Angular will convert this to 1.
4. angular analyzes the function signature. This is the most error-prone method, and surely doesn't work while minifying your source
   

That's the most of it. If you have more questions about it, just ask them.

Regards

Sander

[binaryMoods]

Hi Sander,

Thank you for answering. I still find it confusing "DI container is called injector", the way I understand it is anything that contains DI is an injector, in addition to an explicit service called $injector. The same way there is a concept of Service in Angular which can be created by using factory or service, also very confusing because there is a concept of service and a component called service. I will just keep reading on.

You say that there are a number of way to create $injected property. With regards to the diagram, which one was used from your list? Is it number 3? Im focusing so much on DI because I gather it is crucial to understanding how Angular works.

[Sander Elias]

Hi binaryMoods,

Your diagram contained number 3. I should have explained how this array works.

the array takes the names(strings!) of the things you want to inject. The last element is the actual function. The function will receive the the things in the order you defined in the array. the names in the function's parameters are local to the function.

['thing1', 'someService', '$http', function someFunction(thing,service,http) {...}]

Notice that I didn't use the exact same names. The order is what matters. It is really a bad idea to change the names, but in here I just wanted to make a point. The above will translate into:

function someFunction(thing,service,http) {...}]
someFunction.$inject=['thing1', 'someService', '$http'];

Does that explain it enough for you?

Regards

Sander

[binaryMoods]

Hi Sander,

Thanks a lot! That was another question that you already answered i.e. does it matter if I use a different name since everywhere Im seeing people using exactly the same name, so ok, the order is what matters and keep the same name for consistency sake.

And I can take any services, functions as parameters and then use their properties and methods. Cool, thank you