AngularJS 模板中的 Grails 资产图像答案

【问题标题】：Grails asset images in AngularJS templatesAngularJS 模板中的 Grails 资产图像
【发布时间】：2015-03-29 17:38:25
【问题描述】：

我正在使用 Grails 2.4.4 和 AngularJS 1.3.15 创建一个简单的应用程序。为了使模板与 Grails 一起使用，我使用了 AngularJS Template Asset-Pipeline Plugin 2.0.7。

我的第一个原型没有使用来自 ngRoute 的任何路由逻辑。现在我想提取部分不断增长的应用程序并将它们放在单独的模板中。这几乎奏效了，但我的图像有问题。以前我使用这样的结构来加载图像作为资产：

<img src="${assetPath(src: 'image.png')}">

这确实有效，因为整个应用程序是一个 .gsp 页面。将代码提取到模板中不再进行此处理，并且无法再加载图像。

我目前的解决方法是：

<img src="../assets/image.png">

显然这种技术有一些缺点。使用相对路径对资产位置进行硬编码可能非常脆弱。我是否错过了一些可以帮助我将 AngularJS 与 Asset Pipeline 合并的好功能或命令？

【问题讨论】：

IMO 停止服务器和客户端模板。选一个。如果您使用 Angular，请尝试将其与您的 Web 服务器断开连接，就像 Android 或 iOS 客户端一样。您现在拥有一个 API 服务器和一个 Angular 应用程序。它会让你的生活变得更轻松。可能不是您想听到的，但在开始使用 Angular 时，双重模板非常普遍。
assetPath 调用是服务器模板的唯一遗物。其他一切都已经是客户端。我只是想找到一种可移植的方式来创建资产链接。
assetPath 会根据环境变化吗？你愿意接受纯 Angular 解决方案吗？

标签： angularjs grails asset-pipeline

【解决方案1】：

我通过在我的 Angularjs 项目中添加一个“AssetService”来“解决”这个问题。

angular.module('myApp.assets')
.service('AssetService', [ function () {

    this.getAssetDir = function() {
        return window.grailsSupport.assetsRoot;
    };

    this.getRootDir = function() {
        return window.grailsSupport.root;
    };
}]);

这需要在您的 Grails 布局文件中添加一些代码......

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title><g:layoutTitle default="MyApp"/></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="${assetPath(src: 'favicon.ico')}" type="image/x-icon">
    <link rel="apple-touch-icon" href="${assetPath(src: 'apple-touch-icon.png')}">
    <link rel="apple-touch-icon" sizes="114x114" href="${assetPath(src: 'apple-touch-icon-retina.png')}">

    <!-- add this to your layout -->
    <g:javascript>
        window.grailsSupport = { 
            assetsRoot : '${ raw(asset.assetPath(src: '')) }',
            root : '${createLink(uri: '/')}' 
        };
    </g:javascript>

    <asset:stylesheet src="application.css"/>
    <asset:javascript src="application.js"/>
    <g:layoutHead/>
</head>

我得到了 window.grailsSupport 代码来回答另一个堆栈溢出 question。

您现在可以使用 AssetService 在您的控制器中为您的 URL 添加前缀...

angular.module('MyApp.profile')
.controller('MyCtrl', [ 'AssetService', '$http', function(AssetService, $http) {

    var self = this;
    self.pathToAnonProfile = AssetService.getAssetDir() + "ppt_Anonymous.jpg";

    $http.get(AssetService.getRootDir() + 'api/v1/users').then(function(response)    {
    ....
    }, function(errResponse) {
    ....
    }); 
}]);

它很可能会得到改进，您仍然需要混合 gsp 和纯 Angular 模板，但它将资产路径保留在一个可以轻松修改的服务中。

【讨论】：

【解决方案2】：

看起来标签和相应的assetPath() 在这方面被破坏了。在模板中呈现时，它们似乎不尊重 config.groovy 中的 serverURL 设置或正确计算基本路径。

我能够使用 createLink() 标签生成我的路径，以一种不那么脆弱的方式解决这个问题。它修复了资产控制器的名称，但我认为他们不太可能更改它。

在我的例子中，我在 AJAX 回调中解析了一些标志图像。

<img src='${createLink(controller: "assets", action: "flags/16/US.png")}' />

希望这对你也有用。

【讨论】：