Question

我正在学习角度。我今晚遇到了一个问题，导致我几个小时的挫败感。虽然我发现我的问题是什么，但我不知道它造成的问题。我在这里询问细节。这是我的角度控制器：

(function () {
    var customersController = function ($scope, $log, customersFactory, appSettings) {
        $scope.sortBy = 'name';
        $scope.reverse = false;

        $scope.appSettings = appSettings;


        function init() {
            //$scope.customers = customersFactory.getCustomers();
            customersFactory.getCustomers()
                 .success(function (customers) {
                     $scope.customers = customers;
                 })
                 .error(function (data, status, headers, config) {
                     $log.log('');
                 });
        };

        init();

        $scope.doSort = function (propName) {
            $scope.sortBy = propName;
            $scope.reverse = !$scope.reverse;
        };
    };

    customersController.$inject = ['$scope', 'customersFactory', 'appSettings'];

    angular.module('customersApp').controller('customersController', customersController);
}());

我被告知以下一行：
customersController.$inject = ['$scope', 'customersFactory', 'appSettings'];
是为了防止缩小。例如，如果$ scope变得缩小。这不是必需的，但是当你缩小时你会遇到问题。

你可以从我的控制器告诉我忘了'$log'。这是我得到的错误：

TypeError: undefined is not a function
    at init (http://localhost:8080/app/controllers/customersController.js:12:30)
    at new customersController (http://localhost:8080/app/controllers/customersController.js:21:9)
    at invoke (http://localhost:8080/scripts/angular.js:3869:17)
    at Object.instantiate (http://localhost:8080/scripts/angular.js:3880:23)
    at http://localhost:8080/scripts/angular.js:7134:28
    at link (http://localhost:8080/scripts/angular-route.min.js:7:248)
    at nodeLinkFn (http://localhost:8080/scripts/angular.js:6579:13)
    at compositeLinkFn (http://localhost:8080/scripts/angular.js:5986:15)
    at publicLinkFn (http://localhost:8080/scripts/angular.js:5891:30)
    at boundTranscludeFn (http://localhost:8080/scripts/angular.js:6005:21) <ng-view class="ng-scope">

我没有缩小我的javascript，所以我没想到会有任何错误。它在以下几行失败了：

 customersFactory.getCustomers()

由于错误它给了我，我一直认为它告诉我getCustomers()没有在我的工厂定义。

所以我的问题是：

为什么我在未公开的javascript文件中出现此错误？
由于$log.log('');位于何处，我的错误发生了吗？当$log.log('');实际被调用

Answer 1

你的'$ inject'调用告诉Angular与你的控制器匹配的服务的字符串名称。字符串不会缩小，这就是为什么这可以避免缩小错误（即使第一个参数$scope被重命名为a，angular也会知道将它所谓的$scope发送到第一个参数中）。因此，这有利于缩小代码，但会影响两个版本。

所以，当你离开$ log时，你告诉Angular这些服务['$ scope'，'customersFactory'，'appSettings']应该（以指定的顺序）注入这些参数（$ scope，$ log， customersFactory，appSettings）。

发生的事情是：

$scope进入$scope（耶！）

customersFactory进入了$log（不是你想要的）

appSettings进入customersFactory（悲伤 - 此行customersFactory.getCustomers()现在会尝试在getCustomers()服务上致电appSettings

undefined进入appSettings（更悲伤）

Answer 2

这是你的问题宣言

customersController = function ($scope, $log, customersFactory, appSettings)

你的注射

customersController.$inject = ['$scope', 'customersFactory', 'appSettings'];

应该是什么

customersController.$inject = ['$scope','$log','customersFactory', 'appSettings'];

依赖项是按照它们声明的顺序注入的，所以在你的情况下，你希望有一个$ log服务，你接受customersFactory服务注入的位置。

注入角度依赖？

2 个答案: