How to load angularjs scripts files

Question

I have an angularjs application, and there are a bunch of controllers, services and directives. Let me say they are controller.js, service.js and directive.js, but the truth is there are many more js files than three. To reduce the http request, I'm combining those js files into one, let me say it's app.js. So my index.html looks like

<html lang="en">
<body>
    <div data-ng-view></div>
    <script src="app.js"></script>
</body>
</html>

However, in my development environment, I want to debug separated files not the combined one. A modified index.html gives the capability.

<html lang="en">
<body>
    <div data-ng-view></div>
    <script src="controller.js"></script>
    <script src="service.js"></script>
    <script src="directive.js"></script>
</body>
</html>

However, I don't want to change the index.html. Is it possible to define something like:

require('controller.js');
require('service.js');
require('directive.js');

in my app.js. I've done some search, and the results show there's a way using angularjs and requirejs together, however, it needs me to re-define my controllers and services in requirejs way. It takes a lot of effort in my case. And, I don't need to implement the dynamically loading since in production environment, there's just one javascript file that needs to be downloaded.

how do you concat the js files? you can create sourcemaps so even if you have one file , chrome lets say, knows which file that line of code belongs to ;) html5rocks.com/en/tutorials/developertools/sourcemaps — koox00
– koox00, Commented Jan 7, 2016 at 15:30
Looks like it's for production debug, but what I want is, working with my version control, in my IDE, a save action can let me see my application change. I don't want to combine the files and generate the sourcemap again. — Bomin
– Bomin, Commented Jan 7, 2016 at 15:45

koox00 · Accepted Answer · 2016-01-07 15:57:11Z

A very nice solution is to use sourcemaps. so even though you have one file, the browser knows the initial file! Read more html5rocks.

Also I would strongly advise you to use a javascript task runner/build system for these kind of jobs, like grunt or gulp.

To concatenate and create the sourcemaps with gulp is as simple as:

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

gulp.task('javascript', function() {
  return gulp.src('src/**/*.js')
    .pipe(sourcemaps.init())
      .pipe(concat('all.js'))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('dist'));
});

A second option is this plugin gulp-preprocess where you can set up different env variables let's say dev, production . And depending on the task load either the concatenated file or each one individually.

Sorry for providing solution based on external plugins but I think they can save you lots of time !

Vikk · Accepted Answer · 2016-01-07 16:28:24Z

0

If you want to keep the files separate for testing and debugging, but combine them for production, I'd recommend a build system like Grunt.js or my personal favorite, Gulp.js. Using these automated build tools, you could have it create a task where it will create your project directory, combine, minify, and mangle the JS files and generate maps that allow dev tools to reference the original files. This can do wonders for your workflow. This does require Node.js, so you will have to install that as well. It's still a good amount of effort, but I'd think it would be better than rewriting all your code.

An example build file for your specific case might look like:

//this(my-js) will grab all js file in the js directory, combine, minify, mangle, 
//rename and create sourcemaps. it also has a dependency(js-libs) to handle 
//your libraries first.
gulp.task('my-js', ['js-libs'], function() {
return gulp.src([
        'src/js/*.js',
    ])
    .pipe(plumber())
    .pipe(sourcemaps.init())
    .pipe(concat('app.min.js'))
    .pipe(uglify())
    .pipe(sourcemaps.write('maps'))
    .pipe(gulp.dest('build/js'));
});

//this task will run the js task and then start a task that watches the files for 
//changes and reruns the my-js task anytime something changes
gulp.task('default', ['my-js'], function () {
    gulp.watch('src/js/*.js', ['my-js']);
});

Now this is just an example I came up with off the top of my head. Untested. Once es6 comes out we'll have access to import 'somefile'. Also, keep in mind that when http/2 is fully implemented, we'll have multiplexing, which will allow for multiple file requests in a single connection: https://http2.github.io/faq/#why-is-http2-multiplexed

answered Jan 7, 2016 at 16:28

Vikk

6477 silver badges17 bronze badges

4 Comments

Bomin Over a year ago

By the way, a related question. I'm launching the client code by grunt task, is there any way letting me configure which server the code to connect?

Vikk Over a year ago

If I understand you correctly, you are using Grunt to launch some .js file that starts a node server, and would like to be able to easily switch between different servers? I would recommend using command line arguments. You would be able to do something like grunt --target=option1. If I am correct you can do this with grunt.option.

Bomin Over a year ago

Thanks. I'll give it a try.

Bomin Over a year ago

I'm using grunt instead of gulp. A problem of this solution is when there are lot of files, it could take a long time to get the file minified js, isn't it?

Collectives™ on Stack Overflow

How to load angularjs scripts files

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related