18

假设我在 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;
});

在此示例中，Service 对象将被传递给控制器​​，并且像这样构造代码不会改变代码的行为：

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

那么，Angular.js 是如何“知道”函数参数的含义的呢？

4

2 回答 2

21

Angular 只是解析toString()函数的表示以获取依赖项的名称。从文档：

在 JavaScript 中调用toString()函数会返回函数定义。然后可以解析定义并提取函数参数。

但是，请注意，如果您的代码被缩小，这种方法将失败。出于这个原因，Angular 支持另一种（我建议总是使用它）语法，使用数组：

myapp.controller('mainController', ["$scope", "Service", function($scope, Service) {
  $scope.greeting= Service.example;
}]);
于 2013-06-05T21:15:58.520 回答
6

这是通过非常聪明的方法annotate( s ​​ource ) 完成的，该方法对函数签名源 (using function.toString()) 进行正则表达式扫描，并迭代地将每个函数参数推入函数$inject数组。

当手动指定$inject数组时，可以实现相同的结果，如下所示：

var MyController = function($scope, myService) {
  // ...
}
// Define function dependencies
MyController.$inject = ['$scope', 'myCustomService'];
于 2013-06-05T21:17:57.493 回答