javascript - AngularJS 中的作用域是如何工作的？

Question

为什么会这样？

app.controller("ctrl", function($scope){
    $scope.From = "Santa";
    $scope.To = "Claus";
});

为什么这个没有？

app.controller("ctrl", function(scope){
    scope.From = "Santa";
    scope.To = "Claus";
});

这也行不通...

app.controller("ctrl", function($x){
    $x.From = "Santa";
    $x.To = "Claus";
});

据我所知，$scope 只是一个参数并且是函数私有(private)的。怎么可能改个名字就不行了？

附言。我刚开始学习 AngularJS。

Answer 1

Angular 有三种不同的方式来执行依赖注入(inject)。

方法一:注入(inject)数组

在我看来，这是最能提供信息的语法，因为它可以让开发人员更清楚地了解正在发生的事情。

controllerName.$inject = ['$scope', '$http'];
function controllerName($scope, $http) {
   // code here
}

如您所见，所有依赖注入(inject)的核心都是一个附加属性，它告诉 Angular 在函数运行之前需要存在哪些东西。 Angular 确保这些服务已被实例化，然后将它们作为参数提供给函数。 Angular 匹配的名称是注入(inject)数组中提供的字符串。在这种语法中，实际的函数参数可以命名为任何东西(javascript合法)，它们将映射到注入(inject)数组相应位置的服务。 $scope 可以在参数列表中命名为 $x，它仍然可以正常工作，只要注入(inject)数组具有正确的名称。

方法二:可注入(inject)函数

Angular 还有一种特殊的语法来声明“可注入(inject)”的函数。 Angular 文档列出了哪些函数是可注入(inject)的，但举几个例子， Controller 、服务、指令和组件模板函数是可注入(inject)的。语法如下所示:

['$scope', '$http', function($scope, $http) { // code here }]

如您所见，这类似于第一种语法，只是它将注入(inject)列表与函数定义结合在一起。前 n - 1 个参数是字符串，angular 将使用这些字符串来查找需要注入(inject)的依赖项，第 n 个参数是您要将这些依赖项注入(inject)到的函数。同样，函数参数的名称没有任何意义。它们映射到数组前 n-1 字符串中的相应服务。这种方法是可靠的，并且对开发人员来说更清晰，但是，在我看来，随着依赖项列表的增长，它开始变得困惑。而且我不喜欢这样的事实，它往往会掩盖实际的函数定义。这只是一个偏好问题。

方法 3:解释依赖名称

如果您没有执行上述任何操作，angular 将最好猜测您要使用的服务，假设您将提供的参数命名为与您希望注入(inject)的服务/依赖项的名称相同.所以，它看起来像这样(与您在帖子中输入的语法相同):

function($scope, $http) { //code here }

使用此方法，angular 使用参数的实际名称来解释要注入(inject)的依赖项。这个方法看起来不错，简单干净，但是，简而言之，你永远不应该使用这个方法。最重要的原因是它不是缩小安全的。一个好的压缩器也会“破坏”你的代码，将上面的代码变成 Angular 无法理解的 function(a,b) {//code }。而缩小器不会触及字符串文字。此外，如果像您这样的人对变量名称实际上很重要这一事实感到困惑，则很容易引入错误。

如果你想要第三种方法的清洁度和前两种方法的可靠性，我建议你看看后处理工具 NgAnnotate:https://github.com/olov/ng-annotate .我在我的所有项目中都使用它，它是我的救星。