Angularjs minimiza las mejores prácticas

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

Respuestas:

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
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