如何使用 Grails Asset 插件引用静态 HTML rsource？

Posted 2023-05-07

【中文标题】如何使用 Grails Asset 插件引用静态 HTML rsource？

【英文标题】：How do I reference a static HTML rsource using the Grails Asset plugin?

【发布时间】：2014-10-12 23:02:54

【问题描述】：

我正在使用 Grails 2.4.1 和 Grails Asset Pipeline Plugin 版本 1.9.7。

我有一个 javascript 文件（它定义了一个 AngularJS 指令），它需要引用一个静态 html 文件（将用作 AngularJS 指令的模板）。

如何引用资产目录中的 HTML 文件？

项目结构：

grails 应用程序 资产 javascript 指令 hierarchyviewer.js hierarchyviewer.html

使用Angular Template Asset pipeline grails plugin时的项目结构

grails 应用程序 资产 javascript 指令 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 的指令/directivea.html 引用。

使用 Asset Pipeline 插件时如何正确引用模板？

【参考方案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 -> 资产 -> 模板 -> heirarchyViewer -> hierarchyviewertemplate.tpl.html

如果您的模板包含在插件中，请将require_tree 替换为require_full_tree

希望对您有所帮助。

【讨论】：

我明天可以试一试，但我觉得这是我已经做过几次的确切设置。有什么好方法可以知道插件实际上是在拾取模板并将其推送到 $templateCache 中吗？

一个区别是 HierarchyViewer 与 hierarchyViewer 的模块名称......不确定我是否尝试过。我已经为模板名称引用（在指令中的 templateUrl 引用中）和文件名本身尝试了各种驼峰变体。

如果链接正确，您应该在开发模式下的 HTML 中看到如下内容：

hierarchyViewer 与 HierarchyViewer 会有所不同。我认为我没有在文档中明确提到这一点，但会添加它以使其更加明显。

是的，我明天会尝试第一件事，然后告诉你。如果它不起作用，我会尝试获取 $templateCache 中内容的快照，以查看正在推送的内容。

【参考方案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');
);

【讨论】：

我试过使用那个插件，我得到：加载资源失败：服务器响应状态为 404（未找到）localhost:8980/app-name-here/directivea.html 错误：[$compile:tpload]errors.angularjs.org/1.2.21/$compile/tpload?p0=directivea.html

我已经更新了问题以包括我在使用您提到的管道插件时使用的结构和模板参考。

在文档中，示例是模板的路径是/grails-app/assets/templates/my-app/app-section/index.tpl.htm。您在问题中提到，您的模板称为directivea.html。把名字改成directivea.tpl.html有影响吗？

抱歉...文件名是directivea.tpl.html，但根据插件的文档，您只需使用directivea.html 来引用它。我现在正在更新问题以反映这种差异......

从文档中的示例可以看出，在模板目录之后的目录结构反映了模块名称，然后是模板名称。在您的示例中，您有模块名称MyModule 和模板名称directivea，但您的目录结构是grails-app/assets/templates/directivea.tpl.html。应该是grails-app/assets/templates/my-module/directivea.tpl.html。另一件事是，您这样做：templateUrl: 'directives/directivea.html' 这似乎不正确。根据文档，它应该是templateUrl: 'directivea.html'