Angular.js將控制器組織到App命名空間中

Question

我開始在一個新項目中使用Angular.js，從基本教程中，我看到的主要是一個包含所有控制器函數的controllers.js文件，每個函數都綁定到window對象。

似乎更好的做法是使用現有的“myApp”命名空間來添加控制器，例如：

myApp.controllers = {};
myApp.controllers.userItem = function($scope) {}

所有控制器都將是創建的“myApp.controllers”對象或“window.myApp.controllers”的一部分。

有沒有人建議更好或更有條理的方式來處理控制器或其他項目，自定義服務，指令等將使用相同的結構。

除此之外，我正在討論將每個控制器放入它自己的文件中，最終將它們合並用於生產，但是根據應用程序的大小，它可能有點過度，只會導致更多的工作在文件之間反彈。

任何建議將不勝感激。

謝謝！

Answer 1

好問題！

我不喜歡教程和文檔對其代碼采用“逐層”方法。 我認為這可能是為了方便教學概念，這很好，但這種方法在現實世界中的適用性有限。

逐個功能是一個更好的方法：

|- README
|- src/
   |- app/
      |- app.js
      |- feature1/
      |- feature2/
      |- ...
   |- vendor/
      |- angular/
      |- bootstrap/
      |- ...
   |- assets/
   |- less/
   |- index.html

在src/app內部，您可以根據您正在處理的網站部分（例如菜單）和路線（例如產品列表和產品詳細信息）打包您的內容。 每個都可以這樣聲明：

angular.module( 'products', [
  'productCatalog',
  ...
])

每個模塊都有自己的路由：

.config( [ '$routeProvider', function( $routeProvider ) {
  $routeProvider.when( '/products', { ... } );
  $routeProvider.when( '/products/:id', { ... } );
});

和控制器等：

.controller( 'ProductListCtrl', [ '$scope', function ( $scope ) { ... } ]);

因此，一起使用的所有內容都打包在同一目錄中。 您可以將所有組件放在單獨的文件中，每個文件只有一個模塊（如果您願意，我通常會這樣做）。 在您的頂級應用程序中，您只需聲明您的依賴項：

angular.module( 'app', [
  'products',
  ...
]);

您也可以自己捆綁通用指令，以便將測試和文檔整合在一起 - 再次，按功能！ 並且這些組件中的每一個都可以在將來的項目中進行拖放重復使用。

一個很棒的參考實現是angular-app 。 看看這個！

更新：從這個答案開始，我啟動了一個名為ngBoilerplate的AngularJS項目kickstarter /模板來封裝這些概念（在許多其他最佳實踐中）和一個復雜的構建系統來支持它們。

Answer 2

我經常這樣做

(angular
 .module('app.controllers', ['ng', ...])
 .controller('myContrA', [
     /******/ '$scope',
     function ($scope) {
     }
 ])
 .controller('myContrB', [
     /******/ '$scope',
     function ($scope) {
     }
 ])
);

這樣，您可以將app.controllers添加為依賴項，從而使所有控制器都可用。