77

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

我试图弄清楚的第一件事是一个好的文件结构。到目前为止，我的纯 HTML/CSS 模板具有以下目录结构...

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

（ _site 是 PSD 等的工作目录。）

我在这里找到了 Node.js/AngularJS 应用程序的示例目录结构....

...这表明以下目录结构。

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 的事实）。

我还有以下问题...

  1. 我想将所有前端和后端文件分开。此解决方案将所有前端文件放在 public/ 目录中，这很有意义，因为大多数文件都需要公开，但是将 SASS 和 _site 文件夹放在这里有意义吗？我可以将它们保留在那里，但在将它们投入生产时不上传它们，但这似乎是错误的，因为它们不应该公开。它们也不属于所有后端内容的根级别。

  2. 从CDN加载 AngularJS 不是更好吗？

  3. 鉴于服务器只需要提供一个模板（主应用程序模板），所有其他 HTML 将在前端构建，保持 index.html 文件静态是否更有意义，删除视图文件夹并在 public/ 下创建一个 partials/ 文件夹，就像原来的 AngularJS Seed 应用程序一样？

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

4

6 回答 6

36

随着时间的推移，事情变得越来越容易。我已经将 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（既不使用EJS也不使用Jade/Pug从命令行运行 Express.js）框架与 angular-seed 项目（从 GitHub 克隆它）合并。然后我搬了很多东西。这是我想出的：

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

在此处输入图像描述

于 2013-06-09T02:43:58.950 回答
20

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

2) 在生产中从谷歌 CDN 加载 AngularJS 通常是一个好习惯，只使用本地版本进行开发，根据您的环境，您可以有两个单独的布局。

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

你应该清楚地去做目前看起来最合乎逻辑的事情，当你熟悉 express 时，你可能会移动事情。

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

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

于 2012-12-22T06:50:04.363 回答
5

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

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

您也可以考虑使用Yeoman来生成项目骨架。

Yeoman 是一套强大且自以为是的工具、库和工作流程，可以帮助开发人员快速构建漂亮、引人注目的 Web 应用程序。

它是一个很好的引导和管理项目的工具（类似于 Rails 的方式），并且会创建一个目录结构和框架文件供您构建。Brian Ford 写了一篇关于在 Angular 中使用 Yeoman的优秀文章。

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

要回答您的个人问题：

  1. 在服务器端编译的任何文件都应保存在您的公用文件夹之外。我建议不要将主 PSD、模型或任何其他不适合公共使用（浏览器或用户）的文件保存在公共文件夹中。

  2. 如果您期望大量流量，从 CDN 提供静态资产（JS、图像、CSS）总是好的。对于访问量较少的网站来说，这并不是那么重要，但仍然是一个好主意。我将首先在本地提供文件以进行初始开发。将资产优化留到接近上线日期时。当这个时候到来时，您还需要正确设置缓存。例如，Yeoman 提供了一种对资产进行版本控制的好方法。这为您提供了长期缓存的优势，但允许您将文件更新推送到客户端。

  3. 如果您的索引文件不需要任何服务器端渲染，请静态提供。我喜欢使用 Angular 应用程序尽可能地让我的后端与后端分离。它有助于保持关注点分离；在开发客户端文件时，您根本不需要考虑后端（Angular 非常适合。）

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

于 2012-12-26T20:59:42.277 回答
2

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

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

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

像这样：

在此处输入图像描述

于 2016-09-24T10:52:57.207 回答
0

我正在调查同样的事情。

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

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

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

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

于 2016-02-19T23:57:56.347 回答
0

看到这个骨架

https://github.com/Giancarlo1974/SailsAngular

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

该解决方案的优点之一是：1)任务自动化 2)数据库不可知论

于 2017-07-26T07:42:38.823 回答