angular-nvd3 and Browserify

Question

How can I get angular-nvd3 to work with Browserify? I install via npm install angular-nvd3 then use the following to create my module.

require('angular').module('myApp', [require('angular-nvd3')]);

My controller looks like

require('angular')
  .module('myApp')
  .controller('MyCtrl', function() {
    var ctrl = this;

    ctrl.nvd3Options = {
        chart: {
            type: 'discreteBarChart',
            height: 450,
            margin : {
                top: 20,
                right: 20,
                bottom: 60,
                left: 55
            },
            // ...other options from demo...
        }
    };

    ctrl.nvd3Data = [{
        key: "Cumulative Return",
        values: [
            { "label" : "A" , "value" : -29.765957771107 },
            // ...other data from demo...
        ]
    }];
  });

And my HTML looks like

<div ng-app="myApp" ng-controller="MyCtrl as ctrl">
  <nvd3 options='ctrl.nvd3Options' data='ctrl.nvd3Data'></nvd3>
</div>

But I get the error ReferenceError: nv is not defined @ angular-nvd3.js:250 (using v1.0.5).

I would think that installing and requiring angular-nvd3 would handle all the dependencies (i.e. nvd3 and d3). But these dependencies aren't being handled.

Current Workaround

To get around this, I explicitly install d3 and nvd3 and <script> them in my HTML ;( But that just defeats the purpose.

Answer 1

I found a better method. Add

global.d3 = require('d3'); // nvd3 assumes that d3 is global
require('nvd3');

wherever you define your module and make sure to add these packages to your package.json dependencies.

I then just Browserify in the usual way (gulp in my case).