¿Por qué la statement del controlador angularjs tiene esta estructura de syntax?

Veo la siguiente estructura de syntax del controlador angularjs todo el tiempo.

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

¿Por qué la repetición en los nombres de los parámetros? ¿Por qué no solo así?

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

o

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

La syntax de la matriz te ayudará con la minificación / uglify de tu código js .

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

Será minimizado y mutilado como:

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

Así que Angular no podrá descifrar qué dependencias inyectar

Por otro lado, usando la statement de array :

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

Será minificado como:

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

Así que Angular sabrá lo que representan a , b .


También hay otra forma de insertar variables si usa su primer código de ejemplo como se muestra a continuación:

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

o

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

que creará el método $inject mencionado anteriormente cuando el código está anotado.


Entonces, hay principalmente cuatro tipos de anotaciones :

  1. Anotación implícita : el primer código de ejemplo
  2. Anotación de matriz en línea : el segundo código de ejemplo
  3. $ inject Property Annotation – el método $ inject
  4. $ ngInject Comment Annotation – el método @ngInject

ng-anotar

Las herramientas como ng-annotate le permiten usar anotaciones de dependencia implícitas en su aplicación y agregar automáticamente anotaciones de matriz en línea antes de minificar. Si decides tomar este enfoque, probablemente quieras usar ng-strict-di .

Para obtener más información, consulte AngularJS Developer Guide – Uso de la dependency injection estricta .

Esta “repetición” es para que sea segura para la minificación:

AngularJS – Controladores, dependencias y minificación

o puede usar la siguiente syntax, de acuerdo con la popular guía 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) { } 

Puede escribir la primera versión ya que omite los parámetros de la función que también son accesibles a través de arguments dentro de la función. Por lo tanto, evitaría la repetición, pero cortar la propiedad de los argumentos tampoco es realmente eficiente (en comparación con solo escribir los parámetros).

Como las otras respuestas indicaron, la repuesta es hacer que sea seguro para la minificación.

La primera syntax del controlador permite minificar / uglificar el código de JavaScript con el uso de herramientas como ngmin. No estoy muy seguro de si la segunda y la tercera opción que ha proporcionado son opciones viables para crear un controlador, pero en cualquier caso no se minimizarán correctamente, ya que las herramientas ahora no serán lo que los proveedores son. Yo sugeriría utilizar la opción 1 o la opción 3 (sin los corchetes) para crear un controlador. Tenga en cuenta que la opción 3 no será minimizada correctamente por herramientas automatizadas.

Algo de información útil sobre la creación de controladores: AngularJS Developer Guide – Controladores

opción3 sin paréntesis

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