定义 AngularJS 控制器时使用数组表示法的原因

IT技术 javascript angularjs
2021-02-17 05:10:35

如果这个问题听起来太明显了,我们深表歉意。

我最近开始探索和学习 AngularJS。我已经学习了一些很好的教程 -

..还有一些我见过的。

我并不是说我已经阅读/研究了所有文件。

问题从这里开始——

现在,回到这个问题,我看到 Controller 的定义在一个地方不同,在其他地方也不同 -

一个定义使用一种数组符号(不确定官方术语)进行注入:

app.controller("MyCtrl", ['$scope', function($scope){
    $scope.someData = "Array notation";
}]);

还有这个,没有数组:

app.controller("MyCtrl", function($scope){
    $scope.someData = "non-array notation";
});

并不是说这是我唯一想了解的事情,但是是的,我绝对很想了解其中的区别。

两者之间有很大的区别吗?

非常感谢。

注意:我确实在 SO 中搜索过类似的问题,但找不到我要找的东西。对不起。

4个回答

不同之处在于,当第二个被缩小时,参数名称将被缩小并且 angular 将不再能够检查参数以找出要注入的依赖项。在字符串中具有依赖项的数组语法意味着它是缩小安全的。

有一个名为的库ng-annotate,它将把第二个示例更改为第一个示例,以便代码再次缩小安全。

@Seram 如果你想学习 angular,我真的会推荐那些思想家教程,对我来说它们太棒了。我很确定它是我第一次了解到你的这个问题的其中一个
2021-04-21 05:10:35
那么,除了缩小之外没有其他区别吗?以防万一,如果我没有缩小,那么我可以使用任何一个。
2021-04-28 05:10:35
@Seram 正确。尽管您仍然可以进行缩小,只要您首先通过 ng-annotate 运行代码。
2021-05-12 05:10:35
@Seram 是正确的,纯粹是为了在缩小代码时保护您的代码
2021-05-13 05:10:35
@Seram 是的,所有依赖注入都可以通过array语法或通过检查方法参数来完成。
2021-05-17 05:10:35

这两种方法没有太大区别。两个代码的工作方式相同。但是如果你使用第二个代码,那么在你缩小代码后它会让你感到困惑。

寻找一个例子:-

  app.controller("MyCtrl", function(a){ ... });//$scope is changed to a

并且您的代码将无法工作,因为 AngularJs 代码使用 $scope 变量,因为它不接受第一个、第二个、第三个等参数。

所以,第一个代码比第二个更安全,就好像当你缩小代码时,它仍然需要相同的变量,即 $scope。

找一个例子:

app.controller("MyCtrl", ['$scope', function(a){...}]);//a refers to $scope

因此,当您缩小代码时,上面的代码工作正常,因为 $scope 被注入而不是 a.So,如果您传递多个参数,那么在此示例中排序很重要。

请看以下内容:

 app.controller("MyCtrl", ['$scope','$timeout' ,function(a,t){...}]);

其中a作为$scope注入t作为$timeout注入

所以如果你改变传递的参数的顺序

app.controller("MyCtrl", ['$timeout','$scope', function(a,t){...}]); 其中a$timeoutt$scope

因此,在此示例中排序很重要,但在您的第二个示例中,代码排序并不重要,因为名称很重要,例如 $scope、$timeout。

如果您使用第一个示例代码,还有另一种注入变量的方法,如下所示:

 MyCtrl.$inject = ['$scope'];

对于多个参数,

 MyCtrl.$inject = ['$scope','$timeout'];

所以,注解主要有以下三种:

  1. 隐式注释 - 您的第一个示例代码
  2. $inject 属性注解——$inject 方法
  3. 内联数组注释 - 您的第二个示例代码

你可以在这里了解更多信息

@Xsmael 这是 angular 库特有的东西。
2021-05-02 05:10:35
两种表示法都有效的事实,它是 JavaScript 的本机行为还是 AngularJS 人决定实现它?
2021-05-04 05:10:35

在缩小方面存在差异。如果您要缩小文件,就像您可能为提高性能所做的那样,如果您使用选项二,那么您可能会遇到问题。

由于 Angular 根据控制器构造函数的参数名称推断控制器的依赖关系,如果你要缩小控制器的 JavaScript 代码,它的所有函数参数也会被缩小,并且依赖注入器将无法识别服务正确。

所以本质上你最好使用第一个选项,稍微多一点打字,但它更安全,如果你缩小你的代码也不会中断:-)

是一个很短的教程,但很好地解释了它。

我有一个伟大而复杂的 AngularJS 项目,因此手动更改所有代码将是一个很大的痛苦。但是我使用babel-plugin-angularjs-annotate 解决了

安装插件:

$ npm install babel-plugin-angularjs-annotate --save-dev

然后将插件添加到.babelrc文件中:

{
  "presets": ["@babel/preset-env"],
  "plugins": ["angularjs-annotate"]
}