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

问题描述

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

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

_site/字体/Javascript/SASS/样式表/索引.html

(_site 是 PSD 等的工作目录)

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

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

app.js -->应用配置package.json -->对于 npm公共/-->要在客户端使用的所有文件css/-->CSS文件app.css -->默认样式表img/-->图像文件js/-->JavaScript 文件app.js -->声明顶级应用模块控制器.js -->应用控制器指令.js -->自定义 AngularJS 指令过滤器.js -->自定义 AngularJS 过滤器services.js -->自定义 AngularJS 服务库/-->AngularJS 和第三方 JavaScript 库角/angular.js -->最新的 AngularJSangular.min.js -->最新的缩小版 AngularJSangular-*.js -->AngularJS 附加模块version.txt -->版本号路线/api.js -->提供 JSON 的路由index.js -->用于提供 HTML 页面和部分的路由观看次数/index.jade -->应用程序的主页面layout.jade -->文档类型、标题、头部样板部分/-->AngularJS 视图部分(部分玉模板)部分1.jade部分2.jade

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

我还有以下问题...

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

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

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

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

解决方案

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

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

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

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

<小时>

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

查看这个 NodeJS MVC 框架的比较以了解其他人是如何做的.但是，我显然会从香草快递代码开始，以便完全控制&在对任何这些框架过度投入之前了解事情是如何运作的.

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.

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 is a working directory for PSDs, etc.)

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

So, this looks quite good to me (except for the fact that I wouldn't use 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?

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

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.

---

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.

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屋！