javascript - que - rutas angularjs

Razón para usar la notación de matriz al definir el controlador AngularJS

Question

Disculpas si esta pregunta parece demasiado obvia.

Recientemente he comenzado a explorar y aprender AngularJS. He pasado por algunos buenos tutoriales -

• Documentos oficiales
• w3cSchool
• Algun sitio genial

.. y hay algunos otros que he visto.

No estoy diciendo que haya leído / estudiado todos los documentos.

La pregunta comienza aquí.

Ahora, llegando a la pregunta, veo que la definición de un Controlador es diferente en un lugar y en otro es diferente.

Una definición utiliza una especie de notación matricial (no está seguro del término oficial) para inyección:

app.controller("MyCtrl", [''$scope'', function($scope){
    $scope.someData = "Array notation";
}]);

Y hay esto, sin matriz:

app.controller("MyCtrl", function($scope){
    $scope.someData = "non-array notation";
});

No decir que esto es lo único que estoy tratando de entender, pero sí, definitivamente me encantaría entender la diferencia.

¿Hay una diferencia importante entre los dos?

Muchas gracias.

Nota: Busqué preguntas similares en SO, pero no pude encontrar lo que estaba buscando. Lo siento.

Answer 1

Hay una diferencia cuando se trata de minificación. Si tuviera que minimizar su archivo, como puede hacer para aumentar el rendimiento, es cuando puede encontrar problemas si usó la opción dos.

Dado que Angular deduce las dependencias del controlador de los nombres de los argumentos a la función constructora del controlador, si tuviera que minimizar el código JavaScript para el controlador, todos los argumentos de su función también se minimizarían, y el inyector de dependencia no podría identificar Servicios correctamente.

Así que, en esencia, es mejor usar la primera opción, con un poco más de escritura, pero es más seguro y no se romperá si minimizas tu código :-)

This es un tutorial bastante corto pero lo explica muy bien.

Answer 2

La diferencia es que cuando se minimiza el segundo, el nombre del parámetro se minimizará y angular ya no podrá inspeccionar los argumentos para determinar qué dependencias inyectar. La sintaxis de la matriz con la dependencia en una cadena significa que es seguro de minificación.

Hay una biblioteca llamada ng-annotate que cambiará el segundo ejemplo al primer ejemplo para que el código vuelva a ser seguro.

Answer 3

No hay mucha diferencia entre los dos enfoques. Ambos códigos funcionan de la misma manera. Pero si usa el segundo código, lo confundirá después de que minimice su código.

Busque un ejemplo: -

  app.controller("MyCtrl", function(a){ ... });//$scope is changed to a

Y su código no funcionará, ya que el código de AngularJs usa la variable $ scope, ya que no toma los parámetros primero, segundo, tercero, etc.

Por lo tanto, el primer código es más seguro que el segundo, como si al minimizar el código, todavía tome la misma variable, es decir, $ alcance.

Busque un ejemplo:

app.controller("MyCtrl", [''$scope'', function(a){...}]);//a refers to $scope

Por lo tanto, el código anterior funciona bien cuando se minimiza el código ya que se inyecta $ scope en lugar de a.Por lo tanto, si pasa varios parámetros, el ordenamiento de las cuestiones en este ejemplo.

Mira lo siguiente:

 app.controller("MyCtrl", [''$scope'',''$timeout'' ,function(a,t){...}]);

donde a se inyecta como $ scope y t se inyecta como $ timeout .

Así que si cambias las órdenes de los parámetros pasados ​​como

app.controller ("MyCtrl", [''$ timeout'', ''$ scope'', función (a, t) {...}]); donde a es $ timeout y t es $ scope .

Por lo tanto, el ordenamiento es importante en este ejemplo, pero en su segundo ejemplo, el ordenamiento de códigos no importará, ya que el nombre importa como $ scope, $ timeout.

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

 MyCtrl.$inject = [''$scope''];

Para multiples parametros,

 MyCtrl.$inject = [''$scope'',''$timeout''];

Por lo tanto, hay principalmente tres tipos de anotación:

1. Anotación implícita - su primer código de ejemplo
2. $ inyectar Anotación de propiedad - el método $ inyectar
3. Anotación de matriz en línea: su segundo código de ejemplo

Puedes aprender más sobre esto here