How to share AngularJS directives without the need to send HTML code

Question

I'm creating an AngularJS module which contains some directives that will be reused in other projects within my organization. Currently, when some project needs to use this generic module, I need to send two things: the javascript with the AngularJS code where all the directives are created and all the template views that my directives use.

My current structure is like the following:

var commonWidgets = angular.module('commonWidgets', []);

commonWidgets.directive('commonGrid', function () {
    return {
        restrict: 'A',
        scope: {
            options: '='
        },
        templateUrl: '/views/grid.html',
        link: function (scope) {
           ...
        }

    };
});

In this example I have to share common-widgets.js and /views/grid.html with the other project.

Question: Is there a way that I can send only the javascript code?

One possible solution that I tought would be declaring my javascript code like the following:

var commonWidgets = angular.module('commonWidgets', []);

commonWidgets.directive('commonGrid', function () {
    return {
        restrict: 'A',
        scope: {
            options: '='
        },
        template: '<div>A relative big code goes here</div>',
        link: function (scope) {
           ...
        }

    };
});

The issue is that when I have the template in the Javascript code, it is difficult to maintain. In the other hand, the consumer of this library does not need to worry about the views.

Is there a way that I can change templateUrl to template while building a production-ready AngularJS library?

Krzysztof Safjanowski · Accepted Answer · 2014-07-30 16:59:59Z

4

First option

You can use $templateCache service and

commonWidgets.run(function($templateCache) {
  $templateCache.put('/views/grid.html', 'This is the content of the template');
});

as long as commonWidgets is the name for module

Second option

You can use grunt-angular-templates and generate $templateCache from existing templates.

Some combination of first and second possibility will be the best for you.

ngtemplates task

Part of my Gruntfile, task ngtemplates with is called upon build process

ngtemplates: {
      app: {
        cwd: 'app',
        src: 'views/**/*.html', // all subdirectories
        dest: '.tmp/templates.js',
        options: {
          htmlmin: '<%= htmlmin.dist.options %>',
          usemin: 'scripts/modules.js', // append .tmp/tempaltes to scripts/modules.js file
          module: appName // global appName from Gruntfile config section
        }
      }
    }

edited Jul 30, 2014 at 16:59

answered Jul 30, 2014 at 1:19

Krzysztof Safjanowski

7,4483 gold badges38 silver badges50 bronze badges

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

Comments

Scott Rippey · Accepted Answer · 2014-07-30 01:29:24Z

1

The best way is to use Grunt to build your HTML into a single JS file.

Grunt has a plugin, grunt-angular-templates that converts all your HTML templates into a JavaScript file and registers them in Angular, so that you don't have to change any code.

Then, you can simply distribute your generated JS instead of your HTML files.

answered Jul 30, 2014 at 1:29

Scott Rippey

15.8k5 gold badges73 silver badges88 bronze badges

Collectives™ on Stack Overflow

How to share AngularJS directives without the need to send HTML code

2 Answers 2

First option

Second option

ngtemplates task

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

First option

Second option

ngtemplates task

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related