AngularJS文件夹结构

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

按类型排序

左侧是按类型组织的应用程序。对于较小的应用程序来说还不错，但是即使在这里，您也可以开始发现查找所需的内容变得更加困难。当我想找到一个特定的视图及其控制器时，它们位于不同的文件夹中。如果您不确定如何组织代码，则可以从这里开始，这很容易，因为很容易转移到右边的技术：按功能构造。

按功能排序（首选）

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

一篇写得不错的博客文章：http : //www.johnpapa.net/angular-growth-structure/

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

在构建了一些应用程序（一些在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

在咕gr的构建（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)

我喜欢这个约angularjs结构进入

它是由一名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
    └── ...

还有一种方法不是根据框架的结构而是根据应用程序功能的结构来组织文件夹。有一个github入门Angular / Express应用程序，说明了这个称为angular-app的情况。

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

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

我发现单个应用程序很好。我还没有真正需要多个项目的项目。