Load JavaScript and CSS files in folders in Angula

Question

I have an AngularJS application and in the future, some developers in other teams will develop modules that will be installed as parts of it. So I defined the folder structure as below.

www/
  index.html
  app.js
  modules/
    modulesA/ -- will be copied when module A was installed
      moduleA.js
      moduleA.css
      moduleA.partial.html
    modulesB/ -- will be copied when module B was installed
      moduleB.js
      moduleB.css
      moduleB.partial.html

Now I have a problem. When user installed module A, how to let AngularJS (and the application) load JS and CSS under its folder? Is there any library can load JS and CSS by folder so that I can put the code in index.html likes <script src="/modules/**/*.js"></script> <link src="/modules/**/*.css"/>

Otherwise, I have to add some placesholders in index.html and change the content when user installed a module, something like <script src="/app.js"></script> <!-- $$_JS_$$ --> <link src="/app.css"/> <!-- $$_CSS_$$ -->

Answer 1

AngularJS doesn't support what you want, but you could take a look at build tools such as Grunt or Gulp that let you "build" your application for you. In your case, these tools can look for CSS files and concatenate them into one single file. This way your index.html does not have to change if you ever add new modules.

GruntJS: http://gruntjs.com/

GulpJS: http://gulpjs.com/

Personally I use GulpJS, since it seems to be much faster & I found it easier to configure:

Included my configuration file below. For example, the task "styles" will compile every css file it finds in the folders I specified, concatenate them, and drop them in the distribution folder.

Since there is an initial learning curve on how to use these tools, you can always integrate gulp or grunt at your own pace. For now you could let it build your css files & later expand it by concatenating JS as well and do various other tasks. In my opinion, its worth learning as it saves you so much 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/"))
})

Answer 2

Check out the angular generator for Slush, it does what I think you want using gulp-bower-files and gulp-inject. You specify your app dependencies using bower, and these are collected and injected by gulp using gulp-inject, which then injects in your index.html the proper link/src/style tags that look very much like your own examples above. Modules' JS and CSS is also collected, minimized, concatenated and injected as well. It also compiles partials and injects those into $templateCache.

I have used it to automatically include dependencies from sub-folder modules/views using a project layout similar to yours.

Note that all your vendor dependencies will need to be bower packages that specify their dist files using the 'main' attribute in bower.json. Some packages do not do this properly, but it's easy to fork the package and add them yourself then point bower at your updated repo.