#AngularJS templates and #rails with eager loading -- prefill the AngularJS $templateCache. Inspired by @minhajuddin -- http://minhajuddin.com/2013/04/28/angularjs-templates-and-rails-with-eager-loading

app.js.coffee

# /code/railsapp/app/assets/javascripts/thing/app.js.coffee
#= require angular/templates
angular.module("thing", ["app.templates"]).value("appName", "thing")

conventions.md

AngularJS app JavaScript keyed by app name thing

/code/railsapp/app/assets/javascripts/thing/

AngularJS app templates keyed by app name thing

/code/railsapp/app/assets/templates/thing/

Shared AngularJS modules

/code/railsapp/lib/assets/javascripts/angular/

templates.js.coffee.erb

<%
# /code/railsapp/lib/assets/javascripts/angular/templates.js.coffee.erb
template_cache = []
# Prefill templateCache with latest templates
if Rails.env.production? || Rails.env.staging?
  Dir.glob(Rails.root.join("app", "assets", "templates", "**", "*.haml")).each do |f|
    pathname = Pathname(f)
    template = {}
    # /code/railsapp/app/assets/templates/thing -> assets/thing
    template[:dirname] = pathname.dirname.sub(Rails.root.join("app", "assets", "templates").to_s, "assets")
    # /code/railsapp/app/assets/templates/thing/page.html.haml -> page.html
    template[:basename] = pathname.basename(".haml")
    # ["/", "assets/thing", "page.html"] -> /assets/thing/page.html
    template[:path] = File.join("", template[:dirname], template[:basename])
    # Render HAML to HTML
    template[:markup] = Haml::Engine.new(pathname.read).render
    template_cache << template
  end
end
%>
angular.module("app.templates", []).run(["$templateCache", "appName", ($templateCache, appName) ->
    templates = [
      <% template_cache.each do |template| %>
        path: "<%= template[:path] %>"
        markup: """
                <%= template[:markup] %>
                """
    ,
      <% end %>
    ]

    appPath = "<%= File.join("", "assets", "") %>" + appName
    # Only prefill the cache for the current app
    $templateCache.put(template.path, template.markup) for template in templates when template.path.indexOf(appPath) == 0
  ])

If you've arrived here from: http://minhajuddin.com/2013/04/28/angularjs-templates-and-rails-with-eager-loading and if you want templates.js.erb to reload when /angular/directives/some_directive_template.html changes then you can add this https://gist.github.com/edgahan/7023047 to config/initializers/sprockets.rb

And add templates.js to the precompile asset array in application.rb, and on my layout/application.html file I have something along the lines of

<script src="application.js"> <script src="templates.js"> Then within templates.js.erb add //= depend_on_tree ./angular/directives/

I changed the HAML rendering part with ERB renderer.

# Render ERB to HTML
template[:markup] = ERB.new(pathname.read, nil, nil, 'tmpl').result(binding)

And it worked for my ERB templates :)

Our app is just a single app, so the appName references were not needed.

Additionally, as credited elsewhere, you need depend_on(f) to keep the cache changing when your templates change:

<%
template_cache = []
# Pre-fill templateCache with latest templates for all environments
if Rails.env.production? || Rails.env.staging? || Rails.env.development?
  Dir.glob(Rails.root.join("app", "assets", "templates", "**", "*.haml")).each do |f|
    depend_on(f)
    pathname = Pathname(f)
    template = {}
    # /code/railsapp/app/assets/templates/thing -> assets/thing
    template[:dirname] = pathname.dirname.sub(Rails.root.join("app", "assets", "templates").to_s, "assets")
    # /code/railsapp/app/assets/templates/thing/page.html.haml -> page.html
    template[:basename] = pathname.basename(".haml")
    # ["/", "assets/thing", "page.html"] -> /assets/thing/page.html
    template[:path] = File.join("", template[:dirname], template[:basename])
    # Render HAML to HTML
    template[:markup] = Haml::Engine.new(pathname.read).render
    template_cache << template
  end
end
%>
angular.module('spokenvote.templates', []).run(['$templateCache', ($templateCache) ->
    templates = [
        <% template_cache.each do |template| %>
        path: "<%= template[:path] %>"
        markup: """
                <%= template[:markup] %>
                """
    ,
        <% end %>
    ]

    # Pre-fill the Angular cache
    $templateCache.put(template.path, template.markup) for template in templates
])

Finally, I'd love to see an example of this logic moved into a helper method :-)