Question

请考虑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();
        }
    };
});

请注意，对于＆＃34; butterbar＆＃34;他传入一个数组，其中第一项只是一个依赖名为"$rootScope"的字符串，第二项是一个函数。该函数声明对$rootScope的依赖。为什么我们在这里重复一遍？特别是当它似乎可以这样做时：

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

我猜测依赖名称是一个字符串具有某种意义。任何人都可以告诉我他们为什么在整本书中这样做（而不仅仅是指令）？

Answer 1

当缩小JavaScript时，参数名称通常会更改为更短的内容，例如a。这会打破依赖注入。

如果你使用数组，Angular知道要注入什么以及注入它的位置。这适用于数组，因为数组的字符串元素不会被缩小修改。

在这个例子中：

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

缩小的代码可能如下所示：

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

由于Angular不知道要注射什么，这将不再有效，而这一点：

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

缩小的代码可能会像这样结束：

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

这仍然有效，因为Angular仍然知道要注入什么。请参阅Angular tutorial中的缩小说明。

通常我只是在准备好生产时添加数组样式。

为什么他们在AngularJS中遍布数组？

1 个答案: