AngularJS 文件夹结构

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

144397 次浏览
小开
最佳答案

enter image description here

按类型排序

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

按特征排序(首选)

右边的项目是按特征组织的。所有布局视图和控制器都放在布局文件夹中，管理内容放在管理文件夹中，所有区域使用的服务放在服务文件夹中。这里的想法是，当您正在寻找使特性工作的代码时，它位于一个位置。服务有点不同，因为它们“服务”许多特性。我喜欢这个一旦我的应用程序开始成形，因为它变得更容易为我管理。

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

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

小开

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

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

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

小开

还有一种组织文件夹的方法，不是根据框架的结构，而是根据应用程序功能的结构。有一个 github starter Angular/Express 应用程序说明了这一点，称为 角度应用程序。

小开

在构建了一些应用程序之后，有些使用 Symfony-PHP，有些使用。NET MVC，一些 ROR，我发现对我来说最好的方式是使用与 AngularJS 生成器 文书。

这是最流行、最常见、维护最好的结构。

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

这样，您可以轻松地复制和重用您和其他人的代码。

下面是在重复构建之前的内容: (但是使用约曼生成器，不要只是创建它!)

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

并在咕哝建立(连接，丑化，转速等) :

    /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
└── ...

提交答案