Include Html Templates In A Bower Component For Angular

I'm making some reusable directives for my angular apps by putting them in a separate bower component. I would like to use a templateUrl for the directives so that I am not forced

Solution 1:

I did resolve this issue. I'm sorry for not posting the answer earlier.

I ended up using grunt-angular-templates

If you are using gulp, there is probably a comparable library.

This was my directory structure, with my html in the templates directory

project
 src
   controllers
   directives
   templates

And this is how I configured my the options for it in my Gruntfile

 grunt.initConfig({
 ...
 ngtemplates: {
   projectName: {
     cwd: 'src',
     src: 'templates/**/*.html',
     dest: 'src/templates/templates.js'
   }
 }

I have another grunt task grunt-contrib-concat to concat all the javascript files within the project. So, the templates get bundled into the final js file.

In the code and tests, you will be able to reference your html files the same way regardless of if you are loading the html or javascript version.

Ex:

angular.module('myModule')
  .directive('myModuleDirective', function() {
    return {
        restrict: 'E',
        templateUrl: 'templates/mainTemplate.html'
    };
});