Por que a declaração do controlador angularjs tem essa estrutura de syntax?

Eu vejo a seguinte estrutura de syntax do controlador angularjs o tempo todo.

angular.module('7minWorkout').controller('WorkoutController', ['$scope', '$interval', '$location', function ($scope, $interval, $location) { }]); 

Por que a repetição nos nomes dos parâmetros? Por que não apenas assim

 angular.module('7minWorkout').controller('WorkoutController', ['$scope', '$interval', '$location', function () { }]); 

ou

  angular.module('7minWorkout').controller('WorkoutController', [ function ($scope, $interval, $location) { }]); 

A syntax da matriz irá ajudá-lo com o minification / uglify do seu código js .

 angular.module('7minWorkout').controller('WorkoutController', function ($scope, $interval, $location) { // code here }); 

Será minificado e mutilado como:

 angular.module('7minWorkout').controller('WorkoutController', function (a, b, c) { // code here }); 

Então Angular não será capaz de descobrir quais dependencies para injetar

Por outro lado, usando a declaração de array :

 angular.module('7minWorkout').controller('WorkoutController', ['$scope', '$interval', '$location', function ($scope, $interval, $location) { // code here }]); 

Será reduzido como:

 angular.module('7minWorkout').controller('WorkoutController', ['$scope', '$interval', '$location', function (a, b, c) { // code here }]); 

Então Angular saberá o que a , b e c representam.


Há também outra maneira de injetar variables ​​se você usar seu primeiro código de exemplo, como abaixo:

 WorkoutController.$inject = ['$scope', '$interval', '$location']; 

ou

 angular.module('7minWorkout').controller('WorkoutController', /* @ngInject */ function ($scope, $interval, $location) { // code here }); 

que criará o método $inject mencionado acima quando o código for anotado.


Portanto, existem principalmente quatro tipos de anotação :

  1. Anotação Implícita – o primeiro código de exemplo
  2. Inline Array Annotation – o segundo código de exemplo
  3. $ inject Property Annotation – o método $ inject
  4. $ ngInject Comment Comment Annotation – o método @ngInject

anotar

Ferramentas como ng-annotate permitem que você use annotations de dependência implícitas em seu aplicativo e adicione automaticamente annotations de matriz inline antes da compactação. Se você decidir adotar essa abordagem, provavelmente desejará usar ng-strict-di .

Para obter mais informações, consulte o Guia do Desenvolvedor AngularJS – Usando a Injeção de Dependência Rígida .

Esta “repetição” é para torná-lo seguro para a redução:

AngularJS – Controladores, Dependências e Minificação

ou você pode usar a seguinte syntax, de acordo com o popular guia de estilo angular https://github.com/johnpapa/angular-styleguide

 angular.module('7minWorkout') .controller('WorkoutController', WorkoutController); WorkoutController.$inject = ['$scope', '$interval', '$location']; function WorkoutController($scope, $interval, $location) { } 

Você poderia escrever a primeira versão, uma vez que apenas omite os parâmetros da function que também são acessíveis através de arguments dentro da function. Assim, você evitaria a repição, mas cortar a propriedade arguments também não é realmente eficiente (comparado a apenas digitar os parâmetros).

Como as outras respostas afirmaram, a repição é torná-la segura para a minificação.

A primeira syntax do controlador torna possível minimizar / uglify o código javascript com o uso de ferramentas como ngmin. Não tenho certeza se as opções 2 e 3 que você forneceu são opções viáveis ​​para criar um controlador, mas em qualquer caso elas não serão reduzidas corretamente, uma vez que as ferramentas não serão agora o que os provedores são. Eu sugeriria usar a opção 1 ou a opção 3 (sem os colchetes) para criar um controlador. Observe que a opção 3 não será reduzida corretamente por ferramentas automatizadas.

Algumas Informações Úteis sobre a Criação de Controladores: AngularJS Developer Guide – Controllers

opção3 sem parênteses

 angular.module('7minWorkout').controller('WorkoutController', function ($scope, $interval, $location) { //Your Code });