将单页 Angular 应用程序模板集成到 Sails.js

Question

我目前正在尝试构建一个教育性单页 Web 应用程序，它将使用 Angular 作为前端，使用 Sails.js 作为后端。我正在使用一个 Angular 应用程序模板，它可以在 here 找到。

我想将它集成到 Sails.js 项目中，我什至通读并尝试了 Stack Overflow 上 this thread 上的所有答案，其中涵盖了一个类似的问题，但似乎没有一个答案对我有用。我能够使用 index.html 中的代码作为我的主页视图，使用该线程上的#1 答案，但是当它加载时它只加载 html（尽管我已经链接了所有的 css）。

它也不会加载所有 Angular 功能（例如：如果你点击一个链接，例如注册页面，它会在页面底部加载它的 html，但不会隐藏其他元素)。

我怎么可能解决这个问题？

注意：如果需要额外的信息来回答这个问题，请询问，我很乐意提供。

编辑：

所以这可能会有所帮助（Sails.js 项目的文件结构和使用 Yeoman 生成的 Angular Web 应用模板的文件结构）：

Sails.js 项目文件结构：

• API
  • 适配器/
  • 控制器/
  • 型号/
  • 政策/
  • 服务/
• 资产
  • 图片/
  • js/
  • 样式/
  • favicon.ico
  • robots.txt
• 配置/
• node_modules/
• 查看次数
  • 首页/
  • 403.ejs
  • 404.ejs
  • 500.ejs
  • layout.ejs
• Gruntfile.js
• app.js
• package.JSON

Angular 单页网络应用模板文件结构：

• 应用程序
  • 404.html
  • 资产/
  • bower_components/
  • favicon.ico
  • favicon.png
  • 字体/
  • 图片/
  • index.html
  • robots.txt
  • 脚本/
  • 样式/
  • 观看次数/
• bower.json
• 分布/
• Gruntfile.js
• karma-e2e.conf.js
• karma.conf.js
• 节点模块/
• package.json
• 预建/
• 自述文件
• readme.txt
• 测试/

顺便说一下，dist 和 prebuilt 文件夹与 app 文件夹是相对相同的。唯一的区别是 dist 文件夹是为生产而构建的，而 prebuilt 文件夹（很明显）是应用程序的预构建/示例版本。

Answer 1

要将 Angular 与 Sails 一起使用，首先确保 Sails 在构建应用程序时会加载 Angular 应用程序文件，以确保 javascript、css 和 html 文件位于等效 Sails 文件夹下的 assets 文件夹中。 所以 Angular 的 javascript 文件应该在 assets/js 下，css 文件在 assets/styles 下，html 文件可以在 assets 文件夹中访问。

要包含 bower_components，最好将它们也复制到 assets 下的文件夹中，例如命名为 assets/vendor 的文件夹，grunt-bower-task 可用于此目的。

Sails 构建过程应包括 bower_components，因此在 tasks/pipline.js 中更改以下行：

// CSS files to inject in order
//
// (if you're using LESS with the built-in default config, you'll want
//  to change `assets/styles/importer.less` instead.)
var cssFilesToInject = [
  'vendor/**/*.css',
  'styles/**/*.css'
];


// Client-side javascript files to inject in order
// (uses Grunt-style wildcard/glob/splat expressions)
var jsFilesToInject = [

  'vendor/angular/*.js',
  'vendor/angular-*/*.js',

  // Load sails.io before everything else
  'js/dependencies/sails.io.js',

  // Dependencies like jQuery, or Angular are brought in here
  'js/dependencies/**/*.js',

  // All of the rest of your client-side js files
  // will be injected here in no particular order.
  'js/**/*.js'
];

我创建了一个实现 Angular tutorial PhoneCat 应用程序的模板，您可以克隆它并将其用作基础：https://github.com/oferh/ayooni