AngularJS文件夹结构

Question

如何为大型可扩展的AngularJS应用程序布局文件夹结构？

Answer 1

按类型排序

在左侧，我们按应用类型组织了应用。对于较小的应用程序来说并不算太糟糕，但即使在这里你也可以开始发现找到你想要的东西变得更加困难。当我想要查找特定视图及其控制器时，它们位于不同的文件夹中。如果您不确定如何组织代码，可以从这里开始，因为很容易转换到右侧的技术：按功能结构。

按功能排序（首选）

在右侧，项目按功能组织。所有布局视图和控制器都放在布局文件夹中，管理员内容放在admin文件夹中，所有区域使用的服务都放在services文件夹中。这里的想法是，当您在寻找使功能有效的代码时，它位于一个地方。服务有点不同，因为它们“服务”了许多功能。一旦我的应用程序开始成型，我喜欢这个，因为它对我来说变得更容易管理。

写得很好的博文：http://www.johnpapa.net/angular-growth-structure/

示例应用：https://github.com/angular-app/angular-app

Answer 2

在构建一些应用程序之后，一些在Symfony-PHP，一些.NET MVC，一些ROR中，我发现对我来说最好的方法是使用Yeoman.io和AngularJS生成器。

这是最受欢迎和最常见的结构，维护得最好。

最重要的是，通过保留该结构，它可以帮助您分离客户端代码并使其与服务器端技术（各种不同的文件夹结构和不同的服务器端模板引擎）无关。

通过这种方式，您可以轻松复制和重复使用您的代码和其他代码。

这是在grunt构建之前:(但是使用yeoman生成器，不要只创建它！）

/app
    /scripts
            /controllers
            /directives
            /services
            /filters
            app.js
    /views
    /styles
    /img
    /bower_components
    index.html
bower.json

在grunt构建之后（concat，uglify，rev等等）：

    /scripts
        scripts.min.js (all JS concatenated, minified and grunt-rev)
        vendor.min.js  (all bower components concatenated, minified and grunt-rev)
    /views
    /styles
        mergedAndMinified.css  (grunt-cssmin)
    /images
    index.html  (grunt-htmlmin)

Answer 3

我喜欢关于angularjs结构的this条目

它是由一个angularjs开发人员编写的，所以应该给你一个很好的洞察力

以下是摘录：

root-app-folder
├── index.html
├── scripts
│   ├── controllers
│   │   └── main.js
│   │   └── ...
│   ├── directives
│   │   └── myDirective.js
│   │   └── ...
│   ├── filters
│   │   └── myFilter.js
│   │   └── ...
│   ├── services
│   │   └── myService.js
│   │   └── ...
│   ├── vendor
│   │   ├── angular.js
│   │   ├── angular.min.js
│   │   ├── es5-shim.min.js
│   │   └── json3.min.js
│   └── app.js
├── styles
│   └── ...
└── views
    ├── main.html
    └── ...

Answer 4

还有一种组织文件夹的方法不是通过框架的结构，而是通过应用程序的功能结构。有一个github启动器Angular / Express应用程序，它说明了这个名为angular-app。

Answer 5

我正在使用我的第三个angularjs应用程序，文件夹结构到目前为止每次都有所改进。我现在保持简单。

index.html (or .php)
/resources
  /css
  /fonts
  /images
  /js
    /controllers
    /directives
    /filters
    /services
  /partials (views)

我觉得单个应用程序很好用。我还没有一个项目，但我需要多个项目。