小编典典

构建Node.js和AngularJS应用程序

angularjs

我将尝试第一个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文件夹和像原始的AngularJS Seed应用程序一样,在public /下创建一个partials /文件夹?

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


阅读 219

收藏
2020-07-04

共1个答案

小编典典

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

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

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

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


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

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

2020-07-04