103

Estoy leyendo http://www.alexrothenberg.com/2013/02/11/the-magic-behind-angularjs-dependency-injection.html y resultó que la inyección de dependencia de angularjs tiene problemas si minimizas tu javascript, así que me pregunto si en lugar de

var MyController = function($scope, $http) {
    $http.get('https://api.github.com/repos/angular/angular.js/commits')
      .then(function(response) {
        $scope.commits = response.data
      })
  }

Deberías usar

var MyController = ['$scope', '$http', function($scope, $http) {
  $http.get('https://api.github.com/repos/angular/angular.js/commits')
    .then(function(response) {
      $scope.commits = response.data
    })
}]

en general, pensé que el segundo fragmento era para la versión anterior de angularjs, pero ...

¿Debería usar siempre la forma de inyección (la segunda)?

javascript angularjs dependency-injection

— Whisher
fuente

102

¡Sí , siempre! Entonces, de esta manera, incluso si su minifer convierte $ scope en variable ay $ http en variable b, su identidad aún se conserva en las cadenas.

Consulte esta página de documentos de AngularJS, desplácese hacia abajo hasta Una nota sobre la minificación .

ACTUALIZAR

Alternativamente, puede usar el paquete ng-annotate npm en su proceso de compilación para evitar esta verbosidad.

— Selvam Palanimalai
fuente

Este y algunos otros problemas se explican muy bien en egghead.io. JFYI

— Wottensprels

@Sprottenwels: ¡Sí! Hay muchos recursos útiles.

— Selvam Palanimalai

8

En lugar de usar esta sintaxis más detallada, puede usar ngmin y una herramienta de compilación (como Grunt) antes de ejecutar la minificación. De esa manera, puede minificar correctamente pero también usar la sintaxis de inyección de dependencia.

— jkjustjoshing

4

Una nota sobre la minificación se ha movido aquí docs.angularjs.org/tutorial/step_07

— Razvan.432

Consulte también Guía para desarrolladores de AngularJS - Anotación implícita .

— georgeawg

36

Es más seguro utilizar la segunda variante, pero también es posible utilizar la primera variante de forma segura con ngmin .

ACTUALIZACIÓN:
Ahora ng-annotate se convierte en una nueva herramienta predeterminada para resolver este problema.

— ONZ_
fuente

7

Sí, debe utilizar la inyección de dependencia explícita (segunda variante). Pero desde Angular 1.3.1 puede desactivar la inyección de dependencia implícita , es realmente útil para resolver problemas potenciales con el cambio de nombre de una vez (antes de la minificación).

Desactivación de DI implícita, usando la strictDipropiedad de configuración:

angular.bootstrap(document, ['myApp'], {
    strictDi: true
});

Desactivación de DI implícita, usando ng-strict-didirectiva:

<html ng-app="myApp" ng-strict-di>

— dizel3d
fuente

7

Solo para señalar que si usa

Hacendado

no hay necesidad de hacer como

var MyController = ['$scope', '$http', function($scope, $http) {
  $http.get('https://api.github.com/repos/angular/angular.js/commits')
    .then(function(response) {
      $scope.commits = response.data
    })
}]

porque gruñido durante minify tenga en cuenta cómo administrar DI.

— Whisher
fuente

1

Como dijo OZ_, use ngmin para minimizar todos los archivos angulares js, como directive.js service.js. Después de eso, puede usar el compilador Closure para optimizarlo.

árbitro:

Cómo minificar los scripts de angularjs

Construye con YO

— FXP
fuente

0

Es posible que desee utilizar $injectcomo se menciona aquí :

MyController.$inject = ['$scope', '$http'];

function MyController($scope, $http) {
  $http.get('https://api.github.com/repos/angular/angular.js/commits')
    .then(function(response) {
      $scope.commits = response.data
    })
}

— sin identificación
fuente

0

Utilice la inyección de dependencia estricta para diagnosticar problemas

Con la anotación implícita , el código se romperá cuando se minimice.

De los Documentos:

Anotación implícita

Cuidado: si planea minimizar su código, los nombres de sus servicios cambiarán de nombre y romperán su aplicación.

Puede agregar una ng-strict-didirectiva en el mismo elemento ng-apppara optar por el modo DI estricto.

<body ng-app="myApp" ng-strict-di>

El modo estricto arroja un error cada vez que un servicio intenta utilizar anotaciones implícitas.

Esto puede resultar útil para determinar la búsqueda de problemas.

Para más información, ver

— Georgeawg
fuente

Angularjs minimiza las mejores prácticas

Utilice la inyección de dependencia estricta para diagnosticar problemas

Anotación implícita