7

I started using the Mean JS boilerplate (ref website) and would like to know where the recommended place to include public custom javascript, jQuery files (ex. FacebookSDK, jQuery animations,...) .

I'm assuming it's going to be somewhere in the public folder. The default structure is as follows : enter image description here

Should it go in modules or lib folder? Can you give more guidelines on what the function of each folder is? Any guidelines?

BassMHL
  • 8,523
  • 9
  • 50
  • 67
  • Have you found a better answer? – Leon Gaban Apr 16 '15 at 23:41
  • I needed to research it more. I definately like your folder structure. The only issue is that the MeanJS Boilerplate has a much more granular structure. Each module (or component in your structure) has its own routes file, config file and even css/ and img/ folder. I can't get my head around this logic, but it's probably worth opening another question – BassMHL Apr 17 '15 at 03:03
  • 1
    Oh yeah, I've tried both MeanJS and MeanIO, and just like other projects I download with Yoeman, I eventually remove most of what's there and make my own structure. Eventually maybe I'll post my own Yoeman build, so I download what I like working with, gulp setup the way I like it, SASS files and an Angular app starter :) I find its best to work with what you feels is the best in the end. Keeps things light too... – Leon Gaban Apr 17 '15 at 04:36
  • @StephLhm I am looking to know the exact same thing, what did you settle with? thanks – andy mccullough Apr 25 '15 at 10:06

1 Answers1

3

This is a great article on Angular app folder structure: https://scotch.io/tutorials/angularjs-best-practices-directory-structure

To answer your question about stuff like jQuery / bootstrap.js I would put them into a libs folder.

I use this methodology in all my apps now. For your Angular files the old way / way for small apps would probably have been this:

app/
----- controllers/
---------- mainController.js
---------- otherController.js
----- directives/
---------- mainDirective.js
---------- otherDirective.js
----- services/
---------- userService.js
---------- itemService.js
----- js/
---------- bootstrap.js
---------- jquery.js
----- app.js
views/
----- mainView.html
----- otherView.html
----- index.html

Better more efficient way (more descriptive as well):

app/
----- shared/   // acts as reusable components or partials of our site
---------- sidebar/
--------------- sidebarDirective.js
--------------- sidebarView.html
---------- article/
--------------- articleDirective.js
--------------- articleView.html
----- components/   // each component is treated as a mini Angular app
---------- home/
--------------- homeController.js
--------------- homeService.js
--------------- homeView.html
---------- blog/
--------------- blogController.js
--------------- blogService.js
--------------- blogView.html
----- app.module.js
----- app.routes.js
assets/
----- img/      // Images and icons for your app
----- css/      // All styles and style related files (SCSS or LESS files)
----- js/       // JavaScript files written for your app that are not for angular
----- libs/     // Third-party libraries such as jQuery, Moment, Underscore, etc.
index.html

What I'm using in my current project:
enter image description here

Leon Gaban
  • 36,509
  • 115
  • 332
  • 529