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

Question

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

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

它也不会加载所有 Angular 功能（例如：如果您单击 link，例如注册页面，它会加载 html它位于页面底部，但不隐藏其他元素）。

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

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

编辑：

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

Sails.js 项目文件结构：

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

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

app

404.html

assets/

bower_components/

favicon.ico

favicon.png

fonts/

images/

index.html

robots.txt

scripts/

styles/

views/

bower.json

dist/

Gruntfile.js

karma-e2e.conf.js

karma.conf.js

node-modules/

package.json

prebuilt/

README

readme.txt

test/

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

Answer 1

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

要包含 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 app you can clone it and use it as base: https://github.com/oferh/ayooni

的模板

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

Integrating a Single-Page Angular App Template into Sails.js

javascript

node.js

angularjs

yeoman

sails.js

编辑：