Last Updated: September 09, 2019
·
5.429K
· tanema

Doing slim templates with angular & rails? Try this.

If you have a directory in your asset pipeline that you want to compile the templates and use them with your angular routes, you can do that using a setup like this.

# app/assets/javascripts/app.js.coffee.erb
window.app = angular.module "website", []
app.config ($routeProvider, $locationProvider) ->
  $locationProvider.html5Mode(true)
  $routeProvider
    .when "/",
      templateUrl: "<%= asset_path("welcome.html") %>"

# config/initializers/slim_assets.rb
Rails.application.assets.register_engine('.slim', Slim::Template)

# config/initializers/asset_helpers.rb
Rails.application.assets.context_class.class_eval do
  include ActionView::Helpers
  include Rails.application.routes.url_helpers
end

# app/assets/template/welcome.html.slim
h3 Welcome!
= image_tag asset_path("logo.png")

5 Responses
Add your response

Would be super interested to see if you could have a follow up tip for testing directives that use slim templates in rails. Nice tip btw. :D

over 1 year ago ·

I have addressed this in another post now https://coderwall.com/p/ddpara?i=1&p=1&q=author%3Atanema&t%5B%5D=tanema Let me know what you think.

over 1 year ago ·

Awesome tip! One thing that tripped me up is that I had to change:

= img_tag asset_path("logo.png")

to

= image_tag asset_path("logo.png")
over 1 year ago ·

One more thing: I also had to rename the coffee file:

app/assets/javascripts/app.js.coffee

to

app/assets/javascripts/app.js.coffee.erb
over 1 year ago ·

Ah yes those were my mistakes I have made the changes to the post. Thanks!

over 1 year ago ·

Have a fresh tip? Share with Coderwall community!

Post
Post a tip
Did you know?

Angular apps often share the page with analytics and payment scripts that are not Angular modules. Those scripts execute on the same origin as the framework.

Security insights from Cside