【问题标题】：Structuring a Node.js and AngularJS application构建 Node.js 和 AngularJS 应用程序
【发布时间】：2012-12-09 13:04:12
【问题描述】：

我即将尝试我的第一个 AngularJS 项目，使用 Node.js 作为后端是有意义的，即使这意味着同时从头开始学习 AngularJS 和 Node.js。

我想了解的第一件事是良好的文件结构。到目前为止，我的纯 HTML/CSS 模板具有以下目录结构...

_site/
Fonts/
Javascript/
SASS/
Stylesheets/
Index.html

（_site 是 PSD 等的工作目录）

我找到了一个 Node.js/AngularJS 应用程序的示例目录结构 here....

... 建议以下目录结构。

app.js              --> Application configuration
package.json        --> For npm
public/             --> All of the files to be used in on the client side
  css/              --> CSS files
    app.css         --> Default stylesheet
  img/              --> Image files
  js/               --> JavaScript files
    app.js          --> Declare top-level application module
    controllers.js  --> Application controllers
    directives.js   --> Custom AngularJS directives
    filters.js      --> Custom AngularJS  filters
    services.js     --> Custom AngularJS services
    lib/            --> AngularJS  and third-party JavaScript libraries
      angular/
        angular.js            --> The latest AngularJS
        angular.min.js        --> The latest minified AngularJS
        angular-*.js          --> AngularJS add-on modules
        version.txt           --> Version number
routes/
  api.js            --> Route for serving JSON
  index.js          --> Route for serving HTML pages and partials
views/
  index.jade        --> Main page for the application
  layout.jade       --> Doctype, title, head boilerplate
  partials/         --> AngularJS view partials (partial jade templates)
    partial1.jade
    partial2.jade

所以，这对我来说看起来相当不错（除了我不会使用 Jade）。

我还有以下问题...

我想将所有前端和后端文件分开。此解决方案将所有前端文件放在 public/ 目录中，这很有意义，因为大多数文件都需要公开，但是将 SASS 和 _site 文件夹放在这里有意义吗？我可以将它们保留在那里，但在将它们投入生产时不上传它们，但这似乎是错误的，因为它们不应该公开。它们也不属于所有后端内容的根级别。
从CDN加载AngularJS不是更好吗？
鉴于服务器只需要交付一个模板（主应用程序模板）并且所有其他 HTML 都将在前端构建，保持 index.html 文件静态不是更有意义吗，删除views文件夹并像原来的AngularJS Seed应用一样在public/下创建一个partials/文件夹？

我意识到这完全是一个见仁见智的问题，从技术上讲，我可以将它们放在任何我想要的地方，但我希望比我更有经验的人能告诉我各种目录结构的缺陷。

【问题讨论】：

您可能会发现此链接很有用Angular Project Structure

标签： javascript angularjs node.js

【解决方案1】：

1) 公开saas/less 文件通常是有意义的，因为您可能希望在调试时使用客户端的less->css 转换（less.js 会这样做）。不确定你的 _site 包含什么（顺便说一句，你应该为你的项目使用小写文件夹，尤其是公共的东西）。

2) 通常在生产环境中从 Google CDN 加载 AngularJS 是一种很好的做法，仅使用本地版本进行开发，根据您的环境，您可以有两个单独的布局。

3) 即使客户端渲染是要走的路，您也可以保留服务器端布局/视图渲染，您可能会在某些时候需要它（管理员访问、电子邮件渲染等）。但是，在公共文件夹中使用来自 AngularJS 的 partials 名称可能会有所帮助，这有助于避免服务器端 views 和客户端 partials 之间的混淆。

你应该明确地去做目前看起来最合乎逻辑的事情，随着你对 express 的熟悉，你可能会四处走动。

您应该检查现有的 express 框架以了解它们如何构建应用程序。例如，TowerJS 有一个非常干净的 config 文件夹，但是它们混淆了我个人不喜欢的服务器端和客户端代码。

查看NodeJS MVC frameworks 的比较，看看其他人是如何做事的。但是，我显然会从 vanilla express 代码开始，以便在过度提交任何这些框架之前完全控制并了解事情是如何工作的。

【讨论】：

#2 让我很惊讶。你真的推荐一个 CDN for prod 吗？为什么？
因为 CDN 托管资源的加载速度更快（主机的地理分布）并且很有可能已经被您的浏览器缓存（因此响应即时 304 Not Modified），因为有很多其他已经使用它们的网站。您仍然应该构建自己的代码的单个 js 文件（不包括 cdn-libs）
哇。很好学。好总结。更多信息：stackoverflow.com/questions/2180391/… 和 stackoverflow.com/questions/547384/…
如何根据环境创建“单独的布局”？任何人都知道证明这一点的项目吗？这也是在开发中调试 .js 文件但在生产中提供 .min.js 文件的主要优势吗？
我质疑 CDN 托管资源更快。生产 web 应用程序通常会将所有供应商文件连接到一个文件中。因此，客户端只需执行一个 http 请求即可获取所有供应商 js 文件。托管的 JS 文件需要每个文件一个 http 请求 - 是否缓存，它们将比您的一个文件花费更多的时间。

【解决方案2】：

正如建议的那样，这主要取决于个人喜好以及适合您当时正在从事的项目的方法。与您交谈的每个人都会有不同的想法，每个项目都有自己的设计 - 对一个人有用的东西可能对另一个人不起作用。我希望您会尝试多种不同的结构，并且很快就会找到一种最舒适的结构 - 但这仍会随着时间的推移而发展。

我发现 Angular Seed 结构是最简洁的，但这也是个人喜好（不过，它是由 Angular 团队设计的。）

您也可以考虑查看Yeoman 以生成项目骨架。

Yeoman 是一套强大且自以为是的工具、库和可以帮助开发人员快速构建美观、引人入胜的工作流程网络应用程序。

它是一个用于引导和管理项目的好工具（类似于 Rails 的方式），并且会创建一个目录结构和框架文件供您构建。 Brian Ford 写了一封 excellent post 来介绍如何将 Yeoman 与 Angular 结合使用。

我还建议在他们的 YouTube 频道上观看 Angular 聚会录像。我最近在山景城参加了一个聚会，会上提出了这些问题。 Miško 推荐了 Angular Seed 和 Yeoman（至少作为一个很好的起点。）

回答您的个别问题：

任何在服务器端编译的文件都应保存在您的公用文件夹。我建议不要保留大师之类的东西 PSD、模型或任何其他不公开的文件公共文件夹中的消费（通过浏览器或用户）。
从如果您期望大量流量，请使用 CDN。没那么重要对于访问量较少的网站，但仍然是一个好主意。我会从在本地提供文件以进行初始开发。离开资产当您接近您的生活日期时进行优化。当这时间到了，您还需要正确设置缓存。例如，Yeoman 提供了一种对资产进行版本控制的好方法。这为您提供了长期缓存的优势，但允许您将文件更新推送给客户端。
如果您的索引文件不需要任何服务器端渲染，静态服务。我喜欢让我的后端与尽可能使用 Angular 应用程序进行后端。它有助于维持关注点分离；在开发客户端文件时，您不会完全需要考虑后端（Angular 非常适合。）

真的，你只需要玩一玩；尝试不同的事情，阅读博客文章，从其他人那里获得想法，提出问题（就像你在这里所做的那样，在 Angular Google+ 社区页面上），观看视频，如果可以的话，参加聚会——聚会真的很适合这个。

【讨论】：

约曼是def。要走的路。它也会为您创建代码结构（样板代码）。

【解决方案3】：

随着时间的推移，事情变得越来越容易。我已经将 Yeoman 用于 AngularJS 前端，它让生活变得更加轻松：http://yeoman.io/

选项 1，MEAN.io

MEAN 是一个很棒的首字母缩略词！我更喜欢 MEAN 堆栈目录结构。让我们使用约定俗成的人！只需使用来自mean.io 的目录结构。 MEAN 也很方便，因为它包含 Grunt、Bower 等所有好东西。

选项 2，Angular-seed + Express.js

我在 GitHub 上搜索了 Node.js/AngularJS 项目（可能还不够难），但没有看到任何非常适合起始目录结构的东西。因此，我将 Node.js Express.js（运行 Express.js from the command line，既不使用 EJS 也不使用 Jade/Pug）骨架与 angular-seed 项目（clone it from GitHub）合并。然后我搬了很多东西。这是我想出的：

developer - 只有开发人员才会使用的东西。不需要部署。
- config - 业力配置文件和其他。
- scripts - 开发者脚本（构建、测试和部署）
- test - e2e 和单元测试。
logs
node_modules - this Stack Overflow answer 建议将其放入 Git。 不过现在可能已经过时了。
public - 这几乎直接来自 angular-seed 应用程序文件夹。
- css、img、js、lib、partials - 非常明显、漂亮且简短。
routes - Node.js 路由。
server - 服务器端“shebang”Node.js 程序、守护进程、cron 程序等等。
server.js - 从 app.js 重命名只是为了更明显这是服务器端。

【讨论】：

这是我喜欢 Rails 的地方。约定是个好主意。
让我们把它作为 Nodeclipse Node.js 的向导。此模板的来源在哪里？
嗨@PaulVerest，我本身没有任何来源。我将 angular-seed 项目和一个基本的 express 生成的 node.js 项目合并在一起。 express 看这个页面：expressjs.com/guide.html，搜索Using express(1) to generate an app。对于角度，我下载了github.com/angular/angular-seed.git
我明白了，我希望有我们可以在 Nodeclipse 中用作模板的资源。我们已经有了 Express 向导，添加 Angular 仍需手动操作。
@BenTaliadoros - 你是对的。随着时间的推移，事情肯定发生了变化，npm 变得更好了。我链接了 SO 问题并编辑了我的答案。谢谢。

【解决方案4】：

我也在调查同样的事情。

我最初的想法是使用Express Generator 和Angular Seed。

然后我找到了一个更好的解决方案：

http://yeoman.io/
http://yeoman.io/generators/
（最流行的生成器之一） https://github.com/angular-fullstack/generator-angular-fullstack

最流行的 yeoman 生成器之一为您提供了 Node.js 和 AngularJS 应用程序的结构。

我相信标准化的力量，新加入该项目的人会欣赏统一的结构。

【讨论】：

与往常一样，在投反对票时 - 请提供反馈 - 在我的天真理解中 - 启动项目在这里是为了在代码结构方面实施最佳实践 - 我在这里缺少什么？

【解决方案5】：

我不同意之前的所有帖子。它们要么是从另一个地方粘贴的，要么没有自己的想法。根据我的经验，最好扁平化您的客户端代码。我的意思是您的客户端目录中的代码应该在您的根目录中。

为什么我建议这样？因为如果您想将您的全栈 JavaScript 项目更改为没有后端但只包含前端的项目，那会容易得多。我的意思是大多数用 JavaScript 编写的项目都集中在前端。

最好把你的后端代码放在像“server”这样的目录中，和“css”、“image”一样的文件夹级别...这样做的好处是当你需要或不需要后端时，只需添加或删除“服务器”目录，不会影响源项目结构。

像这样：

【讨论】：

【解决方案6】：

看到这个骨架

https://github.com/Giancarlo1974/SailsAngular

它集成了客户端的 Angular 4 + Bootstrap 4 和服务器的 Node Sails JS

此解决方案的优点之一是： 1)Task Automation 2)Database Agnosticism

【讨论】：