构造一个Node.js和AngularJS应用程序

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

我试图让我的头脑第一件事是一个很好的文件结构。 到目前为止，我的纯HTML / CSS模板具有以下目录结构…

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

（_site是PSD的工作目录等）

我在这里find了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. 我想保留所有的前端和后端文件分开。 这个解决scheme把所有的前端文件放在公共/目录中，这是有道理的，因为大多数需要公开，但是把SASS和_site文件夹放在这里有意义吗？ 我可以把它们放在那里，但是当我把它们投入生产时不上传它们，但似乎是错误的，因为它们不应该公开。 他们也不属于所有后端的根本层面。

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

3. 鉴于服务器只需要提供一个模板（主应用程序模板），而其他所有HTML将在前端构build，那么将index.html文件保持为静态，删除views文件夹和在公共/像原始的AngularJS种子应用程序那样创build一个partials /文件夹呢？

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

Answer 1

1）在debugging时使用客户端less-> css转换（less.js这样做）通常使saas/less文件变得公开。 不知道你的_site包含了什么（顺便说一句，你应该使用小写文件夹为您的项目，特别是公共的东西） 。

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

3）即使客户端渲染的方式，你可能会保持服务器端布局/视图渲染，你可能需要在某个时候（pipe理访问，电子邮件渲染等）。 但是，在公用文件夹中使用AngularJS中的partials名称有助于避免混淆服务器端views和客户端partials 。

你应该明确地去做目前最合乎逻辑的事情，当你熟悉快递的时候，你可能会把事情搞得一团糟。

---

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

检查NodeJS MVC框架的这种比较 ，看看别人是怎么做的。 但是，为了完全控制和理解事情的工作方式，在任何框架上过度提交之前，我会明确地从vanilla表示代码开始。

Answer 2

随着时间的推移，事情变得越来越简单。 我已经使用了Yeoman AngularJS前端，它使生活变得更容易：http: //yeoman.io/

选项1，MEAN.io

意思是一个真棒首字母缩写！ 我更喜欢MEAN堆栈目录结构。 让我们使用会议的人！ 只需使用mean.io中的目录结构即可 。 MEAN也很方便，因为它会像Grunt ， Bower等所有的东西一样

选项2，Angular-seed + Express.js

我已经在GitHub中searchNode.js / AngularJS项目（可能不够难），并没有看到任何真正伟大的起始目录结构。 所以我已经将Node.js Express.js（使用EJS和Jade / Pug 的命令行运行Express.js ）与angular-seed项目（ 从GitHub中克隆 ）合并在一起。 然后我搬了一大堆东西。 以下是我想到的：

---

• developer – 只有开发人员将使用的东西。 不需要部署。
  • config – 因果configuration文件和其他。
  • scripts – 开发者脚本（构build，testing和部署）
  • test – e2e和unit testing。
• logs
• node_modules – 这个堆栈溢出的答案build议把它放在Git中。 但是现在可能已经过时了 。
• public – 这几乎直接从angular种籽应用程序文件夹。
  • css ， img ， js ， lib ， partials – 很明显，很好，很短。
• routes – Node.js路由。
• server – 服务器端“shebang”Node.js程序，守护进程，cron程序，不pipe。
• server.js – 从app.js改名为了更明显这是服务器端。

---

Answer 3

正如所暗示的，它主要归结为个人喜好，以及当时正在进行的项目的作用。 每个与你交谈的人都会有不同的想法，而每个项目都有自己的devise – 对一个人来说可能不起作用。 我希望你会尝试一些不同的结构，很快就会find一个最舒适的 – 但是这个还会随着时间的推移而发展。

我发现Angular Seed结构是最干净的，但是这也是个人喜好（尽pipe它是由Angular团队devise的）。

你也可以考虑看Yeoman来生成项目骨架。

Yeoman是一套function强大而又有见地的工具，库和工作stream程，可帮助开发人员快速构build漂亮，引人注目的Web应用程序。

这是一个引导和pipe理项目的好工具（类似于Rails的方式），并将创build一个目录结构和骨架文件供您构build。 Brian Ford写了一篇关于使用Yeoman和Angular的优秀文章 。

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

回答你的个人问题：

1. 任何编译服务器端的文件都应该保存在公用文件夹之外。 我build议不要在公共文件夹中保留大师PSD，模型或任何其他不公开使用的文件（通过浏览器或用户）。

2. 如果您期望高stream量，从CDN提供静态资产（JS，图像，CSS）总是好的。 对于访问量较less的网站来说并不重要，但仍然是一个好主意。 我将开始在本地提供文件进行初始开发。 当您接近您的生活date时，保留资产优化。 当这个时候来临的时候，你也想让你的caching设置正确。 例如，Yeoman提供了一种对资产进行版本控制的好方法。 这为您提供长寿命caching的优势，但允许您将更新的文件推送给客户端。

3. 如果你的索引文件不需要任何服务器端的渲染，静态的服务。 我喜欢让我的后端尽可能与后端解耦，与Angular应用程序。 它有助于保持关注的分离; 当开发客户端文件时，你根本不需要考虑后端（Angular对于这个很棒）。

真的，你只需要玩耍; 尝试不同的东西，阅读博客文章，从其他人那里获得点子，问问题（正如你在这里所做的一样，在Angular Google+社区页面上），观看video，如果可以的话，参加见面会 – Meetups确实非常棒。

Answer 4

我不同意以前的所有post。 他们要么从另一个地方粘贴，要么没有自己的想法。 从我的经验来看，最好是扁平化你的客户端代码。 我的意思是你的客户端目录中的代码应该在你的根目录下。

我为什么这样build议？ 因为如果你想把你的完整的JavaScript项目改成没有后端的项目，但是只包含前端，那就容易多了。 我的意思是大多数用JavaScript编写的项目都集中在前端。

最好把你的后台代码放到像“css”，“image”这样的相同文件夹级别的“server”目录下…这样做的好处是当你需要或不需要后端时，只需添加或删除“服务器”目录，不会影响原始项目结构。

喜欢这个：

Answer 5

我正在调查同样的事情。

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

然后我发现了一个更好的解决scheme：

• http://yeoman.io/
• http://yeoman.io/generators/
• （最stream行的发电机之一） https://github.com/angular-fullstack/generator-angular-fullstack

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

我相信标准化的力量，join这个项目的新人将会体会到统一的结构。

Answer 6

看到这个骨架

https://github.com/Giancarlo1974/SailsAngular

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

这个解决scheme的优点之一是：1） 任务自动化 2） 数据库不可知论