How do I reference a static HTML rsource using the Grails Asset plugin?

Question

I am using Grails 2.4.1 and the Grails Asset Pipeline Plugin version 1.9.7.

I have a javascript file (it defines an AngularJS directive) which needs to reference a static HTML file (which will be used as the template for the AngularJS Directive).

How do i reference the HTML file within the asset directory?

Project Structure:

• grails-app
• assets
  • javascripts
    • directives
      • hierarchyviewer.js
      • hierarchyviewer.html

Project Structure when using the Angular Template Asset pipeline grails plugin

• grails-app
  • assets
    • javascripts
      • directives
        • hierarchyviewer.js
    • templates
      • hierarchyviewer.tpl.html

directivea.js contains:

angular.module('HierarchyViewer', []).directive('hierarchyviewer',function(){
    return {
        restrict: 'EA',
        scope: {},
        replace: true,
        controller: function ($scope, $http) {
        },
        templateUrl: 'hierarchyviewer.tpl.html'
    }

})

However; when I try to load a page that references the directive, I get a 404 for the directives/directivea.html reference.

How do I reference the template properly when using the Asset Pipeline plugin?

Answer 1

Angular Template Asset Pipeline Plugin author here. A couple tweaks and this should work for you.

• The plugin expects the module names to be in camel case.
• The plugin also removes the .tpl from the file name so you'll end up with a file named hierarchyviewertemplate.js in this case
• Make sure the file names (excluding the extension) are unique.

On that last point, since The Asset Pipeline plugin will ignore the parent folders within the assets directory, a file in each of the following locations would cause a conflict:

• /assets/javascripts/hierarchyviewertemplate.js
• /assets/templates/hierarchyviewertemplate.tpl.html

In terms of the actual code, something like this should work better for you:

//= require_self
//= require_tree /hierarchyViewer

angular.module('hierarchyViewer', []).directive('hierarchyviewer',function(){
    return {
        restrict: 'EA',
        scope: {},
        replace: true,
        controller: function ($scope, $http) {
        },
        templateUrl: 'hierarchyviewertemplate.html'
    }
});

This would assume that your hierarchyviewertemplate.tpl.html file is located at

grails-app -> assets -> templates -> heirarchyViewer -> hierarchyviewertemplate.tpl.html

If your template is contained within a plugin, replace require_tree with require_full_tree

Hope that helps.

Answer 2

there is a plugin called angular-template-asset-pipeline. The essence of it is that it will put your .tpl.htm templates in the $templateCache. Then you could use it like this (example from the docs):

angular.module('myApp.appSection', ['ngRoute'])
.config(function($routeProvider) {
      $routeProvider
          .when('/index', {
              templateUrl: 'index.htm'
          })
          .otherwise({redirectTo: '/index'});
});