CODEWITHSUNDEEP
angularjs
Jwan622
Jwan622

Reputation: 11659

How are the local variables inside the anonymous function after a DI set?

I have read as much as I could from tutorials and the Angular docs but I still have a few questions about what is going on behind the scenes. I think my main questions are in regards to dependency injections... when you declare them in the first argument of the array, are the services called? How are the values passed along to the anonymous function?

For example:

This is my value:

angular.module("root", [])
    .value("message", "Hello world!");

And this is my controller:

angular.module("root", [])
    .controller("index", ["$scope", "message", function($scope, message) {
        // Do something with message and/or $scope.
    }]);

So my question is this:

  1. When we declare a dependency injection in the index controller in the 1st argument of the array... what is going on? I know $injector:

is responsible for actually creating instances of our services using the code we provided via $provide (no pun intended). Any time you write a function that takes injected arguments, you're seeing the injector at work.

Once you have $injector, you can get an instance of a defined service by calling get on it with the name of the service.

Here is the quote I am confused about:

The injector is also responsible for injecting services into functions; for example, you can magically inject services into any function you have using the injector's invoke method;

What does injecting a service into a function mean behind the scenes? Is some function called when we declare the strings in the array and are the return values set to be the value of the local variables inside the anonymous function?? How is message set?

function($scope, message) {...

Here's another example. So this factory is dependent on the factor value:

angular.module("services", [])
    .value("factor", 6)
    .factory("square", ["factor", function (factor) {
            return factor * factor;
    }]);

And this controller depends on $scope and square services:

angular.module("root", ["services"])
    .controller("index", ["$scope", "square",
        function ($scope, square) {
            $scope.product = square;
        }
    ]);

But how are the local variables inside the anonymous function set?

Questions:

Note: I read this already:

dependency injection

Upvotes: 1

Views: 3040

Answers (1)

Jochen van Wylick
Jochen van Wylick

Reputation: 5401

To answer your question: 'But how are the local variables inside the anonymous function set?' : they're not, they're provided as arguments. They are 'injected' into the function.

Take a look at this example: 

inject = function(first, second, target) {
    return target(first, second);
}

greeter = function(name, age) {
    var name = name;
    var age = age;
    return {
        sayHi : function() {
            console.log('Hi there ' + name + ' you are ' + age);
        }
    }
}

var johngreeter = inject('john',22,greeter);
johngreeter.sayHi(); // Hi there john you are 22
var janegreeter = inject('jane',30,greeter);
janegreeter.sayHi(); // Hi there jane you are 30

You can play around with it here: https://jsfiddle.net/gc5066x2/

I hope you see the resemblence with your Angular code. The .controller function has a name (first arg), then an array of parameters and then the actual controller function (second arg).

The "$scope", "square" will be injected into the $scope, square parameters of the function in the 3rd part of that array. So what I suspect you call 'local variables' $scope, were set by the injector as function arguments.

The Angular injector is much more sophisticated obviously, and it will try to resolve $scope and square by name or some other convention, but I hope you get the point: it injects ( hence a good name ) the arguments of the function.

Upvotes: 1

Related Questions