Question

我刚刚开始学习AngularJS，我正处于创建控制器和服务（工厂）的过程中。

我的文件夹结构如下：

Scripts
|
|-- Controllers
    |
    |-- invoiceController.js
    |-- customerController.js
|
|-- Services
    |
    |-- invoiceServices.js
    |-- customerServices.js
|
|-- app.js

现在我想基于对象（例如发票，客户......）分离所有逻辑。这样我就可以为我的发票设置一个控制器和服务，并为我的客户提供其中一个等等。

但是如何在我的控制器中注入正确的服务？

当我尝试这个时：

app.js

(function () {
    'use strict';

    angular.module('skycountApp', [

        invoiceService

    ]);
})();

invoiceController.js

(function () {
    'use strict';

    angular
        .module('skycountApp')
        .controller('InvoiceController', invoiceController);

    invoiceController.$inject = ['$scope', 'Invoices'];

    function homeController($scope, Invoices) {
        $scope.text = Invoices;
    }
})();

invoiceService.js

(function () {
    'use strict';

    var invoiceService = angular.module('invoiceService', ['ngResource']);
    invoiceService.factory('Invoices', ['$resource',
        function ($resource) {
            return 'All invoices';
        }
    ]);
})();

的index.html

<!DOCTYPE html>
<html ng-app="skycountApp">
<head>
    <meta charset="utf-8" />
    <title>DOTA 2 Heroes</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-resource.js"></script>
    <script src="app.js"></script>
</head>
<body ng-cloak>
    <div ng-controller="InvoiceController">
        <h1>{{text}}</h1>
    </div>
</body>
</html>

我看到了消息All invoices。

但是现在我已经在应用程序创建时注入了该服务。我将有更多的服务（一个用于客户，一个用于支付，......）所以在开头注入它们对我来说听起来很愚蠢。

如何在正确的控制器中注入正确的服务？

app.js

(function () {
    'use strict';

    angular.module('skycountApp', [

        //invoiceService this is not needed here

    ]);
})();

invoiceController.js

(function () {
    'use strict';

    // Its only needed here, how to inject it??????

    angular
        .module('skycountApp')
        .controller('InvoiceController', invoiceController);

    invoiceController.$inject = ['$scope', 'Invoices'];

    function homeController($scope, Invoices) {
        $scope.text = Invoices;
    }
})();

Answer 1

首先，为什么要在不同的angularjs模块上创建服务

(function () {
    'use strict';

    var invoiceService = angular.module('invoiceService', ['ngResource']);
    invoiceService.factory('Invoices', ['$resource',
        function ($resource) {
            return 'All invoices';
        }
    ]);
})();

只需在相同的angularjs模块上创建服务

    (function () {
        'use strict';
   angular.module('skycountApp').factory('Invoices',['$resource',
            function ($resource) {
                return 'All invoices';
            }
        ]);
    })();

然后在你的控制器中

(function () {
    'use strict';
angular.module('skycountApp').controller('InvoiceController', function(Invoices){
    $scope.text = Invoices;
})();

注意：在app.js中添加ngResource angular.module

更新：要在其他模块中使用service define，您需要注入模块

(function () {
    'use strict';
angular.module('skycountApp',['invoiceService']).controller('InvoiceController', function(Invoices){
    $scope.text = Invoices;
})();

Answer 2

InvoiceController是skycountApp模块的一部分。它与它相结合，将invoiceService放入单独的模块中并没有多大意义。做

angular.module('skycountApp', ['invoiceService']);

仅表示invoiceService被列为模块的依赖项，现在模块可以访问其组件。 Invoices服务未被注入，并且在InvoiceController未被使用时不会产生任何开销。

如果同一用户很少使用发票和客户组件，您可以将invoiceService和InvoiceController作为发票模块的一部分，并仅在需要时使用它（将此模块视为单独的模块）应用程序）。但最后你很可能会发现，为了提高性能，所有js文件都必须构建成单个包。

AngularJS中的独立控制器和工厂模块

2 个答案: