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