构建Node.js和AngularJS应用程序

Question

我即将尝试我的第一个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文件保持为静态不会更有意义,删除视图文件夹和在public/AngularJS Seed应用程序下创建一个partials /文件夹吗？

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

Answer 1

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

选项1,MEAN.io

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

选项2,Angular-seed + Express.js

我在GitHub上搜索了Node.js/AngularJS项目(可能不够难),并且没有看到任何对于起始目录结构非常好的东西.所以我已经将Node.js Express.js(使用EJS和Jade/Pug 从命令行运行Express.js)框架与angular-seed项目合并(从GitHub克隆它).然后我搬了很多东西.这是我想出的:

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

Answer 2

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

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

3)即使客户端渲染是要走的路,你可以保持服务器端布局/视图渲染,你可能会在某些时候需要它(管理员访问,电子邮件渲染等).但是,partials在公共文件夹中使用AngularJS中的名称可以帮助避免服务器端views和客户端之间的混淆partials.

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

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

检查NodeJS MVC框架的这个比较,看看其他人如何做.但是,我明确地从vanilla express代码开始,以便完全控制并在过度提交任何这些框架之前了解事情是如何工作的.

Answer 3

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

我发现角形种子结构是最干净的,但这也是个人偏好(但是,它有助于它由Angular团队设计.)

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

Yeoman是一套强大而富有根据的工具,库和工作流程,可以帮助开发人员快速构建漂亮,引人注目的Web应用程序.

它是引导和管理项目的一个很好的工具(类似于Rails的方式),并将创建一个目录结构和框架文件供您构建.布莱恩福特写了一篇关于使用Yeoman和Angular 的优秀文章.

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

回答你的个人问题:

1. 服务器端编译的任何文件都应保存在公用文件夹之外.我建议不要在公共文件夹中保留主PSD,模型或任何其他不适合公共消费(通过浏览器或用户)的文件.

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

3. 如果您的索引文件不需要任何服务器端呈现,请静态地提供它.我喜欢使用Angular应用程序尽可能地将后端与后端分离.它有助于保持关注的分离; 在开发客户端文件时,您根本不需要考虑后端(Angular对此非常有用.)

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