33

我想了解 和 的声明之间的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(); 
});
4

4 回答 4

34

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

于 2013-08-03T11:01:33.773 回答
6

要添加到Ufuk 的答案：

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

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

Angular + CoffeeScript

如果您使用的是 CoffeeScript，情况会更糟。您可以在 ngmin 之间进行选择，这会破坏您的 source map，或者如果您想自己写出来，则必须用方括号将整个代码包裹起来，这非常难看。

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/
于 2013-08-03T14:36:16.323 回答
5

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

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

大多数 JS 缩小器会将其更改为：

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

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

在 Angular 中，为了让你的代码在所有缩小器中都可以缩小，你可以使用括号语法：

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这样的智能缩小器。

于 2015-06-07T13:20:20.797 回答
2

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

在构建工作中使用 ng-annotate 是一种很好的做法，因此您在开发时不必处理 min-safe / 括号表示法，因为它使代码更难阅读和维护。

npm 上有一个grunt-plugin和一个gulp 插件。

于 2014-11-14T11:18:50.037 回答