方法2：可注射功能

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只是一个参数，对函数来说是私有的。如何更改名称会使其无效？

PS。我刚刚开始学习AngularJS。

Answer 1

请参阅：DOCS

DOCS2

$ prefix表示变量，参数，属性或方法属于Angular的核心。

以下所有内容都可以正常使用：

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

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

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

隐式注释 - 您的第一个示例代码
内联数组注释 - 您的第二个示例代码

Answer 2

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

方法1：注入阵列

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

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

正如您所看到的，所有依赖注入都是一个额外的属性，它告诉角度在函数运行之前需要存在什么东西。 Angular确保已实例化这些服务，然后将它们作为参数提供给函数。角度匹配的名称是注入数组中提供的字符串。在此语法中，实际的函数参数可以命名为ANYTHING（javascript legal），它们将映射到注入数组的相应位置中的服务。 $scope可以在参数列表中命名为$x，只要注入数组具有正确的名称，它仍然可以正常工作。

方法2：可注射功能

Angular还具有用于声明“可注入”的函数的特定语法。角度文档列出了哪些函数是可注入的，但是，举几个例子，控制器，服务，指令和组件模板函数是可注入的。语法如下所示：

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

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

方法3：解释的依赖项名称

如果您没有完成上述任何一项，则角度最好猜测您要使用哪种服务，方法是假设您将所提供的参数命名为与要注入的服务/依赖项名称相同的参数。所以，它看起来像这样（你在帖子中添加的语法相同）：

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

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

如果您希望第三种方法的清洁度与前两种方法的可靠性一致，我建议您查看后期处理工具NgAnnotate：https://github.com/olov/ng-annotate。我在我的所有项目中使用它，这是一个救星。

Answer 3

它起作用，因为$ scope对于angular来说是一件好事。许多预定义的工厂，服务使用$符号。例如，你还有$ rootscope，$ http等:)

范围如何在AngularJS中起作用？

3 个答案:

方法1：注入阵列

方法2：可注射功能

方法3：解释的依赖项名称