CODEWITHSUNDEEP
javascriptangularjsbuild-automation
Weston
Weston

Reputation: 1451

After modularizing an AngularJS app, how do you include the entire project in the index.html without having to type a ton of <script> tags

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.

Upvotes: 0

Views: 194

Answers (3)

kachhalimbu
kachhalimbu

Reputation: 2200

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'
  );
});

Upvotes: 0

MacKentoch
MacKentoch

Reputation: 2456

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.

Upvotes: 0

Austin Greco
Austin Greco

Reputation: 33554

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.

Upvotes: 1

Related Questions