CODEWITHSUNDEEP
ruby-on-railsangularjs
Morgan
Morgan

Reputation: 1449

Angular + .nghaml template: Referencing Precompiled Image Assets

I'm using .nghaml for my templates and using the following gems for Angular integration:

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

My Rail view layouts are name.html.haml and using image_tag within them works fine. On production I can see the images.

In contrast, in my Angular templates (assets/template) with their .nghaml extension I can not use Rails helper image_tag and a direct reference does not work

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

The direct reference works locally, but on production images don't render.

This person (Rails Image assets in Angular Directive and template) had a similar issue, but using 

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

worked locally but not in production. And attempting to use image-url results in the error of undefined method (just as image_tag) because none of the Rails helpers seem to be working in the .nghaml extension.

The images that are working (Rails views with image_tag helpers) are referencing the precompiled assets which have their names changed with the addition of a md5-hash (based on the first linked article), but I'm having issues figuring out how to tell the nghaml templates what the new precompiled assets are called without a Rails helper method.

I ran into this issue with helpers a few months ago (Rails App to Angular: HAML + Rails Helpers) and didn't find a solution, but only recently needed to get images into nghaml templates rather than just creating what I needed with CSS.

I'm currently planning to just move the angular templates back to erb if I can't get this figured out, but if there are alternatives (or solutions) I'm unaware of, I'd love to hear them.

Upvotes: 4

Views: 510

Answers (2)

Whyves
Whyves

Reputation: 511

The solution proposed in the post Rails App to Angular: HAML + Rails Helpers will allow you to use the helpers (including the image_tag helper) in your haml files when generating the client-side html files.

Upvotes: 2

user9903
user9903

Reputation:

One issue: According to the official repo for the angular-rails-template library, the .nghaml extension is no longer supported. You have to rename it to .haml

The bigger issue is that you're using Rails to serve a single-page JS app. There's no need for this, you can serve the site using nginx or Apache and control the caching and do cache busting there (nginx & apache cache busting tutorial)

If you're using Rails for the REST API, it should be de-coupled from your frontend AngularJS app.

If you're trying to do some fancy stuff in the templates aside from the cache busting, you should be doing it in JS and plain HTML. It's weird and strange but AngularJS and other frontend MVC/MVVM frameworks are different beasts compared to Rails and Django and the server-side MVC frameworks.

Upvotes: 0

Related Questions