Tại sao họ vượt qua các mảng trên AngularJS?

Question

Cân nhắc đoạn mã này từ 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(); 
     } 
    }; 
}); 

Chú ý rằng đối với "butterbar" chỉ thị ông đi trong một mảng nơi mục đầu tiên chỉ là một chuỗi với tên phụ thuộc "$rootScope", và mục thứ hai là một hàm. Hàm đó khai báo sự phụ thuộc vào $rootScope. Tại sao chúng ta lặp lại chính mình ở đây? Đặc biệt khi có vẻ như chỉ có thể thực hiện điều này:

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'); 
      }); 
     } 
    }; 
}); 

Tôi đoán rằng tên phụ thuộc là chuỗi có ý nghĩa quan trọng. Bất cứ ai có thể cho tôi biết lý do tại sao họ làm điều này trong suốt cuốn sách (và không chỉ cho các chỉ thị)?

Answer 1

Khi JavaScript được rút gọn, tên thông số thường được thay đổi thành một cái gì đó ngắn hơn như a. Điều này sẽ phá vỡ tiêm phụ thuộc.

Nếu bạn sử dụng một mảng, Angular biết những gì để tiêm và nơi để tiêm nó. Điều này làm việc với mảng vì các phần tử chuỗi của mảng không được sửa đổi bằng cách rút gọn.

Trong ví dụ này:

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

đang được rút gọn có thể trông như thế này:

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

này sẽ không còn làm việc kể từ góc sẽ không biết phải tiêm, trong khi với điều này:

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

mã được rút gọn có thể kết thúc như sau:

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

Điều này vẫn hoạt động được vì Angular vẫn biết phải tiêm gì. Xem ghi chú về việc rút gọn trong số Angular tutorial.

Thông thường tôi chỉ thêm kiểu mảng khi tôi sẵn sàng sản xuất.