构建Node.js和AngularJS应用程序

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文件静态，删除views文件夹和在public /下创建一个partials /文件夹，就像原始的AngularJS Seed应用程序一样？

我意识到这只是一个见解，我可以从技术上将它们放置在我想要的任何地方，但是我希望比我更有经验的人可以告诉我各种目录结构的陷阱。

javascript  angularjs  node.js 
— 乔霍布斯
source
您可能会发现此链接很有用Angular项目结构
— Dalorzo 2014年

Answers:

20

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

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

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

您应该清楚地选择当前看来最合理的方法，随着对Express的熟悉，您可能会四处移动。

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

检查一下NodeJS MVC框架的比较，看看其他人如何做。但是，我显然将从香草表达代码开始，以便对其进行完全控制并了解在这些框架中的任何一个过度投入之前事情是如何工作的。

— 奥利维尔
source
2
＃2让我感到惊讶。您真的推荐CDN用于产品吗？为什么？
— 杰西
12
因为CDN托管的资源将以更快的方式加载（主机在地理位置上分散），并且很有可能已经被您的浏览器缓存（因此，即时304 Not Modified响应），因为还有很多其他网站已经在使用它们。您仍应构建自己代码的单个js文件（不包括cdn-libs）
— Olivier
哇。很高兴学习。好总结。下面是详细信息：stackoverflow.com/questions/2180391/...和stackoverflow.com/questions/547384/...
— 杰斯
如何创建“取决于您的环境的单独布局”？有人知道有一个项目可以证明这一点吗？这也是在开发中调试.js文件但在生产中提供.min.js文件的主要优点吗？
— 抢
2
我怀疑CDN托管的资源更快。生产型Web应用程序通常会将所有供应商文件合并为一个文件。因此，客户端只需执行一个http请求即可获取所有供应商的js文件。托管的JS文件每个文件需要一个http请求-是否缓存，它们将比您的一个文件花费更多的时间。
— Spock
36

随着时间的流逝，事情变得越来越容易。我在AngularJS前端使用了Yeoman，它使工作变得更加轻松：http: //yeoman.io/

选项1，MEAN.io

MEAN是一个了不起的缩写！我更喜欢MEAN堆栈目录结构。让我们使用约定俗成的人！只需使用mean.io中的目录结构。MEAN也很方便，因为它可以放入所有东西，例如Grunt，Bower等。

在此处输入图片说明

选项2，Angular种子+ 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-建议将此堆栈溢出答案放入Git。 但是，这现在可能已过时。
  • public -这几乎来自有角度的种子应用程序文件夹。
    • css，img，js，lib，partials-很明显，美观大方且短。
  • routes -Node.js路由。
  • server -服务器端“ shebang” Node.js程序，守护程序，cron程序等。
  • server.js -从app.js重命名只是为了使其更明显，这是服务器端。

在此处输入图片说明

— 杰斯
source
1
这是我喜欢Rails的地方。约定是一个好主意。
— Jess
让我们将其作为Nodeclipse Node.js的向导。该模板的来源在哪里？
— Paul Verest
嗨@PaulVerest，我本身没有任何消息来源。我接受了有角种子项目和一个基本的Express生成的node.js项目，并将它们合并在一起。对于express，请访问以下页面：expressjs.com/guide.html，搜索使用express（1）生成应用程序。对于角度，我下载了github.com/angular/angular-seed.git
— Jess
我知道了，我希望有一些资源可以在Nodeclipse中用作模板。我们已经有了Express向导，添加Angular仍然是手动的。
— Paul Verest
1
@BenTaliadoros-你是对的。事情一定会随着时间而改变，npm会变得更好。我链接了SO问题并编辑了答案。谢谢。
— 杰西
5

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

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

您可能还考虑使用Yeoman生成项目框架。

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

这是一个用于引导和管理项目的好工具（类似于Rails的方式），它将创建目录结构和框架文件供您构建。布赖恩·福特（Brian Ford）写了一篇关于在Angular中使用Yeoman的出色文章。

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

要回答您的个人问题：

  1. 服务器端编译的所有文件都应保留在公用文件夹之外。我建议不要将诸如公共PSD之类的PSD，模型或任何其他非供公众使用（无论是由浏览器还是由用户使用）的文件保存在公用文件夹中。

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

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

真的，您只需要玩转；尝试各种不同的事情，阅读博客文章，从他人那里获取想法，提出问题（如您在此处所做的，以及在Angular Google+社区页面上进行），观看视频，并在可能的情况下参加聚会-聚会非常适合这样做。

— 贝里·菲利普斯
source
Yeoman是Def。要走的路。它还将为您创建代码结构（样板代码）。
— 史蒂夫·K
2

我不同意以前的所有帖子。他们要么从另一个地方粘贴，要么没有自己的想法。根据我的经验，最好将客户端代码放平。我的意思是客户目录中的代码应位于您的根目录中。

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

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

像这样：

在此处输入图片说明

— 胡亚雄
source
0

我正在调查同一件事。

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

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

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

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

— 火星罗伯逊
source
一如往常，当我拒绝投票时-请提供反馈-就我的幼稚理解-入门项目在这里强制执行代码结构方面的最佳实践-我在这里缺少什么？
— 火星罗伯逊
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.