将单页面Angular App模板集成到Sails.js中

我目前正在试图build立一个教育单页的Web应用程序，将使用Angular的前端和Sails.js的后端。 我正在使用可以在这里find的Angular应用程序模板。

我想把它整合到一个Sails.js项目中，我甚至通读了Stack Overflow上关于这个线程的所有答案，其中涵盖了一个类似的问题，但是没有一个答案似乎适用于我。 我能够使用index.html中的代码作为我的主页视图使用该线程＃1的答案，但是当它加载它只加载HTML（尽pipe事实上，我有所有的CSS链接）。

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

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

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

编辑：

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

Sails.js项目文件结构：

• API
  • 适配器/
  • 控制器/
  • 楷模/
  • 政策/
  • 服务/
• 资产
  • 图片/
  • JS /
  • 风格/
  • favicon.ico的
  • 的robots.txt
• configuration/
• 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
• DIST /
• Gruntfile.js
• 卡玛 – e2e.conf.js
• karma.conf.js
• 节点模块/
• 的package.json
• 预build/
• 自述
• readme.txt文件
• testing/

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

Answer 1

要使用Angular with Sails，首先确保Sails在构build应用程序时加载Angular应用程序文件，以确保javascript，css和html文件位于等效Sails文件夹下的assets文件夹中。 所以angular度JavaScript文件应该位于资产/资产文件夹中的assets / styles和html文件中的资产/ js，css文件之下。

要包含bower_components，最好将它们复制到资产下的文件夹中，例如，可以将grunt-bower-task用于此目的。

Sails构build过程应包含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' ]; 

我创build了一个模板，实现Angular 教程 PhoneCat应用程序，你可以克隆它，并使用它作为基地： https ： //github.com/oferh/ayooni