Angularjs loads the templates used through the [ng-include] (http://docs.angularjs.org/api/ng.directive:ngInclude) directive on the fly. This might cause a lot of requests to be made to your server which is not a good thing.
This solution allows you to load all your templates in one go and it will actually shove all your templates into your final application.js file.
GOTCHA: If you use this approach you will have to change this file whenever a template changes in development, if you don’t it won’t recompile this file which will cause your app to use old templates. This happens only in development and it’s a pain, I don’t know how to solve it yet. Anyone who knows can help me out here :)
Steven Harman has shared a solution which uses
depend_on, I have amended my script to use it.
This loads all the templates from your
/app/assets/templates directories which have an extension
.haml. And you can use templates just using their filename without the haml extension. e.g. a template called
app/assets/templates/filter.html.haml can be included using
Make sure you have
//= require ./templates in your
application.js and that you include
'templates' as a dependency in your angular module
AA.root = angular.module('root', [.., 'templates',..])