Question

我想了解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(); 
});

Answer 1

它可以缩小AngularJS代码。 AngularJS使用参数名称将值注入控制器函数。在JavaScript缩小过程中，这些参数将重命名为较短的字符串。通过告诉使用字符串数组向函数注入哪些参数，AngularJS仍然可以在重命名参数时注入正确的值。

Answer 2

添加到Ufuk's answer：

ngmin - 将标准模块编译为最小安全模块

Angular的最小安全方括号表示法不太方便，因为你必须键入每个依赖项两次并且参数顺序很重要。有一个名为ngmin的工具哪个将您的标准模块编译为最小安全模块，因此您无需手动管理所有这些内容。

Angular + CoffeeScript

如果您正在使用 CoffeeScript，情况会更糟。您可以在ngmin之间进行选择，这将销毁您的源地图，或者如果您想自己写出来，则必须用方括号包装整个代码 ，这太丑了。

angular.module('whatever').controller 'MyCtrl', ['$scope', '$http' , ($scope, $http) ->
  # wrapped code
]

在我看来，这不是CoffeeScript的缺陷，而是Angular团队的一个糟糕的设计决策，因为它反对所有JS / CoffeeScript约定而不是将该函数作为最后一个参数。足够的咆哮，这是一个小帮手功能来解决它：

deps = (deps, fn) ->
  deps.push fn
  deps

这是一个非常简单的函数，它接受两个参数。第一个是包含依赖项的字符串数组，第二个是模块的函数。您可以这样使用它：

angular.module('whatever').controller 'MyCtrl', deps ['$scope', '$http'] , ($scope, $http) ->
  # unwrapped code \o/

Answer 3

如果您使用以下语法，只是为了举例说明已经说过的内容：

myapp.factory('MyService', function($scope, $http, MyService) { ... });

大多数JS minifiers会将其改为：

myapp.factory('MyService', function(a, b, c) { ... });

因为函数参数名称通常可以重命名为较短的名称。这将打破Angular代码。

在Angular中，要使代码在所有minifiers中都可以使用，请使用括号语法：

myapp.factory('MyService', ['$scope', '$http', 'MyService', function($scope, $http, MyService) { ... }]);

将缩小为：

myapp.factory('MyService', ['$scope', '$http', 'MyService', function(a, b, c) { ... }]);

请注意，缩小器不会触及字符串，因此Angular将按顺序查看缩小的代码并匹配参数：

$scope    = a
$http     = b
MyService = c

要避免使用这种丑陋的方括号语法，您应该使用ng-annotate之类的智能缩放器。

Answer 4

截至目前，ng-min已被弃用。请改用ng-annotate。

优良作法是在构建作业中使用ng-annotate，这样您在开发时就不必处理最小安全/括号表示法，因为这会使代码更难以阅读和维护。

npm上有grunt-plugin和gulp plugin。

Angular中方括号使用的目的是什么？

4 个答案:

ngmin - 将标准模块编译为最小安全模块

Angular + CoffeeScript