1
我們有一個相當大的angularJS應用程序，其中所有控制器都在一個文件中。構造AngularJS應用程序
我們正在考慮將每個控制器拆分爲相應的文件。有什麼理由不這樣做？
我們想拆分它的原因是由於更容易管理源文件控制/文件中的更改，顯然，更直觀。
請指教。
A
回答
2
可能與大型應用的最大的問題就是把所有的 代碼。在組織工具的工具欄上，您已經有文件，目錄，模塊，服務和控制器。有關良好的AngularJS項目結構的快速概覽 ，請查看Github上的 的Angular Seed。不過，我想深入一點，並提供一些關於項目結構的其他建議。讓我們從目錄 開始，並按照我們的方式向下列表。
例如你的文件結構可以是這樣的：
project/ app.js controllers/ #your controllers files here views/ #your templates here services/ #your services files directives/ #your custom directives每個文件應該有它的「東西」，其中一個「東西」是一個 控制器，指令，過濾或服務。這使得很小， 專注的文件。它還有助於創建一個測試API以便如何執行 。如果您發現自己經常在文件中翻來覆去，則表明您的API過於複雜。你應該重新思考，重構和簡化。
檢查文章的更多細節。
1
有很多不同的方式可以構建你的應用程序，幾乎沒有對與錯。所以不，沒有理由不這樣做，它看起來很有意義。
我親自決定用下面根據我的經驗給你一個例子結構：
我用角種子項目的目錄結構：
- 應用程序/ JS - >包含所有動態JS腳本
- 應用程序/ lib目錄/ angular114 - >包含當前angularjs版本（我可以使用多個版本用於測試目的這樣）
- 應用程序/ lib目錄/ myCompany中 - >包含我所有的企業/個人可重用庫日在我保存在一個單獨的版本庫中
- app/partials - >包含我根據app/js中的js文件結構劃分的子目錄中的所有html partials。如果我有一個user.js，那麼我有一個用戶目錄。
自己利布斯
在位於在LIB/myCompany的我前綴的所有文件，並方法名稱與我公司前綴我自己的圖書館。如果我的公司將被稱爲東亞有限公司，那麼我會創建一個名爲「ea」的雙字母前綴。這將防止名稱與我的動態js腳本發生衝突，因爲控制器和服務的名稱可以通過我的應用程序公開獲得。
LIB/EA/EA-validators.js
(function() {
'use strict'
angular.module('eaValidators', [])
.directive('eaValidateUnique', [function() {
// directive code goes here
}])
.directive('eaValidateId', [function() {
// code goes here
}])
.controller('MyCtrlJustAsExample', ['$scope', function($scope) {
// code goes here
}]);
})();
I組中的一切向邏輯模塊，例如：
- 驗證模塊
- 全球錯誤處置模塊
- 認證/授權模塊
- ...
驗證模塊例如包含指令，控制器，服務等。我區分邏輯實體而不是區分控制器，指令等等。我發現這個結構更高效，因爲當我想改變例如與驗證有關的東西時，我知道它在我的驗證模塊中。
你可以在這裏找到例子：http://chstrongjavablog.blogspot.ch/
動態內容
我有我的動態JS文件一個類似的做法。如果我有例如用戶頁面和供應商的網頁我想顯示，然後我在JS目錄中創建以下文件：
- user.js的
- vendor.js
同樣，這些文件可以在模塊下分組的同一文件中包含指令，控制器和服務。所以如果我需要改變一些與用戶相關的東西，我馬上就會知道user.js中的代碼。
樣本user.js的可以看看以下幾點：
JS/user.js的
angular.module('user', ['ngResource'])
.controller('UserListCtrl', ['$scope', 'User', function($scope, User) {
// code goes here
}])
.controller('UserNewCtrl', ['$scope', 'User', function($scope, User) {
// code goes here
}])
.factory('User', ['$resource', function($resource) {
return $resource('/api/user/:userId', {userId: '@id'});
}]);
膠水它一起
的js/app.js
然後我使用js/app.js來粘合一切一起做路由：
angular.module('myApp', ['eaValidators', 'vendor', 'user'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/user', {templateUrl: 'partials/user/user-list.html', controller: 'UserListCtrl'});
$routeProvider.when('/user/new', {templateUrl: 'partials/user/user-new.html', controller: 'UserNewCtrl'});
$routeProvider.otherwise({redirectTo: '/user'});
}])
.config(['$httpProvider', function ($httpProvider) {
$httpProvider.defaults.headers.common['Content-Type'] = 'application/json';
$httpProvider.defaults.headers.common['Accept'] = 'application/json';
}]);
然後我只是鉤住主索引內的文件。HTML文件：
的index.html
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>YourApp</title>
<link rel="stylesheet" href="css/app.css"/>
<link rel="stylesheet" href="css/style.css"/>
<link rel="stylesheet" href="css/ea-validators.css"/>
</head>
<body>
<!-- Display partial pages -->
<div ng-view></div>
<!-- Include all the js files. In production use min.js should be used -->
<script src="lib/jquery203/jquery-2.0.3.js"></script>
<script src="lib/angular114/angular.js"></script>
<script src="lib/angular114/angular-resource.js"></script>
<script src="lib/ea/ea-validators.js"></script>
<script src="js/app.js"></script>
<script src="js/user.js"></script>
<script src="js/vendor.js"></script>
</body>
</html>
這種結構的好處是，我可以在user.js的和用戶諧音拷貝過來例如到另一個項目和再利用大部分碼。
此外，我有我的全局驗證處理程序，錯誤處理程序，身份驗證處理程序，我可以檢查從我的存儲庫到lib目錄。
我發現這個結構是迄今爲止效率最高的。
另一種方法
你也可以使用自耕農，做了很多關於結構爲您服務。然而，它確實增加了很多依賴關係，當我嘗試使用它時，我在安裝過程中發現了一些依賴衝突的問題。我個人的經驗法則是，如果我在1天內無法工作，我就會放棄手中的工作，因爲我會花時間花費在代碼上。我自己設定的另一個經驗法則是，如果有一個由不同目標的個體開發的依賴關係修補的框架，我會盡量避免它。請注意，這些是我自己制定的個人規則，可能不適合其他人使用。出於這些原因，我決定不使用它。但似乎已經有一個相當大的社區。
生產
用於生產目的時，你可以再使用UglyfyJS或谷歌關閉編譯器創建一個壓縮的js文件的所有代碼或seperatly壓縮每個文件。
我希望這個描述對你有用。
4
在我看來，以構建一個大 AngularJS應用的最佳方式是通過功能做在他們的書「精通Web應用程序開發與AngularJS」提出，由彼得·培根達爾文和帕維爾·科茲洛夫斯基。
代替由AngularJS種子項目推薦的結構的（和許多其它類似的約曼的發生器 - 角），其是「技術上驅動」是指如控制器，諧音/視圖等的每個元素類型在其自己的文件夾的土地，您應該使用「域驅動的」結構，其中反映了您的代碼中的業務域。
它具有很多優點，如：
- 使得代碼明確和清晰的所有權，
- 引入了在所有模塊共享通用語言，
- 如虎添翼（在一定程度上）直接通信與業務分析師
- 消除潛在的衝突，因爲合併等需求較低
下面的例子（只是爲了澄清的想法）的結構中，如上面提到的書中提出：在項目
頂級目錄：
- src: contains application source code
- test: contains accompanying automated tests
- vendor: contains third party dependencies
- build: contains build scripts
- dist: contains build results, ready to be deployed in a target environment
裏面的SRC文件夾（固定）：
- app: AngularJS-specific code, domain-driven
- common: AngularJS-specific code, boiler-plate
- assets: holds images and icons,
- less: LESS variables
- index.html - entry point to the application
裏面應用文件夾（域驅動）例如網絡店鋪：
- shop
- products
- customers
- orders
- orderlists
- orderdetails
- ... etc.
- admin
- users
- ... etc.
每個文件夾包含所有相關的代碼，包括諧音，腳本等
相關問題
- 1. 構造Django應用程序
- 2. SPA的應用程序結構 - AngularJS
- 3. 結構我的angularjs應用程序
- 4. 瞭解Spring的應用程序構造
- 5. 如何構造angular.js應用程序
- 6. Google應用程序製造商架構
- 7. AngularJS應用程序不叫
- 8. 包裝AngularJs應用程序
- 9. Gradle for AngularJS應用程序
- 10. AngularJS測驗應用程序
- 11. AngularJS Web應用程序
- 12. AngularJS - 應用程序的Controler
- 13. 構造函數super（）es6 angularjs
- 14. 構造動態變量 - AngularJS
- 15. 如何使用Storyboard爲SplitView iPad應用程序構造ViewControllers？
- 16. 使用多個模塊構造Silverlight應用程序
- 17. 將應用程序類引用傳遞給構造函數（Java）
- 18. 如何使用twisted來構造這個應用程序？
- 19. 通過使用jQuery構造應用程序
- 20. 用模型構造一個流星應用程序
- 21. 未被調用的Android應用程序子類構造函數
- 22. 應用程序掛起調用DefaultCellEditor的構造函數
- 23. 程序調用默認構造函數？
- 24. 試圖構建一個JavaFX應用程序...應用程序構造函數中的異常
- 25. E2E測試遠程AngularJS應用程序
- 26. RabbitMQ與AngularJS/.NET Web API應用程序的架構
- 27. AngularJS單頁應用程序體系結構
- 28. 多頁Angularjs應用程序體系結構
- 29. 如何將AngularJS應用程序轉換爲android應用程序
- 30. AngularJS應用程序MVC4捆綁剎車應用程序
您的鏈接在這裏不起作用。還有一些說明，爲什麼*你建議你做什麼會很好。編輯，鏈接現在可以運行。 – Matsemann
@Matsemann是的澄清是在我後面提到的。 – Mounir
這對我來說看起來很不錯。 @或者 - 你應該考慮接受它或發表一些你覺得缺乏的評論。 – hughesdan