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, <ol> <li>npm install -g sails</li> <li>sails new app</li> </ol> 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. <ul> <li>api <ul> <li>adapters/</li> <li>controllers/</li> <li>models/</li> <li>policies/</li> <li>services/</li> </ul> </li> <li>assets <ul> <li>images/</li> <li>js/</li> <li>styles/</li> <li>favicon.ico</li> <li>robots.txt</li> </ul> </li> <li>config/</li> <li>node_modules/</li> <li>views <ul> <li>home/</li> <li>403.ejs</li> <li>404.ejs</li> <li>500.ejs</li> <li>layout.ejs</li> </ul> </li> <li>Gruntfile.js</li> <li>app.js</li> <li>package.JSON</li> </ul> So, My questions are: <ol> <li>Now, how do I transfer my Angular Files to this sails directory and how should I structure it?</li> <li>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?</li> <li>What changes will I have to make in the Gruntfile.js, since it should now contain the code from both Angular and Sails?</li> <li>Where should I keep my different views and style files and how should I access those form Angular or from Sails?</li> </ol> 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.

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: <ol> <li>Create a new Sails app with <code>sails new myApp</code> </li> <li>Wipe out the contents of the <code>myApp/assets</code> folder</li> <li>Copy the contents of the Angular Seed <code>app</code> folder into <code>myApp/assets</code> </li> <li>Replace the contents of <code>myapp/views/layout.ejs</code> with those of the Angular Seed <code>app/index.html</code> file</li> <li>Cut all of the non-script tag content from the <code>layout.ejs</code> file (everything after the <code><body></code> tag and before the first <code><script></code> tag and use it to replace the contents of <code>myApp/views/homepage.ejs</code> </li> <li>Place <code><%-body%></code> after the <code><body></code> tag in <code>layout.ejs</code> </li> </ol> You can then start the server with <code>sails lift</code> and you'll see the Angular app at <code>http://localhost:1337</code>. 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 <code>grunt server</code>--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 <code>assets</code> 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.

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://github.com/yeoman/generator-angular, and once I am done with the front-end logic I'll create a sails app using,

npm install -g sails
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:

Now, how do I transfer my Angular Files to this sails directory and how should I structure it?
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?
What changes will I have to make in the Gruntfile.js, since it should now contain the code from both Angular and Sails?
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.

What is AngularJS used for?

AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. AngularJS's data binding and dependency injection eliminate much of the code you would otherwise have to write.

Should I use React or angular?

Is Angular better than React? Angular is better than React if your application is enterprise-grade and you need to incorporate complex functionalities like progressive, single-page, and native web apps. However, React specializes in creating UI components and can be used in any application, including single-page apps.

Is sails JS framework?

Sails is the most popular MVC framework for Node. js, designed to emulate the familiar MVC pattern of frameworks like Ruby on Rails, but with support for the requirements of modern apps: data-driven APIs with a scalable, service-oriented architecture.

Why node js is used?

Node. js is primarily used for non-blocking, event-driven servers, due to its single-threaded nature. It's used for traditional web sites and back-end API services, but was designed with real-time, push-based architectures in mind.

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.

AngularJS + sails.js

Tags:

javascript

angularjs

node.js

yeoman

sails.js

rishy

People also ask

1 Answers

sgress454

Recent Activity

Donate For Us

AngularJS + sails.js

Tags:

javascript

angularjs

node.js

yeoman

sails.js

rishy

People also ask

1 Answers

sgress454

Related questions

Recent Activity

Donate For Us