Javascript 为什么angularjs控制器声明具有这种语法结构?
我一直看到以下angularjs控制器语法结构Javascript 为什么angularjs控制器声明具有这种语法结构?,javascript,angularjs,dependency-injection,Javascript,Angularjs,Dependency Injection,我一直看到以下angularjs控制器语法结构 angular.module('7minWorkout').controller('WorkoutController', ['$scope', '$interval', '$location', function ($scope, $interval, $location) { }]); 为什么参数名称会重复?为什么不就这样 angular.module('7minWorkout').controller('WorkoutControlle
angular.module('7minWorkout').controller('WorkoutController',
['$scope', '$interval', '$location',
function ($scope, $interval, $location)
{
}]);
为什么参数名称会重复?为什么不就这样
angular.module('7minWorkout').controller('WorkoutController',
['$scope', '$interval', '$location',
function ()
{
}]);
或
此“重复”是为了确保缩小安全:
此“重复”是为了确保缩小安全:
数组语法将帮助您缩小
js
代码
angular.module('7minWorkout').controller('WorkoutController',
function ($scope, $interval, $location) {
// code here
});
将缩小并损坏为:
angular.module('7minWorkout').controller('WorkoutController',
function (a, b, c) {
// code here
});
所以Angular无法确定要注入哪些依赖项
另一方面,使用数组声明:
angular.module('7minWorkout').controller('WorkoutController',
['$scope', '$interval', '$location', function ($scope, $interval, $location) {
// code here
}]);
将缩小为:
angular.module('7minWorkout').controller('WorkoutController',
['$scope', '$interval', '$location', function (a, b, c) {
// code here
}]);
因此,Angular将知道a
、b
和c
代表什么
如果您使用下面的第一个示例代码,还有另一种注入变量的方法:
WorkoutController.$inject = ['$scope', '$interval', '$location'];
或
这将在注释代码时创建上面提到的$inject
方法
因此,主要有四种:
-第一个示例代码
-第二个示例代码
-美元注入法
$ngInject注释-方法
ng注释
类似这样的工具允许您在应用程序中使用隐式依赖项批注,并在缩小之前自动添加内联数组批注。如果您决定采用这种方法,可能需要使用ng strict di
有关更多信息,请参阅。数组语法将帮助您缩小js
代码
angular.module('7minWorkout').controller('WorkoutController',
function ($scope, $interval, $location) {
// code here
});
将缩小并损坏为:
angular.module('7minWorkout').controller('WorkoutController',
function (a, b, c) {
// code here
});
所以Angular无法确定要注入哪些依赖项
另一方面,使用数组声明:
angular.module('7minWorkout').controller('WorkoutController',
['$scope', '$interval', '$location', function ($scope, $interval, $location) {
// code here
}]);
将缩小为:
angular.module('7minWorkout').controller('WorkoutController',
['$scope', '$interval', '$location', function (a, b, c) {
// code here
}]);
因此,Angular将知道a
、b
和c
代表什么
如果您使用下面的第一个示例代码,还有另一种注入变量的方法:
WorkoutController.$inject = ['$scope', '$interval', '$location'];
或
这将在注释代码时创建上面提到的$inject
方法
因此,主要有四种:
-第一个示例代码
-第二个示例代码
-美元注入法
$ngInject注释-方法
ng注释
类似这样的工具允许您在应用程序中使用隐式依赖项批注,并在缩小之前自动添加内联数组批注。如果您决定采用这种方法,可能需要使用ng strict di
有关更多信息,请参阅。,或者根据流行的angular styleguide,您可以使用以下语法
根据流行的angular styleguide,您也可以使用以下语法
您可以编写第一个版本,因为它只是省略了函数的参数,这些参数也可以通过函数内部的参数来访问。因此,您可以避免reption,但是切片arguments属性也不是真正有效的(与只键入参数相比)
正如其他答案所述,建议是为了使其能够安全地进行缩小。您可以编写第一个版本,因为它只是省略了函数的参数,这些参数也可以通过函数内部的参数进行访问。因此,您可以避免reption,但是切片arguments属性也不是真正有效的(与只键入参数相比)
正如其他答案所述,我们的目标是使其能够安全地进行缩编。第一个控制器语法使我们能够使用ngmin等工具来缩编/丑化javascript代码。我不太确定您提供的第二个和第三个选项是否是创建控制器的可行选项,但在任何情况下,它们都不会正确缩小,因为工具现在不会像提供程序那样。我建议使用选项1或选项3(不带括号)来创建控制器。请注意,自动工具不会正确缩小选项3
有关创建控制器的一些有用信息:
不带括号的选项3
angular.module('7minWorkout').controller('WorkoutController', function ($scope, $interval, $location)
{
//Your Code
});
第一个控制器语法使使用ngmin等工具缩小/丑化javascript代码成为可能。我不太确定您提供的第二个和第三个选项是否是创建控制器的可行选项,但在任何情况下,它们都不会正确缩小,因为工具现在不会像提供程序那样。我建议使用选项1或选项3(不带括号)来创建控制器。请注意,自动工具不会正确缩小选项3
有关创建控制器的一些有用信息:
不带括号的选项3
angular.module('7minWorkout').controller('WorkoutController', function ($scope, $interval, $location)
{
//Your Code
});
因为如果函数中没有它们,就无法使用它们,而且angular也无法知道所讨论的依赖项,因为它无法获得函数的参数集。它们都是因为它们也有。您可以像这样使用最后一个选项:angular.module('7minWorkout').controller('WorkoutController',function($scope,$interval,$location){})
@gillesc:同意,您需要创建一个对象,将其用作函数的参数,因为您的代码位于控制器的函数中。可能存在重复,因此无法用于生产,除非出于某种原因JS没有被缩小:)仍然感觉结果几乎相同,如果有什么危险的话,它在没有缩小的情况下工作,这可能是开发人员在prod构建脚本缩小JS时正在使用的。也让我想深入研究它们的代码,因为我知道参数
,但不确定它们如何提取每个参数的名称以传递正确的依赖关系。因为如果函数中没有它们,则无法使用它们,并且angular也无法知道您在谈论哪些依赖关系,因为它无法为功能。他们两个都做,因为他们也有。你可以用最后一个