Massive Number Of Scripts With Angular I've recently started switching from JQuery to Angular and it's awesome at making my HTML expressive and easy to read but every reusable module I make has its own script which leads to a massive script loading area. I suppose I could closure compile them or something but is there a better way?

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head lang="en"&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Control Page&lt;/title&gt;
    &lt;link rel="stylesheet" href="assets/css/bootstrap.min.css"&gt;
    &lt;link rel="stylesheet" href="assets/css/bootstrap-switch.min.css"&gt;
    &lt;link rel="stylesheet" href="assets/css/bootstrap-theme.css"&gt;
    &lt;link rel="stylesheet" href="assets/css/navbar.css"&gt;
    &lt;link rel="stylesheet" href="assets/css/popup.css"&gt;

    &lt;script src="assets/js/lib/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="assets/js/lib/angular.min.js"&gt;&lt;/script&gt;

    &lt;script src="assets/js/lib/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;script src="assets/js/lib/ui-bootstrap-tpls.min.js"&gt;&lt;/script&gt;
    &lt;script src="assets/js/lib/angular-bootstrap-switch.min.js"&gt;&lt;/script&gt;
    &lt;script src="assets/js/lib/bootstrap-switch.min.js"&gt;&lt;/script&gt;

    &lt;script src="assets/modules/translate-filter.js"&gt;&lt;/script&gt;
    &lt;script src="assets/modules/review-box.js"&gt;&lt;/script&gt;
    &lt;script src="assets/modules/enable-switch.js"&gt;&lt;/script&gt;
    &lt;script src="assets/modules/navbar.js"&gt;&lt;/script&gt;
    &lt;script src="assets/modules/extension-interface.js"&gt;&lt;/script&gt;
    &lt;script src="assets/modules/status-monitor.js"&gt;&lt;/script&gt;
    &lt;script src="assets/modules/state-monitor.js"&gt;&lt;/script&gt;

    &lt;script src="assets/js/control-ui.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body data-ng-app="controlPage"&gt;

&lt;div class="container-fluid" ng-controller="ControlPageCtrl"&gt;
    &lt;extension-navbar&gt;&lt;/extension-navbar&gt;
    &lt;div class="jumbotron"&gt;
        &lt;status-monitor-area&gt;&lt;/status-monitor-area&gt;
        &lt;hr&gt;
        &lt;div&gt;
            &lt;div class="row"&gt;
                &lt;div class="col-xs-8"&gt;
                    &lt;state-message&gt;&lt;/state-message&gt;
                &lt;/div&gt;
                &lt;div class="col-xs-4"&gt;
                    &lt;enable-switch&gt;&lt;/enable-switch&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;state-progress-bar&gt;&lt;/state-progress-bar&gt;
            &lt;div ng-show="ratingStore."&gt;
                &lt;review-request&gt;&lt;/review-request&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
For starters, they will take all your files based on a pattern and "compile" them down to a single file - no more adding lots of script references.  That's just the tip of iceberg.  

I happen to prefer Gulp.  Take a look at the npm packages for gulp.  For what you're trying to achieve, start with gulp-concat and gulp-livereload.

Follow the instructions here to get you started.

Here's an example that uses a watch to keep an eye on file changes, and, when detected, initiates a 'build' tasks, which will the livereload your page (requires the livereload plugin in chrome/firefox/whatever).

You will then only need a reference to the ./public/js/app.js file in your index.html file.

Note the build task uses two different globs, this is to ensure, in the case of AngularJS, that the module definition file is always the first thing in the concatenated file.



var gulp = require('gulp');
var concat = require('gulp-concat');
var livereload = require('gulp-livereload');

gulp.task('build', function() {
 return gulp.src(['src/**/*.module.js', 'src/**/*.js'])
  .pipe(concat('app.js'))
  .pipe(gulp.dest('./public/js'))
  .pipe(livereload());
});

gulp.task('default', ['build'], function() {
 livereload.listen({
    start: true
  });

  gulp.watch('src/**/*.js', ['build']);
});




Like a said, this is just the tip of the iceberg.  There are tons of examples of very powerful workflows using Gulp and Grunt out there.