Warum übergeben sie Arrays in AngularJS?

Question

Betrachten Sie dieses Schnipsel von AngularJS by Brad Green.

var directives = angular.module('guthub.directives', []); 

directives.directive('butterbar', ['$rootScope', 
    function ($rootScope) { 
     return { 
      link: function (scope, element, attrs) { 
       element.addClass('hide'); 

       $rootScope.$on('$routeChangeStart', function() { 
        element.removeClass('hide'); 
       }); 

       $rootScope.$on('$routeChangeSuccess', function() { 
        element.addClass('hide'); 
       }); 
      } 
     }; 
    }] 
); 

directives.directive('focus', function() { 
    return { 
     link: function (scope, element, attrs) { 
      element[0].focus(); 
     } 
    }; 
}); 

Beachten Sie, dass für die „Butterbar“ Richtlinie er in einem Array übergibt, wo das erste Element ist nur eine Zeichenfolge mit dem Beziehungsnamen "$rootScope", und das zweite Element ist eine Funktion. Diese Funktion deklariert eine Abhängigkeit von $rootScope. Warum wiederholen wir uns hier? Vor allem, wenn es möglich zu sein scheint gerade dies zu tun:

directives.directive('butterbar', function ($rootScope) { 
    return { 
     link: function (scope, element, attrs) { 
      element.addClass('hide'); 

      $rootScope.$on('$routeChangeStart', function() { 
       element.removeClass('hide'); 
      }); 

      $rootScope.$on('$routeChangeSuccess', function() { 
       element.addClass('hide'); 
      }); 
     } 
    }; 
}); 

Ich vermute, dass der Beziehungsname ein String ist eine Art von Bedeutung. Kann mir jemand sagen, warum sie das im ganzen Buch machen (und nicht nur für Anweisungen)?

Answer 1

Wenn JavaScript minimiert wird, werden die Namen der Parameter häufig in etwas kürzere Werte geändert, z. B. a. Dies würde die Abhängigkeitsinjektion unterbrechen.

Wenn Sie ein Array verwenden, weiß Angular was zu injizieren und wo es injizieren. Dies funktioniert mit dem Array, da die String-Elemente des Arrays nicht durch Minification modifiziert werden.

In diesem Beispiel:

app.controller('test', function($scope, $someProvider) { 
}); 

minified Code wie folgt aussehen könnte:

app.controller('test',function(a,b){}); 

Dies würde nicht mehr funktionieren, da Angular nicht wissen, was zu injizieren, während mit diesem:

app.controller('test', ['$scope', '$someProvider', function($scope, $someProvider) { 
}]); 

der verkleinerte Code könnte so enden:

app.controller('test',['$scope','$someProvider',function(a,b) {}]); 

Dies würde immer noch funktionieren, weil Angular noch weiß, was zu injizieren. Siehe die Anmerkung zur Minification in der Angular tutorial.

Normalerweise füge ich einfach den Array-Stil hinzu, wenn ich für die Produktion bereit bin.