首页 文章

AngularJS sails.js

提问于
浏览 次
50

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

  • npm install -g sails

  • 航行新应用

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

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

另一方面，sails app的“sails new app”文件夹层次结构就像 .

  • api

  • 适配器/

  • 控制器/

  • 型号/

  • 政策/

  • 服务/

  • 资产

  • images /

  • js /

  • 个样式/

  • favicon.ico

  • robots.txt

  • config /

  • node_modules /

  • 次观看

  • home /

  • 403.ejs

  • 404.ejs

  • 500.ejs

  • layout.ejs

  • Gruntfile.js

  • app.js

  • package.JSON

所以，我的问题是：

  • 现在，如何将我的Angular文件传输到此sails目录以及如何构建它？

  • 由于sails使用"sails lift"来启动服务器而angular使用"grunt server"，我应该使用哪一个为我的sailsJs AngularJs应用程序启动服务器，以及在AngularJS之后创建的"dist"文件夹呢？

  • 我必须在Gruntfile.js中进行哪些更改，因为它现在应该包含Angular和Sails的代码？

  • 我应该在哪里保存不同的视图和样式文件，以及如何访问Angular或Sails的表单？

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

javascript node.js angularjs yeoman sails.js

5 回答

  • 0

    由于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 的内容

    • 在 layout.ejs 的 <body> 标记后面放置 <%-body%>

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

    我put this on Github供参考 .

    使用这种方法，你永远不会调用 grunt server - 即's solely for testing Angular apps with their test server, which you'替换为Sails . 您仍然可以获得Sails grunt-sync任务的好处，该任务可以在更改前端资产时监视和同步它们 .

    如果您真的想使用Yeoman Angular生成器，可以尝试直接在Sails应用程序的 assets 文件夹中生成应用程序，并使用该文件夹中的生成器命令 . 我没有知道dist文件夹的用途，但似乎它安装的所有节点模块都支持测试Web服务器（你再也不用Jade或Stylus做任何事情，所以你有如果你确实需要，可以将这些任务添加到Sails Gruntfile中 .

    回复于
  • 0

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

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

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

    回复于
  • 4

    我还为Sails.js Angular做了示例“样板/示例”应用程序 . 在我的解决方案中，这些分离到后端和前端（两个服务器） .

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

    随意尝试一下 . https://github.com/tarlepp/angular-sailsjs-boilerplate

    回复于
  • 56

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

    • 使用'grunt serve'生成angularjs单页应用程序到缩小版本，一切都应该在'dist'文件夹下 .

    • 在sails.js项目的routes.js中，删除视图的配置代码：

    '/'：{view：'homepage'}

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

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

    • 开始sails.js（帆升降机），您可以在localhost：1337浏览您的角度网站

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

    回复于
  • 12

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

    请参阅此Sails Angular项目中的任务配置

    回复于

相关问题