Как имена аргументов функции в объектах Angular.js соединяются с другими объектами?

Скажем, я создал модуль со службой и контроллером в Angular.js, я могу получить доступ к этой службе внутри контроллера следующим образом:

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

В этом примере объект службы будет передан контроллеру, а структурирование кода, как это, не изменит поведение кода:

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

так, как Angular.js "знает", что означают аргументы функции?

Ответ 1

Angular просто анализирует представление функции toString() для имен зависимостей. Из документов:

В JavaScript-вызове toString() функция возвращает значение функции. Затем определение может быть проанализировано и аргументы функции могут быть извлечены.

Однако обратите внимание, что этот подход не сработает, если ваш код будет уменьшен. По этой причине Angular поддерживает альтернативный (я бы предложил его всегда использовать) синтаксис, используя массив:

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

Ответ 2

Это достигается с помощью довольно умного метода annotate (source), который выполняет регулярное сканирование источника сигнатуры функции (с использованием function.toString()) и итеративно толкает каждый аргумент функции в массив функций $inject.

Тот же результат выполняется, когда вручную указывается массив $inject, как в:

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