AngularJS Controller inject Dependency - why are there [] for constructor?

Question

digging through the AngularJS Documentation I found the following examples:

angular.module('invoice1', [])
.controller('InvoiceController', function() {
  this.qty = 1;
  this.cost = 2;
  this.inCurr = 'EUR';
  this.currencies = ['USD', 'EUR', 'CNY'];
  this.usdToForeignRates = {
    USD: 1,
    EUR: 0.74,
    CNY: 6.09
  };

  this.total = function total(outCurr) {
    return this.convertCurrency(this.qty * this.cost, this.inCurr, outCurr);
  };
  this.convertCurrency = function convertCurrency(amount, inCurr, outCurr) {
    return amount * this.usdToForeignRates[outCurr] / this.usdToForeignRates[inCurr];
  };
  this.pay = function pay() {
    window.alert("Thanks!");
  };
});

This is very fine and clear. The constructor for the InvoiceController is directly called as second parameter in .controller().

Getting further and setting a dependency to inject into the InvoiceController the following code is given:

angular.module('invoice2', ['finance2'])
.controller('InvoiceController', ['currencyConverter', function(currencyConverter) {
  this.qty = 1;
  this.cost = 2;
  this.inCurr = 'EUR';
  this.currencies = currencyConverter.currencies;

  this.total = function total(outCurr) {
    return currencyConverter.convert(this.qty * this.cost, this.inCurr, outCurr);
  };
  this.pay = function pay() {
    window.alert("Thanks!");
  };
}]);

With finance2.js

angular.module('finance2', [])
.factory('currencyConverter', function() {
  var currencies = ['USD', 'EUR', 'CNY'];
  var usdToForeignRates = {
    USD: 1,
    EUR: 0.74,
    CNY: 6.09
  };
  var convert = function (amount, inCurr, outCurr) {
    return amount * usdToForeignRates[outCurr] / usdToForeignRates[inCurr];
  };

  return {
    currencies: currencies,
    convert: convert
  };
});

I can currently not understand why the syntax for the injection is needing the [] brackets for the second parameter. I can see the definition of Dependency for the module and it is well documented that it needs to be entered into the [] on the .module() But why is it that .controller('name', [constructor(dependency-param]) is needed instead of .controller('name', constructor(dependency-param)) ?

The API apparently expects that argument to be an array. The notation [] simply creates an empty array. — Pointy
– Pointy, Commented Dec 18, 2014 at 14:24
but why is it missing in .controller() if no dependency is given? — Stefan
– Stefan, Commented Dec 18, 2014 at 14:25
@Stefan because it is an optional parameter? Javascript is dynamic and does not require that you match a certain number of parameters for a function such as this — Jesse Carter
– Jesse Carter, Commented Dec 18, 2014 at 14:27
I don't know, because I'm not an Angular user, but this seems like something that should be described by the Angular API documentation. What does that say? — Pointy
– Pointy, Commented Dec 18, 2014 at 14:27
It is already described. Please see docs.angularjs.org/tutorial/step_05 section "A Note on Minification" for documentation. — kokeksibir
– kokeksibir, Commented Dec 18, 2014 at 14:29

MarcoS · Accepted Answer · 2014-12-18 14:34:58Z

2

The issue is well described in the link from kokeksibir...
To summarize:
Angular infers the controller's dependencies from the names of arguments to the controller's constructor function. After a minification process, the function names are altered; annotating the function with the names of the dependencies, provided as strings, solves the problem.

answered Dec 18, 2014 at 14:34

MarcoS

17.8k27 gold badges101 silver badges189 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Stefan Over a year ago

I followed the link and am thinking about it. So is it right that the second parameter can either be an object, function constructor or an array where the array also has different possible declaration possibilities?) that's what I understand from the link and from the API docs.angularjs.org/api/ng/provider/$controllerProvider#register

MarcoS Over a year ago

If I correctly understand your doubt: "Use an inline annotation where, instead of just providing the function, you provide an array. This array contains a list of the service names, followed by the function itself".

kokeksibir · Accepted Answer · 2014-12-18 16:41:30Z

Please see https://docs.angularjs.org/tutorial/step_05 section "A Note on Minification" for documentation.

For the comment you wrote under MarcoS' answer;

So is it right that the second parameter can either be an object, function constructor or an array where the array also has different possible declaration possibilities?

The second parameter can either be a function, or an array consisting of names of dependencies as string, and the controller function as last element. The second parameter cannot be an object. The first parameter can be an object in to declare a set of controllers at once:

{"nameOfController": function(aDInameThatIsUnsafe){...}, "anotherController": ["firstDI", "secondDI", function(firstDI, secondDI) {...}]}

Collectives™ on Stack Overflow

AngularJS Controller inject Dependency - why are there [] for constructor?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related