AngularJS中的獨立控制器和工廠模塊

我剛開始學習AngularJS，我正在創建控制器和服務（工廠）。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

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

來源

2015-09-04 Mivaweb

首先你爲什麼在不同的angularjs模塊上創建服務的

(function() { 
    'use strict'; 

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

簡單CREA同樣angularjs模塊

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

，然後在TE服務在您的控制器

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

注：包括應用ngResource。JS angular.module

更新：使用服務在其他模塊定義你需要注入模塊

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

來源

2015-09-04 18:00:52 maddygoround

但是爲什麼把所有這些放在同一個模塊中呢？分裂東西不是更好嗎？所以你可以在控制器中注入所需的模塊？ – Mivaweb

沒有辦法更好的方法。你把我們的服務保存在一個單獨的文件中，這就夠了。 – maddygoround

因此，如果只有'invoiceController'出現在html頁面中，它將只適用於此，並且不會對其他模塊和服務執行任何操作？ – Mivaweb

InvoiceController是skycountApp模塊的一部分。它與它相結合，並將invoiceService放入單獨的模塊沒有多大意義。這樣做

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

只有invoiceService被列爲該模塊的依賴性意味着，現在的模塊可以訪問它的組件。 Invoices當InvoiceController未使用時，服務不會被注入並且不會導致任何開銷。

如果發票和客戶組件很少被同一用戶使用，則可以將invoiceService和InvoiceController作爲發票模塊的一部分，並僅在需要時才使用它（將此模塊視爲單獨的應用程序）。但最終你會發現所有的js文件都必須爲了性能而被構建到單個包中。

來源

2015-09-04 18:25:14 estus

AngularJS中的獨立控制器和工廠模塊

回答

相關問題