Angular + .nghaml 模板：引用预编译的图像资产

Posted 2023-03-29

【中文标题】Angular + .nghaml 模板：引用预编译的图像资产

【英文标题】：Angular + .nghaml template: Referencing Precompiled Image Assets

【发布时间】：2014-07-29 05:43:29

【问题描述】：

我将 .nghaml 用于我的模板并使用以下 gem 进行 Angular 集成：

gem 'angularjs-rails'
gem 'angular-rails-templates'

我的 Rail 视图布局是 name.html.haml，在其中使用 image_tag 效果很好。在生产中，我可以看到图像。

相比之下，在我的带有 .nghaml 扩展名的 Angular 模板（资产/模板）中，我不能使用 Rails 帮助程序 image_tag 并且直接引用不起作用

%image(src="assets/sample_image.png")

直接引用在本地工作，但在生产图像上不渲染。

此人 (Rails Image assets in Angular Directive and template) 也有类似的问题，但使用的是

%img(ng-src='assets/sample_image.png') 

在本地工作，但不在生产中。并且尝试使用 image-url 会导致未定义方法的错误（就像 image_tag 一样），因为似乎没有一个 Rails 助手在 .nghaml 扩展中工作。

正在工作的图像（带有 image_tag 助手的 Rails 视图）正在引用预编译的资产，这些资产的名称随着 md5 哈希的添加而改变（基于第一篇链接的文章），但我在弄清楚在没有 Rails 辅助方法的情况下，如何告诉 nghaml 模板调用了哪些新的预编译资产。

几个月前，我在帮助者 (Rails App to Angular: HAML + Rails Helpers) 中遇到了这个问题，但没有找到解决方案，但直到最近才需要将图像放入 nghaml 模板中，而不仅仅是使用 CSS 创建我需要的东西。

如果我无法弄清楚这一点，我目前正计划将角度模板移回 erb，但如果有我不知道的替代方案（或解决方案），我很想听听。

【参考方案1】：

Rails App to Angular: HAML + Rails Helpers 帖子中提出的解决方案将允许您在生成客户端 html 文件时在 haml 文件中使用帮助程序（包括 image_tag 帮助程序）。

【参考方案2】：

一个问题：根据 angular-rails-template 库的官方 repo，the .nghaml extension is no longer supported。您必须将其重命名为.haml

更大的问题是您使用 Rails 来提供单页 JS 应用程序。不需要这个，您可以使用 nginx 或 Apache 为站点提供服务并控制缓存并在那里进行缓存清除 (nginx & apache cache busting tutorial)

如果您将 Rails 用于 REST API，则应将其与您的前端 AngularJS 应用程序分离。

如果你想在模板中做一些花哨的东西，除了缓存破坏，你应该在 JS 和纯 HTML 中做。这很奇怪，但与 Rails 和 Django 以及服务器端 MVC 框架相比，AngularJS 和其他前端 MVC/MVVM 框架是不同的野兽。