Pourquoi la fonction dans l'annulation en ligne DI angulaire est-elle un élément de tableau?

J'ai une question pour les personnes angularjs ici.

Donc, j'utilise angulaire depuis un bon moment maintenant. Cependant, chaque fois que j'écris un nouveau contrôleur ou quelque chose qui utilise l'injection de dépendance, je me retrouve à l'écoute de la définition en ligne.

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

Je comprends comment cela fonctionne, mais pourquoi les gars angulaires ne se sont-ils pas décidés pour une approche plus commune? Par exemple, la manière requise

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

Ce qui me dérange, c'est que le deuxième argument est un ensemble de dépendances et le rappel comme dernier élément en même temps. En fait, le code du module entier est écrit dans le dernier élément du tableau.

Ne serait-il pas préférable d'avoir les dépendances dans un tableau supplémentaire? De cette façon, nous pourrions facilement passer une série de dépendances de manière dynamique dans une définition.

Je trouve cela plutôt gênant, mais je n'ai jamais vraiment pensé à la raison derrière. Quelqu'un peut m'expliquer cela?

Je ne connais pas la raison exacte derrière cette syntaxe, mais je suppose qu'elle doit être conforme à la cohérence – vous devriez pouvoir utiliser la même syntaxe indépendamment de l'endroit où vous devez injecter des services.

La plupart des endroits utilisent la syntaxe dans votre exemple: module.controller , module.factory etc. Dans ces endroits, la syntaxe pourrait être comme requirejs.

Toutefois, lors de la définition d'une directive, vous pouvez également injecter des services dans son contrôleur. Cela se fait généralement si le contrôleur de la directive sera utilisé par d'autres directives, par exemple la directive ngModel .

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

Dans ce cas, vous ne pouvez pas utiliser le style requirejs, mais le style array fonctionne. Je suppose que cela pourrait être l'une des raisons pour lesquelles la syntaxe est telle qu'elle est. Il pourrait en avoir d'autres.

En tant que note latérale, vous pouvez définir le contrôleur de la directive en tant que contrôleur normal, mais cela rend le code plus détaillé, plus vous pourriez éventuellement utiliser le contrôleur à d'autres endroits que la directive.

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

Ensuite, définissez la directive.

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

Vous ne devez plus utiliser la syntaxe avec un tableau. Vous pouvez écrire votre code comme ceci:

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

Lire la suite ici