Ask a Question
Advertise on boostr.in
Organizational Research By
Surprising Reserch Topic
structuring a nodejs and angular js app
I'm about to attempt my first Angular JS project and it makes sense to use Node JS for the back end, even though it means learning both Angular and Node from scratch at the same time.
The first thing I'm trying to get my head round is a good file structure. So far my Pure HTML/CSS template has the following directory structure....
( _site is a working directory for PSDs etc)
I found an example directory structure for a Node/Angular app here....
... which suggests the following directory structure
app.js ¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†--> app config
package.json ¬†¬†¬†¬†¬†¬†¬†--> for npm
public/ ¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†--> all of the files to be used in on the client side
¬†¬†css/ ¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†--> css files
¬†¬†¬†¬†app.css ¬†¬†¬†¬†¬†¬†¬†¬†--> default stylesheet
¬†¬†img/ ¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†--> image files
¬†¬†¬†¬†app.js ¬†¬†¬†¬†¬†¬†¬†¬†¬†--> declare top-level app module
¬†¬†¬†¬†controllers.js ¬†--> application controllers
¬†¬†¬†¬†directives.js ¬†¬†--> custom angular directives
¬†¬†¬†¬†filters.js ¬†¬†¬†¬†¬†--> custom angular filters
¬†¬†¬†¬†services.js ¬†¬†¬†¬†--> custom angular services
¬†¬†¬†¬†¬†¬†¬†¬†angular.js ¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†--> the latest angular js
¬†¬†¬†¬†¬†¬†¬†¬†angular.min.js ¬†¬†¬†¬†¬†¬†¬†--> the latest minified angular js
¬†¬†¬†¬†¬†¬†¬†¬†angular-*.js ¬†¬†¬†¬†¬†¬†¬†¬†¬†--> angular add-on modules
¬†¬†¬†¬†¬†¬†¬†¬†version.txt ¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†--> version number
¬†¬†api.js ¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†--> route for serving JSON
¬†¬†index.js ¬†¬†¬†¬†¬†¬†¬†¬†¬†--> route for serving HTML pages and partials
¬†¬†index.jade ¬†¬†¬†¬†¬†¬†¬†--> main page for app
¬†¬†layout.jade ¬†¬†¬†¬†¬†¬†--> doctype, title, head boilerplate
¬†¬†partials/ ¬†¬†¬†¬†¬†¬†¬†¬†--> angular view partials (partial jade templates)
So, this looks quite good to me (except for the fact that I wouldn't use Jade)
I still have the following questions...
I want to keep all front-end and back-end files separate. This solution puts all the front-end files in the public/ directory which kind of makes sense because most need to be public, but does it make sense to put the SASS and _site folders here? I could just keep them there but not upload them when I put them into production but it seems wrong because they shouldn't be public. They also don't belong at root level with all the Back-end stuff.
Wouldn't it be better to load Angular from a CDN?
Given that the server will only need to deliver one template (the main app template) and all other HTML will be constructed on the front-end wouldn't it make more sense to keep the index.html file static, delete the views folder and create a partials/ folder under public/ like the original Angular Seed app does ?
I realize that this is all a matter of opinion and I could technically put them wherever I want but I'm hoping somebody more experienced than me could advise me of the pitfalls of various directory structures.
As you can tell, I'm new to this. Any help would really be appreciated.
Oct 7, 2015
to add a comment.
Related Hot Questions
Government Jobs Opening