AngularJS +sails.js

Posted 2023-02-22

技术标签:

【中文标题】AngularJS +sails.js【英文标题】：AngularJS + sails.js 【发布时间】：2014-03-23 05:29:03 【问题描述】：

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

npm install -g 帆推出新应用

然后我会将我所有的 AngularJS 文件转移到 Sails 文件夹中。

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

另一方面，在“sails new app”之后，sails 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”来启动服务器，而angular 使用“grunt server”，我应该使用其中之一来为我的sailsJs + AngularJs 应用程序启动服务器，以及创建的“dist”文件夹怎么样在 AngularJS 之后？我必须在 Gruntfile.js 中进行哪些更改，因为它现在应该包含来自 Angular 和 Sails 的代码？我应该将不同的视图和样式文件保存在哪里，我应该如何从 Angular 或 Sails 访问这些文件？

我认为很多人都面临着类似的问题，因为 AngularJS 和 SailsJs 目前风靡一时。应该有一个健壮的样板来创建一个 AngularJS + SailsJS 应用程序，遗憾的是现在缺少它。

【问题讨论】：

顺便说一句：你试过github.com/diegopamio/angular-sails-bind 吗？我刚刚发布给世界，它可以帮助你（虽然不是结构）。 【参考方案1】：

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

sails new myApp

myApp/assets

app

myApp/assets

myapp/views/layout.ejs

app/index.html

layout.ejs

<body>

<script>

myApp/views/homepage.ejs

layout.ejs

<body>

<%-body%>

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

我有put this on Github 供参考。

使用这种方法，你不需要对 Gruntfile 做任何事情，你也永远不会调用grunt server——这仅仅是为了用他们的测试服务器测试 Angular 应用程序，你将用 Sails 替换它。您仍然可以从 Sails grunt-sync 任务中受益，该任务会在您的前端资产发生变化时对其进行监视和同步。

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

【讨论】：

Yeoman 创建“dist”文件夹作为应用程序的最终生产版本，在本例中为 Angular 应用程序。因此，它包含类似于“Angular-Seed”的“app”目录的文件。唯一不同的是，由于“dist”是生产版本，所有文件都已经过缩小。所以，我想用 Yeoman 单独开发我的前端逻辑然后最后将“app”位置的 dist 目录添加到sails/assets/目录中会更合适。通过这种方式，我还可以使用 Jade、Stylus、Coffee 和使用 Karma 进行测试。您对此有何看法？如果您正在创建一个单页应用程序，并且您只是将 Sails 用作 API 后端（也就是说，不提供大量视图），那么它会非常好保持 Angular 和 Sails 项目完全分开，甚至同时运行 Sails 和 Angular 测试服务器。或者，如果它不是单页，但您仍然想要所有 Angular 生成器的花里胡哨，您可以尝试将 Angular 应用程序目录符号链接到 Sails 资产目录。我最好的建议始终是让您的开发环境尽可能与最终部署的样子相似！这一切听起来都太复杂了，而且需要更多的工作，如果你能接受就好了，但对于像我这样的人来说......就像迎接错误、头痛、失去创造力和动力一样。嗨@sgress454 我仍然不清楚这个（移动/复制角度文件）是如何工作的？我的意思是，如果将内容从索引文件复制到 layout.ejs（将所有非脚本标签移动到 homepage.ejs），那么是否需要保留 Angular 应用程序的 index.html 文件？ Sails 服务器启动后实际加载的是什么 index.html 或 layout.ejs ？我觉得index.html可以删掉..复制完所有内容就没意义了【参考方案2】：

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

它还演示了如何在 Sails 中使用 socket.io 向客户端提供实时更新，而无需 ajax 轮询。

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

【讨论】：

+1 一个问题，需要哪个版本的 Angular？运行 bower install 提供了几个选项目前似乎不支持 angular 1.3，选择 angular 1.2.x 的那个 @Ryan 您能否添加一个简短的解释，您是如何做到的？【参考方案3】：

我还为 Sails.js + Angular 完成了示例“样板/示例”应用程序。在我的解决方案中，它们分为后端和前端（两台服务器）。

我的解决方案还演示了用户之间数据内的套接字通信 + 实时更新。

请随意尝试。 https://github.com/tarlepp/angular-sailsjs-boilerplate

【讨论】：

【参考方案4】：

我有和你类似的用例。我使用 Yeoman 为 angularjs 生成项目结构。在这种情况下，我的解决方案是：

在sails.js项目的routes.js中，去掉views的配置代码：

'/': 查看：'主页'

删除sails.js 视图和资产文件夹下的所有文件。但请确保在删除所有内容之前您不需要 assets 文件夹中的任何文件。

将缩小的 angularjs 网站复制并粘贴到 assets 文件夹中。

启动sails.js (sails lift)，你可以在localhost:1337浏览你的angular网站

Sails.js 现在也简单提到了这个方法http://sailsjs.org/documentation/concepts/views

【讨论】：

【参考方案5】：

您必须配置默认任务以将 angular dist 文件夹复制到 .tmp

查看这个Sails Angular项目中的任务配置

【讨论】：

以上是关于AngularJS +sails.js的主要内容，如果未能解决你的问题，请参考以下文章