CODEWITHSUNDEEP
javascriptangularjs
Stefan
Stefan

Reputation: 2613

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

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)) ?

Upvotes: 0

Views: 156

Answers (2)

kokeksibir
kokeksibir

Reputation: 1745

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) {...}]}

Upvotes: 1

MarcoS
MarcoS

Reputation: 17721

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.

Upvotes: 2

Related Questions