How do the function argument names in Angular.js objects connect to other objects?

Question

Let's say I have made a module with a service and a controller in Angular.js, I am able to access that service inside of the controller like so:

var myapp = angular.module('my-app', []);

myapp.factory('Service', function() {
  var Service = {};
  Service.example = 'hello';
  //etc..
  return Service;
});

myapp.controller('mainController', function($scope, Service) {
  $scope.greeting= Service.example;
});

In this example, the Service object will be passed to the controller, and structuring the code like so will not change the behavior of the code:

myapp.controller('mainController', function(Service, $scope) {
  $scope.greeting= Service.example;
});

so, how does Angular.js "know" what the function arguments mean?

Are you quite sure you can reverse the arguments like that? It would be very surprising. — T.J. Crowder
– T.J. Crowder, Commented Jun 5, 2013 at 21:08
Wow is the Angular documentation beautiful....and utterly, completely impossible to navigate if you don't already know Angular well. Heck, I can't even find that function in the API docs. I can find something that looks vaguely like it here, but the example is a "note" and is passing something completely different as the second argument. — T.J. Crowder
– T.J. Crowder, Commented Jun 5, 2013 at 21:17
@T.J.Crowder - Yes... it is a bit of a mess. I've been pretty much living in there for the last couple of weeks and still find that it's easier to browser the source on GitHub. — James Allardice
– James Allardice, Commented Jun 5, 2013 at 21:18
@T.J.Crowder yes, it does in fact work that way, and it is very surprising. That's what led me to post this question, I was very confused and curious when I saw Angular worked this way. — GSto
– GSto, Commented Jun 6, 2013 at 13:03

blong · Accepted Answer · 2014-06-27 17:09:01Z

21

Angular simply parses the toString() representation of the function for the names of dependencies. From the docs:

In JavaScript calling toString() on a function returns the function definition. The definition can then be parsed and the function arguments can be extracted.

However, note that this approach will fail if your code is minified. For that reason, Angular supports an alternative (I would suggest always using it) syntax, using an array:

myapp.controller('mainController', ["$scope", "Service", function($scope, Service) {
  $scope.greeting= Service.example;
}]);

edited Jun 27, 2014 at 17:09

blong

2,7138 gold badges47 silver badges114 bronze badges

answered Jun 5, 2013 at 21:15

James Allardice

166k22 gold badges335 silver badges315 bronze badges

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

8 Comments

T.J. Crowder Over a year ago

Of course, that's non-standard. Function#toString isn't defined anywhere as returning the source. It works on every desktop browser I've ever seen, but...

James Allardice Over a year ago

@T.J.Crowder - Indeed, but Angular does have a comprehensive test suite, and Function.prototype.toString works as expected in all of its supported browsers. But I only ever use the safer array syntax.

T.J. Crowder Over a year ago

Can you explain how what you linked to relates to the question? Don't get me wrong: I know your contributions here well enough to know (on faith) that they're related. But a comment explaining the link would help people floundering in the beautiful but awful docs... :-)

James Allardice Over a year ago

@T.J.Crowder - The docs page I linked to is part of the AUTO module, which as far as I understand is effectively a base module providing functionality used throughout the framework. It provides the injection functionality that is the subject of this question, although I agree it is completely unclear how all of this links together from the docs. I just knew what I was looking for (anything to do with dependency injection can be found in that page) - I'm very much still getting to grips with Angular.

Courtney Christensen Over a year ago

toString on a function, eh? Gross. But it explains the nagging named-argument magic. As someone brand new to Angular, this seems like an over-engineered "solution" that breaks a cardinal rule of variable naming -- that its name shouldn't matter. I'll be sticking with the require-esque explicitly defined dependency arrays.

|

Stewie · Accepted Answer · 2013-06-05 21:17:57Z

6

This is accomplished by the quite clever method annotate (source) which takes a regex scan on function signature source (using function.toString()) and iteratively pushes each function argument into the function $inject array.

The same result is accomplished when manually specifying the $inject array as in:

var MyController = function($scope, myService) {
  // ...
}
// Define function dependencies
MyController.$inject = ['$scope', 'myCustomService'];

answered Jun 5, 2013 at 21:17

Stewie

60.4k20 gold badges148 silver badges113 bronze badges

Collectives™ on Stack Overflow

How do the function argument names in Angular.js objects connect to other objects?

2 Answers 2

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related