构建Node.js和AngularJS应用程序 [英] Structuring a Node.js and AngularJS application

问题描述

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

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.

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

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...

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

(_site是PSD等的工作目录)

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

我在此处找到了Node.js/AngularJS应用的示例目录结构. ...

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

...，建议使用以下目录结构.

... 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

所以，这对我来说挺不错的(除了我不会使用Jade的事实).

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

我还有以下问题...

I still have the following questions...

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

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.

从 CDN 加载AngularJS会更好吗?

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

鉴于服务器只需要交付一个模板(主应用程序模板)，而所有其他HTML都将在前端构建，那么使index.html文件保持静态不是更有意义，像原始AngularJS Seed应用程序一样，删除views文件夹并在public/下创建partials/文件夹?

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?

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

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.

推荐答案

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

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

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

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.

3)即使要进行客户端渲染，也可以保留服务器端布局/视图的渲染，但在某些时候(管理员访问权限，电子邮件渲染等)，您可能仍需要它.但是，使用公用文件夹中AngularJS的partials名称可能有助于避免服务器端views&客户端partials.

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 partials name from AngularJS in the public folder to help avoid confusion between server-side views & client-side partials.

您应该清楚地寻求当前看来最合乎逻辑的事情，随着对Express的熟悉，您可能会四处走动.

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框架，以了解它们如何构建其应用程序.例如， TowerJS 具有非常干净的config文件夹，但是它们混淆了服务器端&我个人不喜欢的客户端代码.

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

检查 NodeJS MVC框架的比较，以了解其他人的工作方式.但是，为了完全控制和明确我将先从香草表达代码开始.在这些框架中的任何一个上过度投入之前，先要了解事物是如何工作的.

Check this comparaison of NodeJS MVC frameworks to 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.

这篇关于构建Node.js和AngularJS应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！