Какова цель использования квадратных скобок в Angular?

Я хотел бы понять разницу между объявлением 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(); 
});

Ответ 1

Он позволяет минимизировать код AngularJS. AngularJS использует имена параметров для ввода значений в функцию вашего контроллера. В процессе минимизации JavaScript эти параметры переименовываются в более короткие строки. Говоря, какие параметры вводятся в функцию с помощью строкового массива, AngularJS все еще может вводить правильные значения при переименовании параметров.

Ответ 2

Чтобы добавить к ответ Ufuk:

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/

Ответ 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) { ... }]);

Обратите внимание, что minifiers не касаются строк, поэтому Angular увидит уменьшенный код и сопоставляет аргументы в порядке:

$scope    = a
$http     = b
MyService = c

Чтобы избежать этого уродливого синтаксиса квадратной скобки, вы должны использовать smart minifiers как ng-annotate.

Ответ 4

На данный момент ng-min устарела. Вместо этого используйте ng-annotate.

Хорошей практикой является использование ng-аннотата в вашем задании построения, поэтому при разработке не нужно иметь дело с минимальной записью/скобкой, поскольку это делает код более трудным для чтения и обслуживания.

Существует grunt-plugin и gulp плагин доступно на npm.