web-dev-qa-db-fra.com

Quel est l'avantage du mode AngularJS Strict DI?

Récemment, je suis tombé sur le mode AngularJS Strict DI. Quel est le but et l'avantage de l'utiliser? Allons-nous améliorer considérablement les performances en l'utilisant en particulier sur les appareils mobiles?

J'essaie de l'appliquer à mon code et je n'ai fait aucune annotation lors de l'écriture du code. Cependant, j'ai mon code à minimiser et à annoter pendant la construction. Mais pourquoi est-ce qu'après avoir ajouté le mode DI strict à mon code, j'obtiens toujours l'erreur disant "Annotation explicite requise"?

javascriptangularjsdependency-injection
19
user1995781

Le mode DI strict génère essentiellement des erreurs lorsque, au moment de l'exécution, il est trouvé un morceau de code qui n'est pas conforme à la minification; mais notez que le code peut être correct et sans erreurs logico-syntaxiques.

Citant la documentation:

si cet attribut est présent sur l'élément app, l'injecteur sera créé en mode "strict-di". Cela signifie que l'application ne parviendra pas à appeler des fonctions qui n'utilisez pas d'annotation de fonction explicite (et ne conviennent donc pas à la minification), comme décrit dans le guide Injection de dépendances, et des informations de débogage utiles aideront à retrouver la trace. la racine de ces bugs.

Par exemple, ce code déclenche une erreur car ($scope, $http, $filter) Ne sont pas explicitement injectés en utilisant $inject Ou en donnant à la méthode .controller(A,B) un tableau comme deuxième champ.

angular.module("myApp", [])
// BadController cannot be invoked, because
// the dependencies to be injected are not
// explicitly listed.
.controller("BadController", function($scope, $http, $filter) {
  // ...
});

Extrait de droite:

angular.module("myApp", [])
  .controller("GoodController1", GoodController1);

GoodController1.$inject = ["$scope", "$http", "$filter"];

function GoodController1($scope, $http, $filter){}

ou:

angular.module("myApp", [])
  .controller("GoodController1", 
              ["$scope", "$http", "$filter", function ($scope, $http, $filter){
     //...
}]);

Afin de répondre à votre question, il n'y a pas d'amélioration significative des performances en l'utilisant. Il vous accorde uniquement la sécurité des erreurs de minifiabilité. Ceci parce que la minification change les noms de variables en cassant votre code lorsque vous utilisez par exemple $scope Sans annotation explicite.

33
morels

Vous pouvez également ajouter strict-di comme ceci:

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

lors de l'utilisation de angular applications de type météore es6.

6
Milean

La DI angulaire stricte applique la minifrabilité du code.

Lorsque votre code est réduit, les noms des paramètres sont raccourcis, ce qui rompt le DI angulaire. Pour contrer ce problème angular a ajouté deux (peut-être plus maintenant) façons alternatives d'ajouter des dépendances.

Peut-être que la façon la plus courante et celle utilisée par ng-annotate est de placer un tableau au lieu d'une fonction comme deuxième paramètre. Les dépendances sont les chaînes avant le dernier élément du tableau, les chaînes sont les noms des dépendances.

controller.$inject(['$scope']);

angular.module('app', ['dependency']).controller('myCtrl', ['myFirstDep',
function(willBeInjectedHere){}])

Votre ng-annotate ne s'exécute probablement pas avant angular fait ses vérifications. Assurez-vous que vous n'exécutez PAS uglify avec annotate, faites-le explicitement AVANT. Si votre code génère une erreur, il y a très probablement là est quelque part que l'annotation n'a pas été faite.

6
Olavi Sau

La bonne pratique consiste à utiliser strict-di. L'application ne doit pas s'exécuter lors de l'appel de fonctions qui n'utilisent pas d'annotation de fonction explicite. Cela signifie que les méthodes utilisées doivent être déclarées. En utilisant le ng-strict-di garantira que l'application confirme avec la directive d'injection de dépendance et ne fonctionnera pas sinon.

Vous pouvez y parvenir en utilisant ng-strict-di:

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

Voir le guide du développeur: https://docs.angularjs.org/guide/di

4
user4565643