Rails App to Angular: HAML + Rails Helpers

Question

I'm trying to move my full-stack rails app over to Angular a page at a time. I'm using ui-router (https://github.com/angular-ui/ui-router) and angular-rails-templates (https://github.com/pitr/angular-rails-templates). I assumed the nghaml extension would allow me to continue to use rails helpers such as link_to, paths, etc. in my haml so just copied and pasted my haml page into the template; in an ideal world I would now be at a point where one page was being served client-side and every other page (including the ones it's linked to) were still being served server-side. Instead, I'm getting errors such as:

undefined local variable or method `dashboard_patients_path' for #<Object:0x007fc87865cff0>

and link_to, etc.

I thought this (angularjs with client side haml) would be a solid solution, specifically sharpper's response since it seemed directly applicable.

module CustomHamlEngine
  class HamlTemplate < Tilt::HamlTemplate
    def evaluate(scope, locals, &block)
      scope.class_eval do
        include Rails.application.routes.url_helpers
        include Rails.application.routes.mounted_helpers
        include ActionView::Helpers
      end

     super
    end
  end
end

Rails.application.assets.register_engine '.haml', CustomHamlEngine::HamlTemplate

However, even after restarting the server, no dice.

Thoughts?

My first thought would be make sure this code is bring run with some log statements! :) Other than that Rails could have changed the way they write their engines. I would try to look for some resources on the Tilt engine in Rails today and see if anything stands out. — sharpper, Apr 10 '14 at 22:35

score 6 · Accepted Answer · edited May 23 '17 at 11:52

Got stuck with the same problem and found a solution after investigating angular-rails-templates, attentively reading their documentation and using the solution proposed by sharpper in angularjs with client side haml.

angular-rails-templates needs to recreate a mimeless version of the haml engine. So they extend the classes that are registered with Tilt instead of using the engines that were added to the asset pipelines. Therefore the new CustomHamlEngine that we create and register with the asset pipeline is never used by angular-rails-template. What we need to do instead is to register the engine with Tilt.

Create a file called angular_rails_templates.rb in the config/initializers folder and put this code in it.

# config/initializers/angular_rails_templates.rb

module CustomHamlEngine
  class HamlTemplate < Tilt::HamlTemplate
    def evaluate(scope, locals, &block)
      scope.class_eval do
        include Rails.application.routes.url_helpers
        include Rails.application.routes.mounted_helpers
        include ActionView::Helpers
      end

      super
    end
  end
end

Tilt.register CustomHamlEngine::HamlTemplate, '.haml'

That will override the usual .haml engine with the one we just created. Angular-rails-templates will then process your haml file and it will support the rails helpers as well as the path helpers.

Don't forget to restart the server after including the file.

Rails App to Angular: HAML + Rails Helpers

1 Answers1

Linked