Require templates into app

[mchambaud]

Hey, is it possible to require the generated module in the application?

   angular.module('app', [
       require('angular-cookies'),
       require('angular-animate'),
       require('angular-ui-router'),
       'templates'
   ]);

[javoire]

Yes, just pass the name you specify in the module: 'templates' option https://github.com/javoire/browserify-ng-html2js#b-with-gulp

[mchambaud]

What I meant is to be able to the following instead of what I pasted above.

   angular.module('app', [
       require('angular-cookies'),
       require('angular-animate'),
       require('angular-ui-router'),
       require('templates')
   ]);

[vendethiel]

For anyone looking to do this with browserify on the CLI, it's actually really simple: -t [ browserify-ng-html2js --module templates ]

[javoire]

@mchambaud correct me if I'm wrong (which I might be) but aren't you supposed to do

 angular.module('app', [
       require('angular-cookies').name,
       require('angular-animate').name,
       require('angular-ui-router').name,
       require('templates').name
   ]);

which will be intepreted as

 angular.module('app', [
       'ngCookies',
       'ngAnimate',
       'uiRouter',
       'templates'
   ]);

(with reservation for the module names not being correct because I'm guessing what they're called :)

[mchambaud]

module.exports should export the name, no need to add ".name".

In any case, neither require('templates') or requires('templates').name work.

[vendethiel]

That won't work still (in my experience), because since the templates aren't required, they will not be added to the build by browserify. I had to use require('bulk-require')(__dirname, ['./templates/*.html']) for browserify to pick them up.

[javoire]

So the main concept here is that require is browserifys module loader, and angular.module('app', ['someModule'] ); is angulars module loader.

So basically what you always have to do is

// for browserify
require('angular-cookies');
require('angular-animate');
require('angular-ui-router');
require('./templates/home.html');
require('./templates/footer.html');

// for angular
angular.module('app', [
  'ngCookies',
  'ngAnimate',
  'ui.router',
  'templates' // <-- given you're using module: 'template' option for this transform
]);

First you tell browserify to pick up the module in it's pipeline, and then you tell angular to load the modules, now that they're included in the bundle.

@vendethiel yes exactly :) bulk requiring them seems like a nice way to throw all of the html templates into browserify at once yeah

[javoire]

With the latest update (https://github.com/javoire/browserify-ng-html2js/pull/31) you should be able to do

// for browserify
require('angular-cookies');
require('angular-animate');
require('angular-ui-router');

// for angular
angular.module('app', [
  'ngCookies',
  'ngAnimate',
  'ui.router',
  require('./templates/home.html'),
  require('./templates/footer.html')
]);

since the template modules are exporting their module names (strings)

[vendethiel]

well, with , instead of ; for these requires.

[javoire]

thx, updated :)

[mchambaud]

Ohhhh this is awesome!!! Thanks @javoire

[javoire]

all cred to @Schubidu :)