Pregunta ¿Cuál es el propósito del uso del corchete cuadrado en Angular?


Me gustaría entender la diferencia entre la declaración de MyOtherService y MyOtherComplexService. Especialmente, ¿cuál es el propósito de la parte del soporte cuadrado? ¿Cuándo usarlos y cuándo no?

var myapp = angular.module('myapp', []);

myapp.factory('MyService', function($rootScope, $timeout) {
    return {
        foo: function() {
            return "MyService";
        }
    }
});

myapp.factory('MyOtherService', function($rootScope, $timeout, MyService) {
    return {
        foo: function() {
            return "MyOtherService";
        }
    }
});

myapp.factory('MyOtherComplexService', ['$rootScope', '$timeout', 'MyService', function($rootScope, $timeout, MyService) {
    return {
        foo: function() {
            return "MyOtherComplexService";
        }
    } 
}]);

myapp.controller('MyController', function($scope, MyOtherService, MyOtherComplexService) {

    $scope.x = MyOtherService.foo();
    $scope.y = MyOtherComplexService.foo(); 
});

32
2017-08-03 10:55


origen


Respuestas:


Permite minar el código AngularJS. AngularJS usa nombres de parámetros para inyectar los valores a su función de controlador. En el proceso de minificación de JavaScript, estos parámetros se renombran a cadenas más cortas. Al decir qué parámetros se inyectan a la función con una matriz de cadenas, AngularJS aún puede inyectar los valores correctos cuando se cambian los parámetros.


34
2017-08-03 11:01



Para añadir a La respuesta de Ufuk:

ngmin: compila los módulos estándar para los módulos min-safe

La notación de corchetes cuadrados minuciosa de Angular es menos conveniente, porque tienes que escriba cada dependencia dos veces y el orden de los argumentos importa. Hay un herramienta llamada ngmin cual compila sus módulos estándar a módulos min-safe, por lo que no tiene que administrar todas esas cosas a mano.

Angular + CoffeeScript

Si estás usando CoffeeScript la situación es aún peor. Puedes elegir entre ngmin, que destruye tu mapa fuente, o si quieres escribirlo solo, tendrás que envuelva todo su código con corchetes, que es súper feo

angular.module('whatever').controller 'MyCtrl', ['$scope', '$http' , ($scope, $http) ->
  # wrapped code
]

En mi opinión, esto no es una falla de CoffeeScript, sino una decisión de diseño deficiente del equipo de Angular, porque no es la última argumentación la que está en contra de todas las convenciones de JS / CoffeeScript. Bastante despotricando, aquí hay una pequeña función auxiliar para evitarlo:

deps = (deps, fn) ->
  deps.push fn
  deps

Esta es una función muy simple que acepta dos argumentos. El primero es una matriz de cadenas que contiene sus dependencias, el segundo es la función de su módulo. Puedes usarlo así:

angular.module('whatever').controller 'MyCtrl', deps ['$scope', '$http'] , ($scope, $http) ->
  # unwrapped code \o/

6
2017-08-03 14:36



Solo para ejemplificar lo que ya se dijo, si usa la siguiente sintaxis:

myapp.factory('MyService', function($scope, $http, MyService) { ... });

la mayoría de los minificadores de JS lo cambiarán a:

myapp.factory('MyService', function(a, b, c) { ... });

ya que los nombres de argumentos de funciones generalmente se pueden renombrar para nombres más cortos. Esto romperá el código angular.

En Angular, para obtener tu código minificable en todos los minificadores, utilizas la sintaxis del paréntesis:

myapp.factory('MyService', ['$scope', '$http', 'MyService', function($scope, $http, MyService) { ... }]);

eso será minificado para:

myapp.factory('MyService', ['$scope', '$http', 'MyService', function(a, b, c) { ... }]);

Tenga en cuenta que los minificadores no tocan cadenas de caracteres, por lo que Angular verá el código minificado y los argumentos de coincidencia en orden:

$scope    = a
$http     = b
MyService = c

Para evitar esta fea sintaxis de corchetes cuadrados, debes usar miniaturas inteligentes como ng-anotar.


5
2018-06-07 13:20



A partir de ahora, ng-min está en desuso. Utilizar ng-anotar en lugar.

Es una buena práctica usar ng-anotación en su trabajo de compilación para que no tenga que lidiar con la notación miniaseguridad / corchete al desarrollar, ya que hace que el código sea más difícil de leer y mantener.

Hay un grunt-plugin y un plugin gulp disponible en npm.


2
2017-11-14 11:18