AngularJS + sails.js

javascript node.js angularjs yeoman sails.js

24,596

Solution 1

Since Sails is a purely back-end framework and Angular is purely front-end, they can work together nicely. It can get a little confusing when you bring the Angular generator into it, but here are the basic steps if you were to start with the Angular Seed app and Sails v0.10:

Create a new Sails app with sails new myApp
Wipe out the contents of the myApp/assets folder
Copy the contents of the Angular Seed app folder into myApp/assets
Replace the contents of myapp/views/layout.ejs with those of the Angular Seed app/index.html file
Cut all of the non-script tag content from the layout.ejs file (everything after the <body> tag and before the first <script> tag and use it to replace the contents of myApp/views/homepage.ejs
Place <%-body%> after the <body> tag in layout.ejs

You can then start the server with sails lift and you'll see the Angular app at http://localhost:1337.

I've put this on Github for reference.

Using this method, you don't need to do anything to the Gruntfile, and you'll never call grunt server--that's solely for testing Angular apps with their test server, which you're replacing with Sails. You'll still get the benefit of the Sails grunt-sync task which watches and syncs-up your front-end assets as they are changed.

If you really want to use the Yeoman Angular generator, you can try generating an app directly into the assets folder of your Sails app and using the generator commands from within that folder. I haven't used it before, so I don't know what the dist folder is for, but it seems like all of the node modules it installs are there to support the test web server (which again you don't need, since you have Sails) and the test suite (which is always nice). The only issue I can see is if you need some of the tasks in that Gruntfile that Yeoman generates. Sails handles Less compilation and CSS minification (in production mode), but it doesn't do anything with Jade or Stylus, so you'd have to add those tasks to the Sails Gruntfile if you really needed them.

Solution 2

your questions are exactly why I created Sailng: https://github.com/ryancp/sailng It is an example/boilerplate application that uses the latest Sails 0.10.0-rc5.

It also demonstrates how to use socket.io within Sails to provide realtime updates to the client with no ajax polling.

Clone it and follow the instructions to get a better idea of how to use Sails and Angular together.

Solution 3

I have also done sample "boilerplate/example" app for Sails.js + Angular. In my solution those are separated to back- and frontend sides (two servers).

My solution demonstrates also socket communication + live updates within the data between users.

Feel free to try it out. https://github.com/tarlepp/angular-sailsjs-boilerplate

24,596

Author by

rishy

Updated on July 28, 2020

Comments

rishy almost 4 years
I am developing an app that can utilize sails.js for back-end and AngularJS for Front-end. I thought that I'll create an Angular App using Yeoman-angular generator https://github.com/yeoman/generator-angular, and once I am done with the front-end logic I'll create a sails app using,
1. npm install -g sails
2. sails new app
And then I'll transfer all my AngularJS files to the Sails folder.

But the thing is that AngularJS creates creates a folder hierarchy like this https://github.com/rishy/angular-jade-stylus-seed and on running "grunt server" a "dist" folder is created which contains the final production version.

On the other hand, after "sails new app" folder hierarchy for sails app is like.
- 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
So, My questions are:
1. Now, how do I transfer my Angular Files to this sails directory and how should I structure it?
2. Since sails uses "sails lift" to start a server and angular uses "grunt server", which one of those should I use to start the server for my sailsJs + AngularJs app and what about the "dist" folder which is created after AngularJS?
3. What changes will I have to make in the Gruntfile.js, since it should now contain the code from both Angular and Sails?
4. Where should I keep my different views and style files and how should I access those form Angular or from Sails?
I think lot of people are facing this similar problem since AngularJS and SailsJs are all the rage currently. There should be a robust boilerplate to create an AngularJS + SailsJS app, which sadly is missing right now.
rishy about 10 years

Yeoman creates the "dist" folder as the final production version of the app, in this case, the Angular app. So, it contains files similar to the "app" directory of "Angular-Seed". Only difference is that, since "dist" is the production version all the files are already gone through minification. So, I guess it would be more appropriate to develop my front-end logic separately using Yeoman and then finally add the dist directory at the place of "app" into the sails/assets/ directory. In this way I'll also be able to use Jade, Stylus, Coffee and testing using Karma. What's your take on this?
sgress454 about 10 years

If you're creating a single-page app, and you'll just be using Sails as an API backend (that is, not serving a lot of views), then it would be perfectly fine to keep the Angular and Sails projects completely separate, and even to run both Sails and the Angular test server at the same time. Or, if it's not single page but you still want all the Angular generator bells and whistles, you could try symlinking the Angular app directory into the Sails assets directory. My best advice is always just to make your dev environment as similar as possible to what your final deployment will look like!
Luis Lobo Borobia almost 10 years

+1 One question, which version of Angular is needed? Running bower install presents several options
Muhammad Umer almost 10 years

this all sounds too unnecessarily complicated and more work, it's fine if you are ok with it, but for someone like me...it just like welcoming errors, headaches, loss of creativity and motivation.
Oxford212 over 9 years

Seems at the moment angular 1.3 is not supported, pick the one with angular 1.2.x
user755499 almost 9 years

Hi @sgress454 I am still not clear how this (moving/copying angular files ) works ? I mean, if contents are copied from index file to layout.ejs (moving all non script tag to homepage.ejs) then is there a need to keep angular app's index.html file ? After sails server is started what is actually loaded index.html or layout.ejs ?
Jitesh almost 9 years

I think, the index.html can be deleted..it has no meaning once all the contents are copied
BlueSuiter over 5 years

@Ryan can you please add a brief explanation that, how you did this?