Adding templates to Angular's templateCache with Rails.
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


Gem Version Build Status

RailsTemplateCache lets you add your templates to Angular's $templateCache, preventing your app from making a request everytime it needs to fetch a template.

It was inspired on pitr's angular-rails-templates, which currently works with Sprockets 2. This version is Sprockets 2 and 3 compatible. It also has no known issues with the sprockets-es6 gem.


First add it to your Gemfile:

gem "rails-template-cache"

You'll need to require rails-template-cache in your application.js file. Make sure you do it before requiring your app.

//= require angular
//= require rails-template-cache/rails-template-cache
//= require ./app/app
//= require_tree ./app

Finally, add rails-template-cache as a dependency in your module.

angular.module('myApp', ['rails-template-cache']);

You can now either refer to your templates via templateUrl:

  // ...
  templateUrl: 'path/to/template.html',
  // ...

Or via ng-include.

<div ng-include="'path/to/template.html'"></div>

Note that this path is based on the value provided in config.rails_template_cache.templates_path (see configuration). Always add .htmlto the file name.

Template Generation

Currently, the templates are being generated according to the file extension and only Tilt templates are supported.

According to the file extension, the corresponding Tilt template will be used to generate an HTML file.

Here you can find a list of the generated files:

Filename Generated file
templates/file.html.erb templates/file.html
templates/file.slim templates/file.html
more_templates/file.html more_templates/file.html

Multiple extensions (file.html.slim.erb) are not supported, as will generate a .html file.

Namespacing and collisions

As you can see in the previous examples, you have to be careful with the names you give to your files, since both a file.slim and a file.html.erb will generate a file.html and one of them will be overridden.

Unlike pitr's version, there is no danger in having a templates/user.js and a templates/user.slim file, since the second will be managed by RailsTemplateCache and not by Sprockets. However, this also means that when you add a new template, you have to restart your server (see the issues section).


There are a few configurations available for its behavior. Place your changes inside config/application.rb.

Default values:

RailsTemplateCache.setup do |config|
  config.templates_path = File.join( ['app', 'assets', 'javascripts'] )
  config.extensions = %w(erb haml html slim)
  config.compress_html = false
  config.prepend_client_path = ''

Templates Path

Defines the base path to where your templates will be placed.

Defaults to app/assets/javascripts.

Example: if you have your Angular app in app/assets/javascripts/app and don't change the default value, you will have to set templateUrl: app/file.html. If you change the value to app/assets/javascripts/app, setting templateUrl: file.html will do.


RailsTemplateCache looks for files with the given extensions inside the templates_path. You can define other extensions to look for, or even remove unused extensions. Right now, only Tilt templates are supported.

Defaults to ['erb', 'haml', 'html', 'slim'].

HTML Compressor

You can alter the compress_html option to allow the use of the htmlcompressor gem. If you do this, add the following to your Gemfile:

gem "htmlcompressor"

Defaults to false.

Note that the gem is still in active development and being ported, so beware of this use.

Prepend Client Path

If you are updating an existing application, you might need to change the starting path that angular receives so it will work with your existing templateUrl settings.

Defaults to empty string, so nothing will automatically be prepended.

Known Issues

Need for a server restart after adding a new file

Right now, since RailsTemplateCache is responsible for managing the templates, instead of Sprockets, you have to restart your server if you add a new file. This is an issue that we are trying to address and a fix is in the roadmap.


  • Allow adding new templates without restarting the server.
  • Allow non-Tilt, custom templates.
  • Allow htmlcompressor options.