Question

在角度中，这是使用$ http的简单示例。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http.get("welcome.htm")
    .then(function(response) {
        $scope.myWelcome = response.data;
    });
});

我不明白的是，$ http是回调函数中参数的名称，那么为什么如果将它重命名为其他东西会产生影响呢？

例如在JavaScript中，这两个显然是完全相同的功能

function(a, b) {
    return a+b;
}

function(c, d) {
    return c+d;
}

但是在这种情况下，如果我用$ HTTP替换$ http，它会破坏吗？

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $HTTP) {
    $HTTP.get("welcome.htm")
    .then(function(response) {
        $scope.myWelcome = response.data;
    });
});

Answer 1

您当然可以使用其他名称，在特定情况下，您应该！方法如下：

angular.module('myApp', [])
  .controller('myCtrl', ["$scope", "$http", function(thescope, thebackend) {
    thebackend.get("welcome.htm")
      .then(function(response) {
        thescope.myWelcome = response.data;
      });
  }]);

这里controller(...)的第二个参数是一个具有特定结构的数组。

为了一个字符串列表，其中包含您希望使用angular注入的服务名称;
最后，最后一项是您的控制器构造函数，它接受的参数将填充您之前在数组中要求的服务。

使用此结构，您可以将参数命名为任何您喜欢的名称。

优点：您现在可以缩小此代码。缩小将仅将字符串保留在数组中，从而为Angular保留正确的服务名称以进行识别。这些论点将被安全地缩小，因为它们可以是任何东西。

如果没有这样的数组，您拥有的版本将使用参数名称来查找相应的服务。如果您以不同的方式命名这些参数，Angular将无法知道要向该参数注入哪些服务。

对于快速演示和即时应用程序，您的版本可以正常运行。这就是为什么你经常看到它，特别是在文档或SO答案和问题中。对于生产应用程序，我建议始终使用缩小安全版本。

The other answer by @slugonamission也有一些很好的信息，包括the appropriate documentation article on Dependency Injection的链接。

PS。是的，你的第二个例子会破裂，你可以轻松尝试。角度无法知道$HTTP是什么，因为它只知道$http。

Answer 2

这被称为＆＃34;依赖注入＆＃34;，在AngularJS manual中有一篇关于它的大文章。

简而言之，Angular需要知道控制器具有哪些依赖关系（在您的情况下，$scope和$HTTP），它将为您创建，并传递给您的控制器。它执行此操作的默认方法是简单地查看参数的名称，并根据您具有的依赖项进行推断。如果您将$http更改为$foo，Angular将不再知道它需要注入$http服务。

还有一种替代语法，您可以将数组传递给控制器的第二个参数，其中第一个N元素指定控制器具有的依赖关系（以及排序），最后一个参数是控制器函数。它看起来像这样：

app.controller('myCtrl', ["$scope", "$HTTP", function($scope, $HTTP) {
    ...
}]);

在这种情况下，您可以随意调用参数;数组中的前导元素指定参数是什么，所以这仍然有效：

app.controller('myCtrl', ["$scope", "$HTTP", function($foo, $bar) {

$foo将引用您控制器的范围。

为什么不能在Angular中更改参数名称

2 个答案: