AngularJS + sails.js

Question

AngularJS + sails.js

ris*_*shy 50 javascript node.js angularjs yeoman sails.js

我正在开发一个应用程序,可以将sails.js用于后端,将AngularJS用于前端.我以为我将使用Yeoman-angular生成器https://github.com/yeoman/generator-angular创建一个Angular应用程序,一旦我完成了前端逻辑,我将使用创建一个sails应用程序,

npm install -g sails
航行新的应用程序

然后我将所有AngularJS文件传输到Sails文件夹.

但问题是AngularJS创建了这样的文件夹层次结构,如https://github.com/rishy/angular-jade-stylus-seed,在运行"grunt server"时,会创建一个包含最终生产版本的"dist"文件夹.

另一方面,sails app的"sails new app"文件夹层次结构就像.

API
- 适配器/
- 控制器/
- 楷模/
- 政策/
- 服务/
资产
- 图片/
- JS /
- 风格/
- favicon.ico的
- 的robots.txt
配置/
node_modules /
意见
- 家/
- 403.ejs
- 404.ejs
- 500.ejs
- layout.ejs
Gruntfile.js
app.js
的package.json

所以,我的问题是:

现在,如何将我的Angular文件传输到此sails目录以及如何构建它？
由于sails使用"sails lift"启动服务器而角度使用"grunt服务器",我应该使用哪一个为我的sailsJs + AngularJs app启动服务器,以及在AngularJS之后创建的"dist"文件夹呢？
我必须在Gruntfile.js中做出哪些更改,因为它现在应该包含Angular和Sails的代码？
我应该在哪里保留不同的视图和样式文件,以及如何访问Angular或Sails中的表单？

我认为很多人都面临着类似的问题,因为AngularJS和SailsJs目前风靡一时.应该有一个强大的样板来创建一个AngularJS + SailsJS应用程序,现在很遗憾.

Answer 1

sgr*_*454 56

由于Sails是纯粹的后端框架,而Angular纯粹是前端,因此它们可以很好地协同工作.当你将Angular生成器放入其中时会有点混乱,但如果你从Angular Seed应用程序和Sails v0.10 开始,这里是基本步骤:

使用创建一个新的Sails应用程序 sails new myApp
擦除myApp/assets文件夹的内容
将Angular Seed app文件夹的内容复制到myApp/assets
将内容替换为myapp/views/layout.ejsAngular Seed app/index.html文件的内容
从layout.ejs文件中删除所有非脚本标记内容(<body>标记之后和第一个<script>标记之前的所有内容,并使用它来替换内容myApp/views/homepage.ejs
放置<%-body%>后<body>的标签layout.ejs

然后,您可以启动服务器,sails lift您将看到Angular应用程序http://localhost:1337.

我把它放在Github上作为参考.

使用这种方法,你不需要对Gruntfile做任何事情,你永远不会打电话grunt server- 这只是用于测试Angular应用程序的测试服务器,你用Sails替换它.您仍然可以获得Sails grunt-sync任务的好处,该任务可以在更改前端资产时监视和同步它们.

如果你真的想使用Yeoman Angular生成器,你可以尝试直接在assets你的Sails应用程序的文件夹中生成一个应用程序,并使用该文件夹中的生成器命令.我之前没有使用它,所以我不知道dist文件夹的用途,但它似乎安装的所有节点模块都支持测试Web服务器(这也是你不需要的,因为你有Sails)和测试套件(这总是很好).我能看到的唯一问题是你是否需要Yeoman生成的Gruntfile中的一些任务.Sails处理较少的编译和CSS缩小(在生产模式下),但它对Jade或Stylus没有任何作用,因此如果你确实需要它们,你必须将这些任务添加到Sails Gruntfile.

如果您正在创建单页应用程序,并且您将仅使用Sails作为API后端(即,不提供大量视图),那么将Angular和Sails项目完全分开将是完美的,甚至同时运行Sails和Angular测试服务器.或者,如果它不是单页但你仍然想要所有Angular生成器的花里胡哨,你可以尝试将Angular app目录符号链接到Sails资源目录中.我最好的建议只是让您的开发环境尽可能与您的最终部署类似! (4认同)

Answer 2

小智 12

您的问题正是我创建Sailng的原因:https://github.com/ryancp/sailng 这是一个使用最新Sails 0.10.0-rc5的示例/样板应用程序.

它还演示了如何在Sails中使用socket.io来为客户端提供实时更新而不进行ajax轮询.

克隆它并按照说明更好地了解如何一起使用Sails和Angular.

归档时间：	11 年，8 月前
查看次数：	24219 次
最近记录：	8 年，2 月前