AngularJS文件夹结构

Question

AngularJS文件夹结构

angularjs

187

如何为一个大型可扩展的AngularJS应用程序设计文件夹结构？

- Michael J. Calkins

一个建议：https://github.com/jofftiquez/angular-app-starter-pack - jofftiquez

5个回答

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等）之后：

    /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)

- Urigo

1

路由代码块的配置应该放在哪里？angular.module('myApp').config(function($routeProvider) { ... }); - sports

1

+1 此外，您可以自定义 Yeoman 放置文件的位置。在大型应用程序中按功能/模块进行排序更好，因为您可以更轻松地在其他应用程序中重复使用功能。 - Tivie

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

- Chris

1

这个问题涉及文件夹结构，虽然链接在其他方面很有趣，但对于这个问题并没有带来任何新的东西。 - JohnC

这是由Yeoman Angular生成器使用的。 - EdgarT

所以，你已经按照脚本类型组织了文件夹。 - Tudor

4

还有一种方法是根据应用程序的功能结构而不是框架的结构来组织文件夹。有一个名为angular-app的Github起始Angular/Express应用程序可以说明这一点。

- BoxerBucks

这通常是处理非常大型项目的更好方法。不幸的是，我们仍然被困在文件夹结构中...标记会更好，这样就不会那么重要，我们可以根据标记拥有多个视图。 - Christophe Roussy

3

我已经做了三个AngularJS应用程序，到目前为止，文件夹结构有所改善。目前我保持我的结构简单。

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

我觉得这对于单个应用程序很好。目前还没有遇到需要使用多个应用程序的项目。

- Ronnie

以后在维护和引入新功能时会遇到问题。将具有与该功能相关的特性和组件的文件夹结构放在其文件夹下始终是一个好的实践。 - Jaseem Abbas

我想问一下，Angular JS 没有像 asp.net Web 项目或 Windows 桌面应用程序这样的标准项目文件夹结构或项目模板对吗？ - user3393933

1

@dotNetBlackBelt，没错。在使用Angular方面，没有标准可言。自从发布这个帖子以来，我对文件夹的设置进行了一些更改。在我上一个项目中，我基本上按照这个原帖的最佳答案进行操作。 - Ronnie

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael J. Calkins · Accepted Answer

按类型排序

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

按功能排序（首选）

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

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

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