Best IT Recipes

AngularJS + sails.js

I am developing an application that can use sails.js for the back-end and AngularJS for the front-end. I thought that I would create an Angular application using the Yeoman- angular generator https://github.com/yeoman/generator-angular , and as soon as I finished with the front -end logic I would create an application for sails using

  • npm install -g sails
  • sails new app

And then I will transfer all my AngularJS files to the Sails folder.

But the fact is that AngularJS creates a hierarchy of folders, such as https://github.com/rishy/angular-jade-stylus-seed and when you run "grunt server" in the folder "dist", which contains the final production version .

On the other hand, after the folder hierarchy of the sails of the new application for the sails application is similar.

  • api
    • adapters /
    • Controllers /
    • models /
    • policy /
    • 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:

  • Now, how do I transfer Angular files to this sail directory and how to structure it?
  • Since sails use "sails to lift" to start the server, and Angular uses "grunt server", which one should I use to start the server for my sailsJs + AngularJs application, and as for the "dist" folder, is created after AngularJS?
  • What changes should I make to Gruntfile.js, since now it should contain code from both Angular and Sails?
  • Where should I store my different views and stylesheets and how do I access this Angular form or from Sails?

I think many people have to deal with a similar problem, since AngularJS and SailsJs are currently a rage. There must be a powerful template for creating an AngularJS + SailsJS application, which, unfortunately, is currently missing.

+49
javascript angularjs yeoman
Feb 21 '14 at 15:45
source share
5 answers

Since Sails is a pure framework, and Angular is a purely front-end, they can work well together. This may be a bit confusing when you introduce the Angular generator into it, but here are the basic steps if you were to start with Angular Seed and Sails v0.10:

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

Then you can start the server using sails lift and you will see the Angular application at http://localhost:1337 .

I put this on github for reference.

Using this method, you don’t need to do anything with the Gruntfile, and you will never call the grunt server - it is only for testing Angular applications with your test server, which you replace Sails, you can still use the Sailing grunt-sync task, which tracks and synchronizes your front-end assets as they change.

If you really want to use the Yeoman Angular generator, you can try to create the application directly in the assets folder of your Sails application and use the generator commands from this folder. I have not used it before, so I don’t know what the dist folder is for, but it looks like all the node modules it installs support a test web server there (which you don't need again, since you have Sails) and a set of tests (which is always nice). The only problem I see is if you need some tasks in this Gruntfile that Yeoman generates. Sails handles less CSS compilation and minimization (in production mode), but it does nothing with Jade or Stylus, so you'll have to add these tasks to the Sails Gruntfile if you really need them.

+56
Feb 22 '14 at 8:25
source share

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

It also demonstrates how to use socket.io inside Sails to provide real-time updates for the client without polling ajax.

Hide it and follow the instructions to better understand how to use sails and Angular together.

+12
Apr 10 '14 at 2:26
source share

I also made a sample application "templateplate / example" for Sails.js + Angular. In my solution, they are divided into reverse and third parties (two servers).

My solution also demonstrates the connection of sockets + live updates within the data between users.

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

+4
May 29 '15 at 10:32
source share

I have the same use case as yours. I used Yeoman to create a project structure for angularjs. In this situation, my solution is:

  • Use "grunt serve" to create a single-line angularjs application in the mini version, and everything should be in the "dist" folder.

  • In the routes.js project in the sails.js project, remove the configuration code for the views:

    '/': {view: 'homepage'}

  • Delete all files in the sails.js views and assets folder. But please just make sure you don’t need the file in the resource folder before deleting everything.

  • Copy and paste the angularjs reduced site into the resource folder.

  • Launch sails.js (raise the sails) and you can view the angular website on localhost: 1337

Sails.js now also briefly mentioned this method http://sailsjs.org/documentation/concepts/views

0
Aug 16 '15 at 8:06
source share

You must configure the default task to copy the angular dist folder to .tmp

See task configuration in this Sails Angular Project

0
Jul 27 '17 at 12:43 on
source share


More articles:


All Articles