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

All we need is an easy explanation of the problem, so here it is.

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?

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

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;
}]);

Method 2

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'];

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply