javascript - 对 AngularJS 依赖注入(inject)不一致感到困惑

Question

我是 angular.js 的新手, 并完成了几个教程，包括 codeschool 上的所有教程。我发现它们非常有用，并且学到了很多东西。但是现在我已经完成了我的“介绍”并开始尝试在某些事情中使用它，我发现了一些令人困惑的不一致之处，最显着的是“依赖注入(inject)”。

在我学习的教程中，服务的依赖是这样完成的；

app.controller('name', [ $http, $scope, function($http, $scope) {
   // .. code ... //
}]);

这让我觉得很奇怪，但它仍然有效。我很困惑为什么 []没有在函数之前终止(我假设这就是您在 javascript 中称为“回调”函数的东西？)。我期待它更像是 require.js它本来应该在哪里......

app.controller('name', [ '$http', '$scope' ], function($http, $scope) { });

但是后来我开始看在线 Angular 示例和演示，我发现这并不一致。例如，检查以下链接；

• medium.com
• revolunet.com
• kendo.ui

在每一个中，我都看到依赖注入(inject)是这样使用的；

app.controller('name', function($http, AdvancedGithubUser) { });
app.controller('name', function($scope){ });
function controllerName($scope) { };

他们完全绕过了 array就像语法一样，这三个都是不同的。其中一个，它需要一种在其他地方声明的对象类型，但我没有看到任何连接指向它。

在另一种情况下，它只是具有这些对象。

还有一个，controller 的“名称”部分是函数的名称，我看不到任何真正将其表示为 controller 的东西, 但它在指令中以这种方式使用。

谁能给我解释一下？我现在完全迷路了。这种不一致使得掌握这些技术有点困难。

Answer 1

有三种方法可以注释函数的依赖关系:

第一个是:参数名称要明确且准确:

app.controller('ACtrl', function($scope, $http, $q) {
    //your stuff here
});

这意味着该函数的参数名称必须与已注册的服务/提供商的名称相匹配。 警告:如果您缩小文件(丑化，以节省空间)，您将丢失参数名称，因此它会被破坏 - 无法工作(会提示)。

第二个让您选择服务名称作为字符串文字注入(inject)(因为字符串文字是一个值，它永远不会缩小):

var myfunc = function($s, $http, $q) {
    //do your stuff here
};
myfunc.$inject = ['$scope', '$http', '$q'];
app.controller('ACtrl', myfunc);

这使得 Angular 读取函数的 $inject 属性，并且不是通过名称而是通过相同数组位置中的值来匹配形式参数。因此，即使您缩小文件，$scope 也会在 $s 中。如果函数中不存在 $inject，那么您将回到第一种情况(不推荐)。

第三个与第二个类似(即它将通过字符串指定依赖项并抵抗丑化):

var myfunc = function($s, $http, $q) {
    //do your stuff here
}
app.controller('ACtrl', ['$scope', '$http', '$q', myfunc]);

请注意，数组的最后一个元素 是要调用的函数。它看起来有点令人毛骨悚然，但它是一致的。 Angular 是这样做的:如果 Controller 是一个数组，则弹出最后一个元素——它将是函数。前面的元素(剩余的数组)受到威胁，就好像它们是函数中的 $inject 值一样。

Controller 和提供者必须有一个名称来引用它们——我使用“ACtrl”作为 Controller 的名称。它不是函数的名称，而是在依赖注入(inject)(对于提供者)和 ngRoute(对于 Controller )之类的东西中使用的内部名称。

声明名称是您要求的布线 的第一个边界。在依赖注入(inject)的三种形式中的任何一种中使用它们是这种连接的第二个纽带。

记住:AdvancedGithubUser 是注册提供者，$http 也是。唯一的区别是 $http 是 Angular 内置的，而 AdvancedGithubUser 不是。美元符号开始的符号应该保留给 Angular，但这不是必需的——只是一个很好的做法。 AdvancedGithubUser 是(在外部模块中)创建的，类似于:

app.service('AdvancedGithubUser', AdvancedGithubUser);
//being AdvancedGithubUser a constructor.