angulaire.js - problème d'écriture par injection de dépendance angulaire

Question

Il existe deux façons d'écrire l'injection dans le livre
app.controller('PhoneListCtrl', ['$scope', '$http', function ($scope, $http)];
app. contrôleur( 'PhoneListCtrl', function ($scope,$http)];
Je ne comprends pas la différence entre ces deux ! ?

Answer 1

Formatez d’abord votre code :

Injection d'affichage, le code est trop long et difficile à lire, la compression du code ne se passe pas mal

app.controller('PhoneListCtrl', ['$scope', '$http', function（$scope, $http){
     //do something
}]);

L'injection implicite est simple à écrire, mais des erreurs se produiront lors de la compression de js car les noms de variables deviennent plus courts et l'injection de dépendances est basée sur le nom de son service

app.controller('PhoneListCtrl', function（$scope, $http){
     //do something
});

Nous recommandons la méthode $inject. Vous pouvez vous référer au Angular Style Guide

de JohnPapa.

app.controller('PhoneListCtrl', PhoneListCtrl);

PhoneListCtrl.$inject = ['$scope', '$http'];

function PhoneListCtrl($scope, $http){

}

Encore une chose, peu importe celui que vous utilisez, vous n'avez pas à vous soucier de la compression du code, car il existe des plug-ins qui nous aideront avec l'injection de dépendances. Que vous utilisiez gulp ou grunt, il y aura un. Le plug-in ng -annotate vous aide à ajouter une injection de dépendances.

Donnez-moi un exemple

app.controller('PhoneListCtrl', PhoneListCtrl);

/* @ngInject */
function PhoneListCtrl($scope, $http){

}

Answer 2

Je vais vous donner la réponse directement en citant un article
Adresse originale
L'injection de dépendances est l'un des meilleurs modèles d'AngularJS. Cela facilite les tests et rend les objets dont ils dépendent plus clairs. AngularJS est très flexible en matière d'injection. Le moyen le plus simple est de simplement transmettre le nom de la dépendance dans la fonction du module :

var app = angular.module('app',[]);app.controller('MainCtrl', function($scope, $timeout){
    $timeout(function(){
        console.log($scope);
    }, 1000);});

Ici, il est clair que MainCtrl dépend de $scope et $timeout.
Jusqu'à ce que vous soyez prêt à passer en production et à réduire votre code. En utilisant UglifyJS, l'exemple ci-dessus deviendrait :

var app=angular.module("app",[]);
app.controller("MainCtrl",function(e,t){t(function(){console.log(e)},1e3)})

Maintenant, comment AngularJS sait-il de quoi dépend MainCtrl ? AngularJS fournit une solution très simple : transmettez les dépendances sous forme de tableau de chaînes, et le dernier élément du tableau est une fonction qui prend toutes les dépendances comme paramètres.

app.controller('MainCtrl', ['$scope', '$timeout', function($scope, $timeout){
    $timeout(function(){
        console.log($scope);
    }, 1000);}]);

Ensuite, AngularJS peut aussi savoir trouver des dépendances dans le code compressé :

app.controller("MainCtrl",["$scope","$timeout",function(e,t){t(function(){console.log(e)},1e3)}])

Answer 3

Le premier est affiché en injection, et le second est en injection automatique. Aucune différence.
Mais le plus recommandé est l'injection de fonction d'injection. De plus, dans votre première manière d'écrire, notez qu'après injection d'affichage, l'ordre doit correspondre à l'ordre des paramètres de la fonction.

Answer 4

Merci à vous deux ! J'ai reçu une leçon>