requirejs - Load JavaScript and CSS files in folders in AngularJS -

i have angularjs application , in future, developers in other teams develop modules installed parts of it. defined folder structure below.

 www/   index.html   app.js   modules/     modulesa/ -- copied when module installed       modulea.js       modulea.css       modulea.partial.html     modulesb/ -- copied when module b installed       moduleb.js       moduleb.css       moduleb.partial.html 

now have problem. when user installed module a, how let angularjs (and application) load js , css under folder? there library can load js , css folder can put code in index.html likes <script src="/modules/**/*.js"></script> <link src="/modules/**/*.css"/>

otherwise, have add placesholders in index.html , change content when user installed module, <script src="/app.js"></script> <!-- $$_js_$$ --> <link src="/app.css"/> <!-- $$_css_$$ -->

angularjs doesn't support want, take @ build tools such grunt or gulp let "build" application you. in case, these tools can css files , concatenate them 1 single file. way index.html not have change if ever add new modules.

gruntjs: http://gruntjs.com/

gulpjs: http://gulpjs.com/

personally use gulpjs, since seems faster & found easier configure:

included configuration file below. example, task "styles" compile every css file finds in folders specified, concatenate them, , drop them in distribution folder.

since there initial learning curve on how use these tools, can integrate gulp or grunt @ own pace. let build css files & later expand concatenating js , various other tasks. in opinion, worth learning saves time & effort.

var gulp = require("gulp"); var concat = require("gulp-concat"); var html2js = require("gulp-ng-html2js"); var sass = require("gulp-sass"); var clean = require("gulp-clean"); var streamqueue = require("streamqueue");  var ngdeporder = require("gulp-ng-deporder");  var paths = {     "dist": "../server/staffing/static/",     "vendor": ['vendor/underscore/underscore.js',         'vendor/angular/angular.min.js',         'vendor/angular-route/angular-route.min.js',         'vendor/restangular/dist/restangular.min.js',         'vendor/angular-animate/angular-animate.min.js',         'vendor/angular-bootstrap/ui-bootstrap-0.7.0.min.js',         'vendor/angular-bootstrap/ui-bootstrap-tpls-0.7.0.min.js',         'vendor/angular-ui-router/release/angular-ui-router.min.js',         'vendor/angular-bootstrap-colorpicker/js/bootstrap-colorpicker-module.js',         'vendor/momentjs/min/moment.min.js'],     "scripts": ['app/**/*.js'],     "fonts": ['app-data/fonts/*.*'],     "templates": ['app/**/*.html'],     "styles": ['app/**/*.scss','vendor/angular-bootstrap-colorpicker/css/*.css'] }  gulp.task("watch", function () {     gulp.watch('app/**/*.js', ['scripts']);     gulp.watch('app/**/*.html', ['scripts'])     gulp.watch('app/**/*.scss', ['styles']); })  gulp.task("default", ["clean"], function () {     gulp.start("scripts", "vendor", "styles", "fonts"); })  gulp.task("clean", function () {     return gulp.src(paths.dist, {read: false})         .pipe(clean({force: true})); })  gulp.task("vendor", function () {     gulp.src(paths.vendor)         .pipe(concat("vendor.js"))         .pipe(gulp.dest(paths.dist + "js/")); });  gulp.task("scripts", function () {     var stream = streamqueue({objectmode: true});     stream.queue(gulp.src(paths.scripts)         .pipe(ngdeporder()));     stream.queue(gulp.src(paths.templates)         .pipe(html2js({modulename: "templates"})));     return stream.done()         .pipe(concat("app.js"))         .pipe(gulp.dest(paths.dist + "js/")) });  gulp.task("styles", function () {     gulp.src(paths.styles)         .pipe(sass())         .pipe(concat("staffing.css"))         .pipe(gulp.dest(paths.dist + "css/")) })  gulp.task("fonts", function () {     gulp.src(paths.fonts).         pipe(gulp.dest(paths.dist + "fonts/")) })