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

Question

I'm currently trying to build an educational single-page web app which will use Angular for the front end and Sails.js for the backend. I am using an Angular app template which can be found here.

I want to integrate it into a Sails.js project, and I even read through and tried all the answers on this thread on Stack Overflow which covers a similar question yet none of the answers seemed to work for me. I was able to use the code in index.html as my homepage view using the #1 answer on that thread, but when it loads it only loads the html (despite the fact I have all of the css linked).

It also does not load all of the Angular functionality (For example: if you click on a link, the sign up page for instance, it loads the html for it at the bottom of the page but does not hide the other elements).

How could I possibly fix this?

Note: If extra info is needed to answer this please ask and I will be happy to provide it.

Edit:

So this may be helpful (file structure for Sails.js project and file structure for Angular web app template which was generated using Yeoman):

Sails.js project file structure:

• 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 single-page web app template file structure:

• 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/

By the way, the dist and prebuilt folders are relatively the same as the app folder. The only difference is that the dist folder is built for production and the prebuilt folder (rather obviously) a prebuilt/example version of the app.

Answer 1

To use Angular with Sails first make sure that Sails will load the Angular app files when building the app, to that make sure that the javascript, css and html files are in the assets folder under the equivalent Sails folders. So the angular javascript files should be under assets/js, css files in assets/styles and html files accessible in the assets folder.

To get bower_components included it's better to copy them to a folder under assets as well, to a folder named assets/vendor for example, grunt-bower-task can be used for this purpose.

Sails build process should include the bower_components so change the following lines in 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'
];

I've created a template that implements the Angular tutorial PhoneCat app you can clone it and use it as base: https://github.com/oferh/ayooni