javascript - 如果我不指定字符串，Angular 怎么知道要注入什么？

Question

考虑这段代码：

angular.module('app', [])
  .controller('MainCtrl', function ($scope) {
    ...
  });

我知道，为了避免在缩小 JS 时出现注入问题，应该使用 Dependency Injection 的数组形式：

angular.module('app', [])
  .controller('MainCtrl', ['$scope', function ($scope) {
    ...
  }]);

但是 Angular 在第一种情况下（非数组）如何知道要注入什么？如果我使用.controller('MainCtrl', function (scop)而不是$scope怎么办？它会解析我的 JS 并查找与其某些提供程序匹配的函数参数名称吗？

Answer 1

注意controller' 函数是函数的参数controller。这允许 Angular 在变量中获取该函数并分析其参数，并使用该 Angular 列出需要注入的服务。

在下面的代码中，您可以看到 Angular 在幕后做了什么来匹配这些参数：

var FN_ARGS = /^function\s*[^\(]*\(\s*([^\)]*)\)/m;
var FN_ARG_SPLIT = /,/;
var FN_ARG = /^\s*(_?)(\S+?)\1\s*$/;
var STRIP_COMMENTS = /((\/\/.*$)|(\/\*[\s\S]*?\*\/))/mg;

function annotate (fn) {
  var $inject = [];
  fn = fn.toString();
  var first = fn.replace(STRIP_COMMENTS, '');
  var second = first.match(FN_ARGS)[1];
  var third = second.split(FN_ARG_SPLIT);
  third.forEach(function (arg) {
    arg.replace(FN_ARG, function (all, underscore, name) {
      $inject.push(name);
    });
  });
  return $inject;
}