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

问题

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?

回答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.

回答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'});
});

来源：https://stackoverflow.com/questions/25390307/how-do-i-reference-a-static-html-rsource-using-the-grails-asset-plugin

标签

javascript

angularjs

grails

asset-pipeline