AngularJS + sails.js
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://
-
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/assetsfolder - Copy the contents of the Angular Seed
appfolder intomyApp/assets - Replace the contents of
myapp/views/layout.ejswith those of the Angular Seedapp/index.htmlfile - Cut all of the non-script tag content from the
layout.ejsfile (everything after the<body>tag and before the first<script>tag and use it to replace the contents ofmyApp/views/homepage.ejs - Place
<%-body%>after the<body>tag inlayout.ejs
You can then start the server with
sails liftand you'll see the Angular app athttp://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
assetsfolder 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.讨论(0) - Create a new Sails app with
-
I have got similar use case as yours. I used Yeoman to generate the project structure for angularjs. In this situation, my solution is:
- Use 'grunt serve' to generate the angularjs single page app into minified version and everything should under 'dist' folder.
In the routes.js in sails.js project, remove the configuration code for views:
'/': { view: 'homepage' }
Remove all the files under sails.js views and assets folder. But please just make sure you don't need any file in assets folder before you remove everything.
Copy and paste the minified angularjs website to assets folder.
Start sails.js (sails lift) and you can browse your angular website at localhost:1337
Sails.js now also have briefly mentioned this method http://sailsjs.org/documentation/concepts/views
讨论(0) -
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.
讨论(0) -
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
讨论(0) -
You must configure the default task to copy angular dist folder into .tmp
See the task configuration in this Sails Angular project
讨论(0)
加载中...
- 热议问题