Using and injecting Angular $ templateCache with RequireJS

Question

I am doing grunt serve:dist and inside I am grunt-contrib-requirejs a all.js based on my RequireJS main.js file which has require.config and require .

I think that all.js should be in my distribution, the file that I should include at startup in my index.html, because everything is there. Is it correct?

 <script src="require.js" data-main="all.js"></script> 

I also create a JavaScript template file with ngTemplates and a boot file based on all the HTML template files, so a template file called templates.js looks like this:

 define([ 'angular' ], function(angular) { angular.module('MyApp.templates', []).run(['$templateCache', function($templateCache) { 'use strict'; $templateCache.put('templates/MyTest.html', "<h1>Title</h1>\r" + // ... // other put on $templateCache }]); }); 

So, I have a $templateCache that I want to use. But I do not understand how this can be done. I think I need to load templates.js because it is not included in all.js and therefore I have to somehow insert it.

Answer 1

I had a similar problem and found a way to solve it. Basically, I have templates.js to return only a function to enter a startup block.

For example: templates.js

 define([], function()){ return ['$templateCache", function($templateCache){ 'use strict'; $templateCache.put('templates/MyTest.html', "<h1>Title</h1>\r" + // ... // other put on $templateCache }]; } 

and then in your app.js file you can enter this function in the execution unit

 define(['templates'], function(templates){ angular.module('app') .run(templates); }) 

I hope this helps, please let me know if you do not understand something.