在angularjs中組織控制器和模塊？

望着AngularJS's docs - 我看到了常規的（我知道）模式來聲明控制器：（支持微小）在angularjs中組織控制器和模塊？

var phonecatApp = angular.module('phonecatApp', []); 
    phonecatApp.controller('PhoneListCtrl', ['$scope', '$http', 
     function ($scope, $http) { 
     ... 
     }]);

但later on - they changed it to：

<script src="js/app.js"></script> 
    <script src="js/controllers.js"></script>

凡app.js：

var phonecatApp = angular.module('phonecatApp', [ 
    'ngRoute', 
    'phonecatControllers' 
]);

個

而且controllers.js：

var phonecatControllers = angular.module('phonecatControllers', []); 

phonecatControllers.controller('PhoneListCtrl', ['$scope', '$http', 
    function($scope, $http) { 
    ... 
    }]);

問題

1）什麼在第一段代碼錯模塊化？我沒看到問題。我有一個應用程序，我附上控制器，就是這樣。我從第二個代碼中獲得什麼好處？ 真實場景將不勝感激。

2）在第二個代碼 - app.js怎麼處理phonecatControllers其中phonecatControllers不在頁面上。（這是js之後加載）。

來源

2014-09-22 Royi Namir

我不認爲有什麼不對兩個例子。但無論哪種情況，我都不明白爲什麼你想要一個全局變量來跟蹤應用程序（或第二個示例中的控制器）。第二個例子允許您將控制器組織到自己的模塊中，將服務組織到自己的模塊中，然後將它們注入到主模塊中。它使您的控制器和服務，無論我想更便攜。 – Ian 2014-09-22 20:48:50

至於現實生活場景，我喜歡將每個**控制器的代碼放入單獨的文件中（並且稍後將其捆綁/縮小）。我不想要一個全局變量（或變量）只是爲了聲明組件而浮動。因此，我聲明組件組 - 'angular.module（「testApp.controllers」，[]）;'，聲明主模塊 - 'angular.module（「testApp」，[ 「testApp.controllers」]）;'，然後向每個組添加組件 - 'angular.module（「testApp.controllers」）.controller（「TestCtrl」，function（）{}）;'（每個都有自己的文件）。我確信有更詳細的原因，但我爲組織做到這一點 – Ian 2014-09-22 20:52:15

代碼的第一件作品是在我看來，事實上更好，角是在暗示反正走那條路：

https://docs.google.com/document/d/1XXMvReO8-Awi1EZXAXS4PzDzdNvV6pGcuaF4Q9821Es/pub

這種做法是模塊化的代碼很大。我的應用程序通常設置爲：

modules 
    |--home 
     home-controller.js 
     home.js 
     home-service.js 
     home.html 
    |--user 
     user-controller.js 
     user.js 
     user-service.js 
     user.html

，使得屬於某一模塊的所有代碼是在自己的文件，包含在目錄中。以這種方式組織事情變得容易得多。

下面是一個典型的模塊文件（即高於home.js）將是什麼樣子（例如使用require.js）：

define(function(require) { 

    var angular = require("angular"); 
    var homeController = require("modules/home/home-controller"); 
    var homeService = require("modules/home/home-service"); 

    var homeModule = angular.module("Home", []); 
    homeModule.controller("HomeCtrl", homeController); 
    homeModule.service("HomeService", homeService); 

    return homeModule; 
});

這種方法的好處是，我看到他們：

保持代碼乾淨地組織到目錄中，這樣如果我正在處理主頁功能，我不需要在應用程序中反彈尋找我的文件。
保持包含在自己的文件中的代碼，所以我沒有與所有的控制器代碼一個龐大的「控制器」文件
讓我簡單地涅槃/包裝目錄很容易捆紮模塊。然後，我可以在需要它們的其他應用程序/系統中重用這些模塊。
在單元測試時，我可以簡單地加載這些模塊中的一個，並且我有效地將我的測試隔離到該模塊。使用另一種方法，如果我加載了「控制器」模塊，我正在爲我的測試加載所有控制器代碼，這是一種浪費。這樣做不僅可以實現很好的代碼隔離，還可以加速我的測試，因爲我只加載了我需要運行測試的東西。

要回答第二個問題，app.js是Angular應用程序的主要模塊。在Angular中，您將其他模塊作爲依賴項添加到您的主應用程序中，因此在您的示例中，phoneCatControllers模塊將作爲主應用程序的依賴項添加。實際的controllers.js文件或者通過<script>標籤加載，或者通過某種類型的AMD/CommonJS加載加載。然後，一旦它被加載，你就會獲取模塊的名稱並將它作爲依賴添加到你的主應用程序模塊中。

在第二個示例中，模塊按類型分組，所有控制器都添加到一個模塊，所有服務都添加到另一個模塊。由於我上面提到的原因，這是不好的。它導致你的應用程序的功能遍佈各處，很難找到。當你只想測試其中的一個時，它也需要你加載所有的控制器。

隨着第一個例子（和谷歌/角的當前形式的建議），你按功能而不是按文件類型，即用戶目錄或主目錄，而不是一個控制器，目錄或服務目錄分組。

之所以phoneCatControllers能夠作爲一個模塊依賴於被引用是由於角白手起家的應用程序的方式。在onDOMContentLoaded期間評估ng-app指令，因此一旦所有腳本都被加載完畢。如果您使用諸如RequireJS之類的東西，則可以手動引導應用程序，但在您的示例中，所有腳本都已加載，然後Angular引導應用程序。

點擊此處瞭解詳情：

https://docs.angularjs.org/guide/bootstrap

來源

2014-09-22 20:56:08 sma

模塊化，homeModule看起來在哪裏/怎樣？ – 2014-09-22 21:09:29

我的錯誤。我在創建模塊的地方省略了一行。從我的手機編輯我的答案，所以沒有格式化。請稍後修復它 – sma 2014-09-22 21:13:20

你能看看我的第二個問題嗎？ – 2014-09-23 13:05:14

這是教程中的常見事情。首先，他們使用一個小例子，其中有一個模塊，並且有一個控制器。兩者之間的關係是一對一的。不過，我認爲角度文檔願意讓你準備接受模塊化。

也許在這個例子中很難看出，因爲沒有太多的事情要做，但是當你添加工廠和服務以及多個控制器時，爲了保持清晰和減少混亂，建議分離你的代碼。

來源

2014-09-22 20:54:23

這不是IMO的答案。第一個示例在您的代碼中也以其自己的方式 – 2014-09-22 20:56:05

在angularjs中組織控制器和模塊？

回答

相關問題