一尘不染

AngularJS + sails.js

angularjs

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

  1. npm install -g帆
  2. 航行新应用

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

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

另一方面,帆应用程序的“ sails new app”文件夹层次结构类似。

  • api
    • adapters/
    • controllers/
    • models/
    • policies/
    • services/
  • assets
    • images/
    • js /
    • styles/
    • favicon.ico
    • robots.txt
  • config/
  • node_modules /
  • views
    • home/
    • 403.ejs
    • 404.ejs
    • 500.ejs
    • layout.ejs
  • Gruntfile.js
  • app.js
  • package.JSON

所以,我的问题是:

  1. 现在,如何将我的Angular文件传输到该sails目录中,以及如何构造它?
  2. 由于sails使用“ sailslift”启动服务器,而angular使用“gruntserver”,我应该使用其中哪一个来启动我的sailsJs + AngularJs应用程序的服务器,以及在AngularJS之后创建的“ dist”文件夹呢?
  3. 我现在必须在Gruntfile.js中进行哪些更改,因为它现在应该包含来自Angular和Sails的代码了?
  4. 我应该在哪里保留不同的视图和样式文件,如何从Angular或Sails中访问这些文件?

我认为许多人都面临着类似的问题,因为AngularJS和SailsJs目前都很流行。应该有一个强大的样板来创建AngularJS +SailsJS应用程序,可惜现在没有了。


阅读 230

收藏
2020-07-04

共1个答案

一尘不染

由于Sails是纯粹的后端框架,而Angular是纯粹的前端,因此它们可以很好地协同工作。将Angular生成器带入其中时,它可能会引起一些混乱,但是如果要从AngularSeed应用程序和Sails v0.10 开始,请遵循以下基本步骤:

  1. 使用创建一个新的Sails应用 sails new myApp
  2. 清除myApp/assets文件夹中的内容
  3. 将Angular Seed app文件夹的内容复制到myApp/assets
  4. myapp/views/layout.ejsAngular Seed app/index.html文件的内容替换
  5. layout.ejs文件中剪切掉所有非脚本标记内容(<body>标记之后和第一个<script>标记之前的所有内容,并用其替换myApp/views/homepage.ejs
  6. 放置<%-body%><body>标签之后layout.ejs

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

把它放在Github上供参考。

使用此方法,您无需对Gruntfile做任何事情,并且永远也不会调用它grunt server-仅用于使用其测试服务器测试Angular应用,而您将用Sails替换它们。您仍然可以从Sails grunt-sync任务中受益,该任务可以在前端资产发生更改时对其进行监视和同步。

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

2020-07-04