javascript 在 Angular 中使用方括号的目的是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18032068/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is the purpose of square bracket usage in Angular?
提问by Sydney
I would like to understand the difference between the declaration of MyOtherServiceand MyOtherComplexService. Especially what is the purpose of square bracket part? When to use them and when not?
我想了解MyOtherService和的声明之间的区别MyOtherComplexService。特别是方括号部分的目的是什么？什么时候用，什么时候不用？
var myapp = angular.module('myapp', []);
myapp.factory('MyService', function($rootScope, $timeout) {
return {
foo: function() {
return "MyService";
}
}
});
myapp.factory('MyOtherService', function($rootScope, $timeout, MyService) {
return {
foo: function() {
return "MyOtherService";
}
}
});
myapp.factory('MyOtherComplexService', ['$rootScope', '$timeout', 'MyService', function($rootScope, $timeout, MyService) {
return {
foo: function() {
return "MyOtherComplexService";
}
}
}]);
myapp.controller('MyController', function($scope, MyOtherService, MyOtherComplexService) {
$scope.x = MyOtherService.foo();
$scope.y = MyOtherComplexService.foo();
});
回答by Ufuk Hac?o?ullar?
It enables AngularJS code to be minified. AngularJS uses parameter names to inject the values to your controller function. In JavaScript minification process, these parameters are renamed to shorter strings. By telling which parameters are injected to the function with a string array, AngularJS can still inject the right values when the parameters are renamed.
它使 AngularJS 代码能够被缩小。AngularJS 使用参数名称将值注入您的控制器函数。在 JavaScript 缩小过程中，这些参数被重命名为更短的字符串。通过使用字符串数组告诉函数将哪些参数注入，AngularJS 仍然可以在重命名参数时注入正确的值。
回答by Stephan B?nnemann-Walenta
To add to Ufuk's answer:
添加到Ufuk 的答案：
ngmin - compiles your standard modules to min-safe modules
ngmin - 将您的标准模块编译为最小安全模块
Angular's min-safe square bracket notation is cleary less convenient, because you have to type every dependency twice and argument order matters.There is a tool called ngminwhich compiles your standard modules to min-safe modules, so you don't have to manage all those things by hand.
Angular 的最小安全方括号表示法显然不太方便，因为您必须两次键入每个依赖项并且参数顺序很重要。有一个名为ngmin的工具可以将您的标准模块编译为最小安全模块，因此您不必手动管理所有这些内容。
Angular + CoffeeScript
Angular + CoffeeScript
If you're using CoffeeScript the situation is even worse. You may choose between ngmin, which will destroy your source map, or if you want to write it out all by yourself you'll have to wrap your entire code with square brackets, which is super ugly.
如果您使用的是 CoffeeScript，情况就更糟了。你可以选择 ngmin，它会破坏你的源映射，或者如果你想自己写出来，你必须用方括号括起整个代码，这非常难看。
angular.module('whatever').controller 'MyCtrl', ['$scope', '$http' , ($scope, $http) ->
# wrapped code
]
In my opinion this is not a CoffeeScript flaw, but a poor design decision of the Angular team, because it's against all JS/CoffeeScript conventions not to have the function as the last argument. Enough ranting, here is a little helper function to work around it:
在我看来，这不是 CoffeeScript 的缺陷，而是 Angular 团队的一个糟糕的设计决定，因为不将函数作为最后一个参数违反了所有 JS/CoffeeScript 约定。足够的咆哮，这里有一个小辅助函数来解决它：
deps = (deps, fn) ->
deps.push fn
deps
This is a very simple function that accepts two arguments. The first one is an array of strings containing your dependencies, the second one is your module's function. You may use it like this:
这是一个非常简单的函数，它接受两个参数。第一个是包含依赖项的字符串数组，第二个是模块的函数。你可以这样使用它：
angular.module('whatever').controller 'MyCtrl', deps ['$scope', '$http'] , ($scope, $http) ->
# unwrapped code \o/
回答by Zanon
Just to exemplify what was already said, if you use the following syntax:
只是为了举例说明已经说过的内容，如果您使用以下语法：
myapp.factory('MyService', function($scope, $http, MyService) { ... });
most of the JS minifiers will change it to:
大多数 JS 压缩器会将其更改为：
myapp.factory('MyService', function(a, b, c) { ... });
since functions argument names usually can be renamed for shorter names. This will break the Angular code.
因为函数参数名称通常可以重命名为较短的名称。这将破坏 Angular 代码。
In Angular, to get your code minifiable in all minifiers, you use the bracket syntax:
在 Angular 中，为了让你的代码在所有的 minifiers 中都可以缩小，你可以使用括号语法：
myapp.factory('MyService', ['$scope', '$http', 'MyService', function($scope, $http, MyService) { ... }]);
that will be minified to:
这将被缩小为：
myapp.factory('MyService', ['$scope', '$http', 'MyService', function(a, b, c) { ... }]);
Note that minifiers do not touch on strings so Angular will see the minified code and match arguments in order:
请注意，缩小器不会接触字符串，因此 Angular 将看到缩小后的代码并按顺序匹配参数：
$scope = a
$http = b
MyService = c
To avoid this ugly square bracket syntax, you should use smart minifiers like ng-annotate.
为了避免这种丑陋的方括号语法，你应该使用像ng-annotate这样的智能缩小器。
回答by tmaximini
As of now, ng-min is deprecated. Use ng-annotateinstead.
截至目前，不推荐使用 ng-min。请改用ng-annotate。
It is good practice to use ng-annotate in your build job so you don't have to deal with the min-safe / bracket notation when developing, as it makes the code harder to read and maintain.
在构建作业中使用 ng-annotate 是一种很好的做法，这样您在开发时就不必处理 min-safe / 括号表示法，因为它会使代码更难阅读和维护。
There is a grunt-pluginand a gulp pluginavailable on npm.
npm 上有一个grunt-plugin和一个gulp 插件。
