How to reference a static HTML source 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 the AngularJS directive) that should reference a static HTML file (which will be used as a template for the AngularJS directive).

How can I link to an HTML file in a resource directory?

Project Structure:

• Grails application
• assets
  • Javascripts
    • directives
      • hierarchyviewer.js
      • hierarchyviewer.html

Project Structure Using Angular Template Template Plugin Plugin

• Grails application
  • assets
    • Javascripts
      • directives
        • hierarchyviewer.js
    • Patterns
      • 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'
    }

})

; , , 404 /directivea.html.

Asset Pipeline?

Answer 1

Angular . , .

• , .
• .tpl , hierarchyviewertemplate.js
• , ( ) .

, Asset Pipeline , :

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

, - :

//= require_self
//= require_tree /hierarchyViewer

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

, hierarchyviewertemplate.tpl.html

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

, require_tree require_full_tree

, .

Answer 2

angular-template-asset-pipeline. , .tpl.htm $templateCache. ( docs):

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