CODEWITHSUNDEEP
javascriptangularjs
Bomin
Bomin

Reputation: 1667

How to load angularjs scripts files

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.

Upvotes: 0

Views: 152

Answers (2)

Vikk
Vikk

Reputation: 647

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

Upvotes: 0

koox00
koox00

Reputation: 2731

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 !

Upvotes: 1

Related Questions