In the process of developing an AngularJS module containing reusable directives for various projects within my organization, I currently face the challenge of sharing both the JavaScript code with the directive definitions and the corresponding template views whenever a new project wants to utilize this generic module.
My current setup looks something like this:
var commonWidgets = angular.module('commonWidgets', []);
commonWidgets.directive('commonGrid', function () {
return {
restrict: 'A',
scope: {
options: '='
},
templateUrl: '/views/grid.html',
link: function (scope) {
...
}
};
});
As shown in this example, I need to distribute both common-widgets.js and /views/grid.html to integrate this functionality into another project.
Question: Is there a way to only share the JavaScript code without the templates?
One potential solution that came to mind involves embedding the template directly into the JavaScript code like so:
var commonWidgets = angular.module('commonWidgets', []);
commonWidgets.directive('commonGrid', function () {
return {
restrict: 'A',
scope: {
options: '='
},
template: '<div>A substantial amount of code here</div>',
link: function (scope) {
...
}
};
});
However, consolidating the template within the JavaScript can complicate maintenance efforts. On the other hand, it frees the consumer from managing separate view files.
Is there a method to switch from using templateUrl to inline template while creating a production-ready AngularJS library?