繁体 English 中英

AngularJS + sails.js

[英]AngularJS + sails.js

原文 2014-02-21 15:45:53 1 5 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应用程序，现在很遗憾。

5 个解决方案

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

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

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

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

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

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