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

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.


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


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.


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>

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.



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

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

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.