Почему функция в angular встроенной аннотации DI является элементом массива?

У меня есть вопрос для людей с угловатыми здесь.

Итак, я использую angular уже довольно давно. Однако каждый раз, когда я пишу новый контроллер или что-то, что использует инъекцию зависимостей, я нахожу себя ошибочным в определении встроенного определения.

someModule.controller('MyController', ['dep1', 'dep2', function (dep1, dep2) {
  ...
}]);

Я понимаю, как это работает, но почему ребята из angular не решили более общий подход? Например, метод requirejs

someModule.controller('MyController', ['dep1', 'dep2'], function(dep1, dep2) {
  ...
});

Что меня беспокоит, так это то, что второй аргумент представляет собой массив зависимостей и обратного вызова в качестве последнего элемента одновременно. Фактически весь код модуля записывается в последнем элементе массива.

Не было бы лучше иметь зависимости в дополнительном массиве? Таким образом, мы могли бы легко передать массив зависимостей динамически в определение.

Я нахожу это довольно неудобным, но никогда не думал о причине. Может кто-то объяснить это мне?

Ответ 1

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

В большинстве мест используется синтаксис в вашем примере: module.controller, module.factory и т.д. В этих местах синтаксис может выглядеть как requirejs.

Однако при определении директивы вы также можете вводить сервисы в свой контроллер. Обычно это делается, если директивный контроллер будет использоваться другими директивами, например. директива ngModel.

module.directive('myDirective', function () {
    return {
        controller: ['$scope', '$element', function ($scope, $element) {
            // ...
        }]
    };
});

В этом случае вы не можете использовать стиль requirejs, но стиль массива работает. Я думаю, это может быть одной из причин, по которой синтаксис такой, какой он есть. Могут быть и другие.

В качестве дополнительной заметки вы можете определить контроллер директивы как обычный контроллер, но это делает код более подробным, плюс вы можете потенциально использовать контроллер в других местах, кроме директивы.

module.controller('myDirectiveCtrl', ['$scope', '$element', function ($scope, $element) {
    // ...
}]);

И затем определите директиву.

module.directive('myDirective', function () {
    return {
        controller: 'myDirectiveCtrl'
    };
});

Ответ 2

Вам больше не нужно использовать синтаксис с массивом. Вы можете написать свой код следующим образом:

module.directive('myDirective', function () {
    return {
        controller: function ($scope, $element) {
            // ...
        }
    }
});

Подробнее здесь