Is it possible to fetch templates from $templateCache when configuring my $routeProvider?

I had the same problem and after couple of hours spent on research I realized that I was asking myself the wrong question, since what I wanted to do wasn't necessarily loading templates using XHR but just being sure that they're cached and stored in one file.

I have grunt task compiling all my JADE templates to HTML and wrapping them in one big angular module which is loaded as a separate JS file called templates.js. All these things are done automatically in background, so after you've spent 10 minutes configuring it, you can actually forget the monkey work and focus on the code / markup.

(for the sake of brevity I'm going to skip the JADE part here)

1. edit html file
2. grunt-contrib-watch task:
   1. catches the change
   2. generates angular modules with $templateCache enabled
3. my website is reloaded (using liveReload)

This is how I approached the problem using Grunt.js / JADE and html2js:

Head section of my index.jade file

  script(src='js/modernizr.js')  script(src='js/vendor.js')  script(src='js/templates.js')  script(src='js/app.js')

Beginning of the main application module (using CoffeeScript here)

'use strict'# Declare app level module which depends on filters, and servicesApp = angular.module('app', [   'templates' // just include the module and forget it  'foo'  'bar']).config(...)

GruntFile.json (grunt.js config)

I needed to remove ca 80% of the code and left just tasks related to templates, consider it just a draft.

module.exports = (grunt)->  imports = grunt.file.readJSON 'app/imports.json'  grunt.initConfig    pkg: grunt.file.readJSON 'package.json'    watch:      options:        livereload: yes      templates:        files: 'app/**/*.jade'        tasks: ['buildTemplates']    jade:      default:        options:          client: no          wrap: no          basePath: 'app/'          pretty: yes        files:          'public/': ['app/**/*.jade']    html2js:      options:        module: 'templates'        base: 'public/'      main:        src: 'public/partials/**/*.html'        dest: 'public/js/templates.js'    connect:      server:        options:          port: 8081          base: 'public'          keepalive: yes      livereload:        options:          port: 8081          base: 'public'          # middleware: (connect, options)-> [lrSnippet, folderMount(connect, options.base)]    copy:      assets:        files:[          src:['**'], dest:'public/', cwd:'assets/', expand: yes        ]  grunt.loadNpmTasks 'grunt-contrib-concat'  grunt.loadNpmTasks 'grunt-contrib-copy'  grunt.loadNpmTasks 'grunt-contrib-coffee'  grunt.loadNpmTasks 'grunt-contrib-clean'  grunt.loadNpmTasks 'grunt-contrib-connect'  grunt.loadNpmTasks 'grunt-contrib-compass'  grunt.loadNpmTasks 'grunt-contrib-watch'  grunt.loadNpmTasks 'grunt-contrib-livereload'  grunt.loadNpmTasks 'grunt-jade'  grunt.loadNpmTasks 'grunt-html2js'  grunt.registerTask 'buildTemplates', ['clean:templates', 'copy:assets', 'jade', 'html2js:main', 'livereload']  grunt.registerTask 'default', [ 'connect:livereload', 'watch']

Result

Single .js file containing list of all application templates wrapped in angular modules similar to this one:

angular.module("partials/directives/back-btn.html", []).run(["$templateCache", function($templateCache) {  $templateCache.put("partials/directives/back-btn.html",    "<a ng-href=\"{{href}}\" class=\"page-title-bar__back\"> <i class=\"icon-chevron-left\"> </i></a>");}]);

Links

1. grunt.js
2. grunt html2js plugin

if you use a HTTP interceptor, you can inject the $templateCache there:

    $provide.factory('myHttpInterceptor', ['$templateCache', function($templateCache) {        return {            request: function(config) {                // do fancy things with $templateCache here                return config;            }        };    }]);

This Fiddle is what you need.

Basically - you can just put the $templateCache key in the templateUrl: property value inside the $routeProvider configuration.