如何使用Grails Asset插件引用静态HTML资源

Question

我使用的是Grails 2.4.1和Grails资产管道插件1.9.7。

我有一个javascript文件(它定义了一个AngularJS指令)，它需要引用一个静态HTML文件(它将被用作AngularJS指令的模板)。

如何在资产目录中引用HTML文件?

项目结构:

• grails-app
• 资产
  • javascripts
    • 指令
      • hierarchyviewer.js
      • hierarchyviewer.html

使用Angular模板资源管道grails插件时的项目结构

• grails-app
  • 资产
    • javascripts
      • 指令
        • hierarchyviewer.js
    • 模板
      • hierarchyviewer.tpl.html

directivea.js包含:

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

然而

;当我试图加载一个引用该指令的页面时，我得到了一个404的指令/directive .html引用。

如何在使用资产管道插件时正确引用模板?

Answer 1

Angular模板资源管道插件作者在这里。做一些调整，这应该对你有用。

• 插件希望模块名是驼峰式的。
• 插件也从文件名中删除了。tpl，所以你最终会得到一个名为hierarchyviewertemplate.js的文件，在这种情况下
• 确保文件名(不包括扩展名)是唯一的。

关于最后一点，由于The Asset Pipeline插件将忽略assets目录中的父文件夹，因此在以下每个位置中的文件都将导致冲突:

• /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 -> heiirarchyviewer -> hierarchyviewertemplate.tpl.html

如果你的模板包含在一个插件中，将require_tree替换为require_full_tree

希望对你有帮助。

Answer 2

有一个名为angular-template-asset-pipeline的插件。它的本质是，它将把您的。tpl.htm模板在$templateCache。然后你可以像这样使用它(来自文档的例子):

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