Question

我们有一个相当大的angularJS应用程序，其中所有控制器都在一个文件中。

我们正在考虑将每个控制器拆分为相应的文件。有什么理由不去做吗？

我们想要拆分它的原因是由于更容易管理文件中的源代码控制/更改，显然更直观。

请告知。

Answer 1

在我看来，构建大型 AngularJS应用程序的最佳方法是按照Peter Bacon Darwin和Pawel Kozlowski在他们的“Mastering Web”一书中提出的 by feature 使用AngularJS进行应用程序开发“。

而不是AngularJS种子项目推荐的结构（以及许多其他像Yeoman的生成器角度），“技术驱动的”意味着每个元素类型，如控制器，部分/视图等。在其自己的文件夹中，您应该使用“域驱动的”结构，反映代码中的业务域。

它有许多优点，如：

使代码的所有权明确且清晰，
介绍了在所有模块中共享的无处不在的语言，
授权（在某种程度上）与业务分析师直接沟通，
消除了潜在的冲突，因为合并等需求较低。

这里是上述书中提出的结构的一个例子（只是为了澄清这个想法）：

项目中的顶级目录：

- 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

在 app 文件夹（域驱动）中，例如Web的店：

- shop
  - products
  - customers
  - orders
    - orderlists
    - orderdetails
    - ... etc.
- admin
  - users
  - ... etc.

每个文件夹都包含所有相关代码，包括部分代码，脚本等。

Answer 2

来自an article by Brian Ford：

对于大型应用程序来说，最大的问题可能是放在哪里   那段代码。在组织工具的工具上，你有文件，   目录，模块，服务和控制器。快速浏览   良好的AngularJS项目结构，请查看Angular Seed   Github上。但是我想更深入一些，并提供一些   关于项目结构的其他建议。让我们从目录开始吧   按照我们的方式行事。

例如，您的文件结构可以是这样的：
project/
       app.js
       controllers/ #your controllers files here
       views/  #your templates here
       services/  #your services files
       directives/ #your custom directives
每个文件中都应包含一个“东西”，其中“东西”是一个控制器，指令，过滤器或服务。这个很小，重点文件。它还有助于为API如何创建一个试金石这样做。如果你发现自己也在文件中来回翻转经常，这表明您的API太复杂了。您应该重新思考，重构和简化。

查看文章了解更多详情。

Answer 3

有很多不同的方法可以构建您的应用程序，几乎没有对错。所以不，没有理由不去做它看起来有意义。

我个人决定根据我的经验使用以下结构给你一个例子：

我使用Angular Seed Project的目录结构：

app / js - ＆gt;包含所有动态js脚本
app / lib / angular114 - ＆gt;包含当前的angularjs版本（我可以使用多个版本进行测试）
app / lib / mycompany - ＆gt;包含我保存在单独存储库中的所有公司/个人可重用库
app / partials - ＆gt;包含我根据app / js中的js文件结构分配给子目录的所有html部分。如果我有一个user.js，那么我有一个用户目录。

拥有自由人

在我自己的lib / mycompany库中，我为所有文件添加前缀，并在方法名称前加上我公司的前缀。如果我的公司被称为东亚有限公司，那么我会创建一个名为＆＃34; ea＆＃34;的双字母前缀。这将防止与我的动态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
    }]);    
})();

我将所有内容分组到逻辑模块中，例如：

验证模块
全局错误处理模块
身份验证/授权模块
...

验证模块例如包含指令，控制器，服务等。我区分逻辑实体，而不是区分控制器，指令等。我觉得这个结构更有效率，因为当我想要更改例如与验证相关的东西时，我知道它在我的验证模块中。

您可以在此处找到示例：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';
}]);

然后我只是将文件挂钩到主index.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目录。

我发现这种结构到目前为止效率最高。

另一种方法

你也可以使用YeoMan为你的结构做很多事情。然而它确实添加了很多依赖项，当我尝试使用它时，我在安装过程中遇到了依赖性冲突的一些问题。我个人的经验法则是，如果我在一天之内无法工作，我就会离开它，因为我会浪费时间花在代码上。我自己设定的另一个经验法则是，如果有一个带有依赖关系的框架，这些框架是由具有不同目标的个人开发的，我尽可能避免使用它。请注意，这些是我自己设定的个人规则，可能不是其他人的正确策略。出于这些原因，我决定不使用它。但似乎已有一个相当大的社区。

<强>生产

出于生产目的，您可以使用UglyfyJS或Google Closure Compiler创建一个压缩的js文件，其中所有代码或每个文件都是单独压缩的。

我希望这个描述对你有用。

构造AngularJS应用程序

3 个答案: