构建Node.js和AngularJS应用程序

时间：2012-12-22 00:06:44

标签： javascript angularjs node.js

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

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

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

（_ site是PSDs的工作目录等）

我找到了Node.js / AngularJS app here的示例目录结构....

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

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文件夹并在public /上创建一个partials /文件夹，就像原来的AngularJS Seed应用程序一样吗？​​

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

6 个答案:

答案 0 :(得分：36)

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

选项1，MEAN.io

MEAN是一个很棒的缩写！我更喜欢MEAN堆栈目录结构。让我们使用常规人物吧！只需使用mean.io中的目录结构即可。 MEAN也很方便，因为它会抛出Grunt，Bower等所有好东西。

Enter image description here

选项2，Angular-seed + Express.js

我在GitHub上搜索了Node.js / AngularJS项目（可能不够难），并没有看到任何对于起始目录结构非常好的东西。所以我已经将Node.js Express.js（使用Express.js from the command line和EJS运行Jade/Pug）骨架与angular-seed项目（clone it from GitHub）合并。然后我搬了很多东西。这就是我想出的：

  • developer - 只有开发人员才会使用的东西。不需要部署。
    • config - karma配置文件和其他文件。
    • scripts - 开发人员脚本（构建，测试和部署）
    • test - e2e和单元测试。
  • logs
  • node_modules - this Stack Overflow answer建议将其放入Git中。 但现在可能已过时。
  • public - 几乎直接来自angular-seed app文件夹。
    • css，img，js，lib，partials - 非常明显，又好又短。
  • routes - Node.js routes。
  • server - 服务器端“shebang”Node.js程序，守护程序，cron程序，等等。
  • server.js - 从app.js重命名只是为了让它更明显这是服务器端。

Enter image description here

答案 1 :(得分：20)

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

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

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

你应该清楚地看看目前看来最合乎逻辑的事情，你可能会在熟悉快递时动一下。

您应该检查现有的快速框架，看看他们如何构建自己的应用。例如，TowerJS有一个非常干净的config文件夹，但它们会混淆服务器端和文件夹。客户端代码，我个人不喜欢。

检查NodeJS MVC frameworks的这个比较，看看别人怎么做。但是，我明确地从香草快递代码开始，以便完全控制和在过度提交任何这些框架之前了解事情是如何工作的。

答案 2 :(得分：5)

正如所建议的那样，它主要归结为个人偏好以及对您当时正在进行的项目有效的方法。你跟你说话的每个人都会有不同的想法，每个项目都有自己的设计 - 对一个人来说有用的东西可能对另一个有用。我希望你会尝试很多不同的结构，很快就能找到一个最舒服的结构 - 但这仍然会随着时间的推移而发展。

我发现角形种子结构是最干净的，但同样是个人偏好（不过，它有助于它由Angular团队设计。）

您也可以考虑查看Yeoman以生成项目骨架。

  

Yeoman是一套强大而富有根据的工具，库和一套   工作流程，可以帮助开发人员快速建立美观，引人注目   网络应用。

这是一个很棒的工具，用于引导和管理项目（类似于Rails的方式），并将创建一个目录结构和框架文件供您构建。布莱恩福特写了excellent post使用Yeoman和Angular。

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

回答您的个人问题：

  1. 服务器端编译的所有文件都应保留在外部 你的公用文件夹。我建议不要保持主人的喜欢 PSD，模型或任何其他不适合公开的文件 公共文件夹内的消费（通过浏览器或用户）。

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

  3. 如果你的索引文件不需要任何服务器端渲染， 静静地服务。我喜欢让我的后端脱离 尽可能使用Angular应用程序后端。它有助于维护 分离关注;在开发客户端文件时，你没有 需要考虑后端（Angular对此很好。）

    4. 真的，你只需要玩耍;尝试不同的东西，阅读博客文章，从别人那里获取想法，提出问题（正如你在这里所做的那样，以及在Angular Google+社区页面上），观看视频，如果可以的话，参加聚会 - Meetups真的很棒。

答案 3 :(得分：2)

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

为什么我建议这样？因为如果你想将你的全栈JavaScript项目改为没有后端的项目，只包括前端，那就容易多了。我的意思是大多数用JavaScript编写的项目都集中在前端。

最好将后端代码放在像“服务器”这样的目录中，与“css”，“image”相同的文件夹级别......它的优点是当你需要或不需要后端时，只需添加或删除“server”目录，它就不会影响原始项目结构。

像这样：

Enter image description here

答案 4 :(得分：0)

我正在研究同样的事情。

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

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

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

我相信标准化的力量，加入该项目的新人将会欣赏统一的结构。

答案 5 :(得分：0)

查看此骨架

https://github.com/Giancarlo1974/SailsAngular

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

此解决方案的一个优点是： 1）Task Automation 2）Database Agnosticism

相关问题
最新问题