Javascript 构建 Node.js 和 AngularJS 应用程序

Structuring a Node.js and AngularJS application

提问by jonhobbs

I'm about to attempt my first AngularJS project, and it makes sense to use Node.js for the back end, even though it means learning both AngularJS and Node.js from scratch at the same time.

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

The first thing I'm trying to get my head around is a good file structure. So far my pure HTML/CSS template has the following directory structure...

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

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

( _site is a working directory for PSDs, etc.)

（ _site 是 PSD 等的工作目录）

I found an example directory structure for a Node.js/AngularJS app here....

我发现一个Node.js的一个例子的目录结构/ AngularJS应用程式这里....

... which suggests the following directory structure.

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

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

So, this looks quite good to me (except for the fact that I wouldn't use Jade).

所以，这对我来说看起来很不错（除了我不会使用 Jade 的事实）。

I still have the following questions...

我还有以下问题……

1. I want to keep all front-end and back-end files separate. This solution puts all the front-end files in the public/ directory which kind of makes sense because most need to be public, but does it make sense to put the SASS and _site folders here? I could just keep them there, but not upload them when I put them into production, but it seems wrong because they shouldn't be public. They also don't belong at root level with all the back-end stuff.

2. Wouldn't it be better to load AngularJS from a CDN?

3. Given that the server will only need to deliver one template (the main application template) and all other HTML will be constructed on the front-end wouldn't it make more sense to keep the index.html file static, delete the views folder and create a partials/ folder under public/ like the original AngularJS Seed application does?

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

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

3. 鉴于服务器只需要交付一个模板（主应用程序模板），而所有其他 HTML 都将在前端构建，保持 index.html 文件静态，删除视图文件夹和像原来的 AngularJS Seed 应用程序那样在 public/ 下创建一个 partials/ 文件夹？

I realize that this is all a matter of opinion, and I could technically put them wherever I want, but I'm hoping somebody more experienced than me could advise me of the pitfalls of various directory structures.

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

采纳答案by Olivier

1) It usually does make some sense to make saas/lessfiles public as you may want to use client-side less->css conversion when debugging (less.js does that). Not sure what your _sitecontains however (btw you should use lowercase folder for your project, especially for the public stuff).

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

2) It is usually a good practice to load AngularJS from Google CDN when in production, using only a local version for development, you could have two separate layouts depending on your environment.

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

3) Even if client-side rendering is the way to go, you may keep server side layout/views rendering, you will probably need it at some point (admin access, email rendering, etc.). However It can be helpful to use the partialsname from AngularJS in the public folder to help avoid confusion between server-side views& client-side partials.

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

You should clearly go for what seems the most logical thing to do at the current time, you will probably move things around as you get familiar with express.

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

---

---

You should check existing express framework to see how they structure their app. For instance, TowerJShas a pretty clean configfolder, however they mix up server-side & client-side code which I personally do not like.

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

Check this comparaison of NodeJS MVC frameworksto see how others do stuff. However, I would clearly start with vanilla express code in order to be in full control & to understand how things work before over-committing on any of theses frameworks.

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

回答by Jess

Things are getting easier as time goes on. I've used Yeoman for the AngularJS front-end, and it makes life much easier: http://yeoman.io/

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

Option 1, MEAN.io

选项 1，MEAN.io

MEAN is an awesome acronym! I prefer the MEAN stack directory structure. Let's use convention people! Just use the directory structure from mean.io. MEAN is handy too because it throws in all the goodies like Grunt, Bower, etc.

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

Option 2, Angular-seed + Express.js

选项 2，Angular-seed + Express.js

I've searched GitHub for Node.js/AngularJS projects (probably not hard enough) and not seen anything really great for a starting directory structure. So I've merged the Node.js Express.js (running Express.js from the command lineusing neither EJSnor Jade/Pug) skeleton with the angular-seed project (clone it from GitHub). Then I moved a ton of stuff around. Here's what I came up with:

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

---

---

• developer- stuff only the developer(s) will use. Does not need to be deployed.
  • config- karma configuration files and others.
  • scripts- developer scripts (build, test, and deploy)
  • test- e2e and unit tests.
• logs
• node_modules- this Stack Overflow answerrecommended to put this in Git. However this may now be obsolete.
• public- This comes almost straight from the angular-seed app folder.
  • css, img, js, lib, partials- pretty obvious and nice and short.
• routes- Node.js routes.
• server- server-side "shebang" Node.js programs, daemons, cron programs, whatever.
• server.js- renamed from app.js just to make it more obvious this is server side.

• 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 重命名只是为了更明显这是服务器端。

---

---

回答by Berry Phillips

As suggested it mostly comes down to personal preference and what works for the project you are working on at the time. Everyone you speak to you will have different ideas, and each project has it's own design - what works for one may not work for the other. I expect you'll try quite a few different structures and will soon find one that is the most comfortable - but this will still evolve over time.

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

I've found the Angular Seed structure to be the cleanest, but again that's personal preference (though, it helps that it's designed by the Angular team.)

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

You might also consider looking at Yeomanfor generating project skeletons.

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

Yeoman is a robust and opinionated set of tools, libraries, and a workflow that can help developers quickly build beautiful, compelling web apps.

Yeoman 是一套强大且固执己见的工具、库和工作流，可帮助开发人员快速构建美观、引人注目的 Web 应用程序。

It's a great tool for bootstrapping and managing projects (similar to the way Rails does) and will create a directory structure and skeleton files for you to build upon. Brian Ford wrote an excellent poston using Yeoman with Angular.

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

I also suggest watching the Angular meetup recordings on their YouTube channel. I recently attended a meetup in Mountain View where these questions came up. Mi?ko recommended Angular Seed and Yeoman (at least as a good starting point.)

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

To answer your individual questions:

回答您的个人问题：

1. Any files that are compiled server-side should be kept outside of your public folder. I would suggest not keeping the likes of master PSDs, mockups, or any other files that are not meant for public consumption (either by browser or user) inside public folders.

2. It is always good to serve static assets (JS, images, CSS) from a CDN if you expect a high amount of traffic. It's not so important for lesser visited sites, but still a good idea. I would start by serving the files locally for initial development. Leave the asset optimization for when you are nearing your live date. When this time does come you'll also want to get your caching set up right. Yeoman, for example, presents a good way of versioning your assets. This gives you the advantage of long lived caches but allowing you to push updates of the files to the clients.

3. If you're index file doesn't require any server-side rendering, serve it statically. I like to keep my backend decoupled from the backend as much as possible with Angular apps. It helps maintain separation of concern; when developing the client files, you don't need to think about the backend at all (Angular is great for this.)

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

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

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

Really, you just need to play around; try different things out, read blog posts, get ideas from others, ask questions (as you have done here, and on the Angular Google+ community page), watch videos and, if you can, attend meetups - Meetups really are great for this.

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

回答by u6176355

I don't agree with all the previous posts. They are either pasted from another place or didn't have their own mind. From my experiences, it's better to flatten your client-side codes. I mean the code inside your client directory should be in your root directory.

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

Why do I suggest this way? Because if you want to change your full-stack JavaScript project to the one without backend, but only include the frontend, it's much easier. I mean most projects written with JavaScript are focused on the frontend.

为什么我建议这样？因为如果你想把你的全栈 JavaScript 项目改成没有后端，但只包含前端的项目，那就容易多了。我的意思是大多数用 JavaScript 编写的项目都专注于前端。

It's better to put your backend code in a directory like "server" in the same folder level as like "css", "image"... The advantage of it is that when you need or don't need a backend, just add or delete the "server" directory, and it wouldn't affect the origin project structure.

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

Like this:

像这样：

回答by Janka

See this skeleton

看到这个骨架

https://github.com/Giancarlo1974/SailsAngular

https://github.com/Giancarlo1974/SailsAngular

It's integrates Angular 4 + Bootstrap 4 for the client and Node Sails JS for the server

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

One of the strong points of this solution is: 1) Task Automation2) Database Agnosticism

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

回答by Mars Robertson

I was investigating the very same thing.

我正在调查同样的事情。

My initial thoughts were directed towards using Express Generatorand Angular Seed.

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

Then I found a much nicer solution:

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

• http://yeoman.io/
• http://yeoman.io/generators/
• (one of the most popular generators)https://github.com/angular-fullstack/generator-angular-fullstack

• http://yeoman.io/
• http://yeoman.io/generators/
• （最受欢迎的生成器之一）https://github.com/angular-fullstack/generator-angular-fullstack

One of the most popular yeoman generatorsprovides you with a structure to Node.js and AngularJS applications.

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

I believe in power of standardisation and new people joining the project will appreciate the unified structure.

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