angularjs, browserify + underscore

Question

I have something like below on my angularjs app that works with browserify + gulp.

require('angular');
require('angular-resource');
require('angular-xeditable');
require('angular-spinner');

var app = angular.module('itembase', [
     require('angular-ui-router'),
    'ngResource',
    'xeditable',
    'angularSpinner'
]);

My question is on how to integrate underscore library into this environment.
I tried a few ways like, putting require('underscore'); above var _ = require('underscore');, but it just doesn't seem to work.
The files are in the code but really visible in angularjs app.

gion_13 · Accepted Answer · 2014-10-13 19:42:04Z

1

First of all underscore is not an angular module.
The solution would be to load underscore (with browserfy: require('underscore')) and then create a factory that returns underscore and makes it injectable in other angular components:

angular.module('itembase')
    .factory('_', function($window) {
        return $window._;
    });

After this, you only need to inject it in your component, as you do for any other:

angular.module('itembase')
    .controller('MyController', function(_) {
        _.each([1,2,3,4], function() {
            console.log('using underscore!!!');
        });
    });

The beauty of this approach is that your dependency is quite decoupled from the code and it is easy to test it or to change it without having to rewrite stuff later.

For example, if at the end of your project you realize that you use underscore only for iterating over arrays, you could reimplement your _ factory like:

angular.module('itembase')
    .factory('_', function($window) {
        return {
            each: function(el, fn) {
                for(var i = 0; i < el.length; i++) {
                    fn(el[i], i, el);
                }
            }
        };
    });

edited Oct 13, 2014 at 19:42

answered Oct 13, 2014 at 17:12

gion_13

41.5k10 gold badges99 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

z.a. Over a year ago

sounds doable, i will give it a shot.

fred Over a year ago

@gion_13 I'm trying to implement this answer but when creating the factory, on line 3, $window._ can't be reached. Is there something else that needs to be done? E.g. doesn't the browserified output file have to be added somewhere?

gion_13 Over a year ago

@fred in order for ` $window._` to be accessible you need to first load underscore (that defines window._) and after that to execute your factory

OMGPOP Over a year ago

underscore not found in window._

gion_13 Over a year ago

I suspect that you are using some kind of js module loader (like require.js) that tells underscore to not pin itself as a global variable. If you are using, or the project you are on uses or at least defines the define function, underscore will use that function to load itself into your app as a module, thus not being available on window. You can check it out at the bottom of the source file: underscorejs.org/underscore.js

Collectives™ on Stack Overflow

angularjs, browserify + underscore

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related