Comment l'injection de dépendances AngularJS gère-t-elle la minification et quelle est la meilleure pratique ?

Considérations sur la minification de l'injection de dépendances AngularJS

Le mécanisme d'injection de dépendances AngularJS présente des défis lors de la minification de JavaScript. La syntaxe d'injection de dépendances par défaut utilise des déclarations de fonctions, ce qui peut poser problème lors de la minification.

Syntaxe d'injection standard

Avant :

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

Pendant la minification , les variables $scope et $http peuvent être renommées, interrompant l'injection de dépendance système.

Syntaxe de style inject

Pour résoudre ce problème, il est recommandé d'utiliser la syntaxe de style inject :

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

Dans Avec cette syntaxe, le tableau de dépendances est passé sous forme de chaîne, préservant l'identité des dépendances lors de la minification.

Toujours utiliser Inject-Style ?

Oui, il est conseillé de toujours utiliser la syntaxe de style inject. Cela garantit que le système d'injection de dépendances fonctionnera correctement même après la minification.

Options supplémentaires

Comme alternative, vous pouvez utiliser le package ng-annotate npm pendant votre build processus pour éviter le besoin d’une syntaxe verbeuse de style injection. Ng-annotate analyse votre code JavaScript et ajoute des annotations de dépendance aux déclarations de fonctions, les rendant ainsi sécurisées pour la minification.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!