Javascript Girl
  1. Javascript Girl
  3. Quel est l'avantage du mode DI AngularJS Strict?
Intereting Posts
Javascript: Pourquoi cette déclaration de retour entraîne-t-elle une erreur de syntaxe? Afficher la carte du monde sans répéter JavaScript OAuth connectez-vous avec Twitter Comment stocker d'autres langues (unicode) dans les cookies et le récupérer Android, extrayez la variable javascript à partir de la visualisation via l'interface javascript Optimiser OU dans IF Comment puis-je ajouter un auditeur Javascript pour capturer l'entrée du scanner de code à barres bluetooth vers iPad? Force javascript à exécuter * avant * redessiner le navigateur (exemple jsFiddle) Comment inclure une bibliothèque tierce qui utilise une approche d'importation plus ancienne pour Angular4.x? Cette valeur dans JavaScript anonymous function Comment puis-je trouver des éléments qui contiennent un attribut data- * correspondant à un préfixe en utilisant jquery Jquery Uncaught SyntaxError: jeton inattendu} – Essayer de passer guid comme paramètre Comment écrire .indexOn pour les clés dynamiques dans la base de Firebase? Ng-selected ne fonctionne pas dans un élément sélectionné Laisser tomber un élément uniquement dans la drogue qui se trouve en face

Quel est l'avantage du mode DI AngularJS Strict?

Récemment, je rencontre le mode DI AngularJS Strict. Quel est le but et l'avantage de l'utiliser? Obtenirons-nous une amélioration significative de la performance en l'utilisant spécialement sur les appareils mobiles?

J'essaie de l'appliquer à mon code et je n'ai pas fait d'annotation lors de l'écriture du code. Cependant, j'ai mon code à minify et ng-annota pendant la compilation. Mais pourquoi est-ce que, après avoir ajouté le mode Strict DI à mon code, j'ai toujours l'erreur en disant "L'annotation explicite requise"?

Le mode DI strictement déclenche des erreurs lorsque, au moment de la construction, on trouve un code qui n'est pas conforme à la minification; Mais notez que le code peut être correct et sans erreurs logiques-syntaxiques.

En citant la documentation:

Si cet attribut est présent sur l'élément de l'application, l'injecteur sera créé en mode "strict-di". Cela signifie que l'application ne pourra pas appeler des fonctions qui n'utilisent pas l'annotation de fonction explicite (et ne sont donc pas adaptées à la minification), comme décrit dans le guide d'injection de dépendance, et des informations de débogage utiles aideront à suivre la racine de ces bogues.

Par exemple, ce code déclenche une erreur car ($scope, $http, $filter) ne sont pas injectés explicitement en utilisant $inject .controller(A,B) ou donnant à la .controller(A,B) un tableau en tant que second 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 droit: 

 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){ //... }]);

Pour répondre à votre question, il n'y a pas d'amélioration significative de la performance en l'utilisant. Il ne vous accorde que la sécurité des erreurs de minifiance. Cela parce que la minification modifie les noms des variables qui rompent votre code lorsque, par exemple, vous utilisez $scope sans annotation explicite.

La norme stricte anormale impose la minimisabilité du code.

Lorsque votre code est minifié, les noms des paramètres sont raccourcis, ce qui brise l'DI angulaire. Pour contrer ce problème, angular a ajouté deux (peut-être plus maintenant) des moyens alternatifs pour ajouter des dépendances.

Peut-être 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. La dépendance est la chaîne avant le dernier élément dans le tableau, les chaînes sont les noms de dépendance. 

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

Votre ng-annotate ne fonctionne probablement pas avant que les tests angulaires ne soient vérifiés. Assurez-vous que vous n'utilisez PAS uglify avec annotez, faites-le explicitement AVANT. Si votre code lance une erreur, il est probable qu'il y a quelque part que l'annotation n'a pas été faite.

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

Vous pouvez le faire en utilisant ng-strict-di : 

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

Vous pouvez également ajouter strictement-di comme ceci: 

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

Lorsque vous utilisez des applications de type météorite angulaire angulaire.