186

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

4

5 回答 5

251

在此处输入图像描述

按类型排序

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

按功能排序（首选）

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

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

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

于 2013-08-30T22:28:32.487 回答
32

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

这是最流行和最常见的结构，并且维护得最好。

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

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

这是在 grunt build 之前：（但使用 yeoman 生成器，不要只创建它！）

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

在 grunt build (concat, uglify, rev, etc...) 之后：

    /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)
于 2013-08-31T00:08:27.613 回答
30

我喜欢这个关于 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
    └── ...
于 2013-08-31T00:27:49.823 回答
4

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

于 2013-08-30T23:00:23.820 回答
3

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

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

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

于 2013-08-30T22:55:36.807 回答