You probably find yourself creating small html files for each view or directive (pages and widgets) in your application. This is good because it makes your application more maintainable by breaking things into individual components.
However, this can become a bottleneck when running the application in production. Imagine an application made of hundreds of different views and directives. In this scenario, when the application request a new template, AngularJS will check its $templateCache to check if the template was already fetched, if not it will download the template and put it on the cache. This is an optimization to prevent downloading the same template multiple times.
When the application is initialized the $templateCache is empty, it also happens when the user clicks the refresh button. In an app like the one described before, AngularJS could trigger multiple requests to the server even if the templates didn’t change.
The add the plugin, simple install it with npm
Then add the following to your
Gruntfile.js in the
Also we need to tell our Grunt tasks to invoke html2js. To do that simply add
html2js:main in the tasks section, for instance, in
Now we need to add
scripts/populate_template_cache.js in our
Finally we need to make
myApp.templates a dependency for
myApp, to tell
myApp to wait until the
$templateCache is populated.
And that’s it. Enjoy!