在对AngularJS应用进行模块化之后，如何将整个项目包含在index.html中，而不必键入很多<script> tags

Question

I've been learning Angular for awhile now and am looking into the best ways to modularize the application. I think my understanding of that is going pretty well, but I've looked around for awhile and can't seem to get a good answer as to how all of these .js files get included inside of the index.html without just manually typing out a bunch of tags. I've been looking into Grunt/Gulp and get how those are combining the entire app into one .js file, but for development I'm guessing you don't want to have to re-run grunt or gulp every time you want to update the app.

Answer 1

There are many different options: gulp, grunt, or webpack seem to be the most popular. I tend to use webpack the most these days.

A good setup will typically run a local node server, which will refresh the browser automatically every time you make a change to a file.

There are many yeoman generators that will set this all up for you, or you can find simple examples on github.

Answer 2

The basic idea is to

1. concatenate all your js files (in proper order so the module definitions go before controllers/services)
2. minify if for production
3. copy to a fixed path
4. include this single js file in your html
5. during development have your grunt/gulp script watch for changes in js files and re-run the above steps so you don't have to run the grunt/gulp task manually.

Now if you are using gulp here is how you would typically handle above steps

gulp.task('process-js', function () {
  return gulp.src(jsFiles, {base: './'})
    .pipe(gulpif(isProd, concat('all.min.js'), concat('all.js')))
    .pipe(gulpif(isProd, uglify({mangle: true, preserveComments:    'some'})))
    .pipe(gulp.dest(deployFolder + '/static/js'))
});

where jsFiles is an array of files/folders that contain your angular app js files

var jsFiles = [
'!static/js/**/*.js',
'!static/js/plugin/**/*.*',
'app/index/**/*module.js',
'app/index/**/*config.js',
'app/index/**/*ctrl.js'
];

Note: use ! prefix to exclude certain files/folders from processing.

isProd is just a flag that indicates whether you are preparing for production or development.

During development I also use BrowserSync to watch any changes to my js files and re-run the gulp task to prepare all.js . It also refreshes the page in browser automatically.

gulp.task('run', function () {
browserSync({
    server: {
        baseDir: deployFolder
    },
    open: true,
    browser: ['google chrome'],
    files: deployFolder + '/**/*',
    watchOptions: {
        debounceDelay: 2000
    }
});
gulp.watch(jsFiles, ['process-js']);

});
gulp.task('default', function () {
  runSequence(
    'clean',
    'run'
  );
});

Answer 3

Gulp/Grunt to concat all your angular files .

Create 2 tasks :

• a dev build task
  • concat to one file BUT don't uglify .
• a distribution/production task which is the same as dev one but this one uglify the concatenated file .