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

Question

My intention is to load all the templates of my web app with one single call to an external JSON file containing a list of all the template names and values.

I am currently loading these templates on the run phase of my app:

app.run(function ($http, $templateCache) {
    $http.get('/templates/all.json').success(function (data) {
        var i;
        for (i = 0; i < data.length; i++) {
            $templateCache.put(data[i].name, data[i].template);
        }
    });
});

However, the Angular.js config phase executes before the run phase, so when I intend to load from the templateCache:

app.config(function($routeProvider, $locationProvider) {
    //App routing
    $routeProvider.
        //Homepage
        when('/', {templateUrl: 'home.html'}).

        //My schedule
        when('/my-schedule', {templateUrl: 'my-schedule.html'});
});

Angular tries to load home.html from the server, because the $templateCache hasn't been filled yet.

Suppose that all.json contains the templates for home.html and my-schedule.html for the prevous example.

Is it possible to fill $templateCache before configuring the app's $routeProvider?

Look at this as it may help stackoverflow.com/questions/12346690/… — Chandermani
– Chandermani, Commented Mar 11, 2013 at 12:30
@Chandermani, although I aleady based my idea on this answer, it doesn't solve what I'm asking, which is how to fill the $templateCache before configuring my $routeProvider. — pau.moreno
– pau.moreno, Commented Mar 11, 2013 at 12:38
@charlietfl Yes, I'm playing with resolve, but that won't let me rely on the templateUrl attribute in the $routeProvider config, will it? Instead, I guess I'll have to do the loading of templates manually. — pau.moreno
– pau.moreno, Commented Mar 11, 2013 at 16:58

Rafal Pastuszak · Accepted Answer · 2013-09-17 16:58:14Z

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)

edit html file
grunt-contrib-watch task:
1. catches the change
2. generates angular modules with $templateCache enabled
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 services
App = 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

Joscha · Accepted Answer · 2013-12-12 16:57:52Z

2

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;
            }
        };
    }]);

answered Dec 12, 2013 at 16:57

Joscha

4,6931 gold badge31 silver badges35 bronze badges

1 Comment

Loïc Faure-Lacroix Over a year ago

Could you make a more complete example? where does that $provide come from ? And how to use that...

Rubinsh · Accepted Answer · 2014-04-12 15:29:38Z

2

This Fiddle is what you need.

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

answered Apr 12, 2014 at 15:29

Rubinsh

5,01310 gold badges37 silver badges42 bronze badges

1 Comment

Loïc Faure-Lacroix Over a year ago

Not really what he's looking for. He'd like to preload the templates before the route provider will use the templateUrl to load the template. I have the same problem, I have templates stored in CouchDB and unfortunately, AngularJS doesn't know how to convert JSON to html templates.

Collectives™ on Stack Overflow

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

3 Answers 3

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

Head section of my index.jade file

Beginning of the main application module (using CoffeeScript here)

GruntFile.json (grunt.js config)

Result

Links

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

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

Head section of my index.jade file

Beginning of the main application module (using CoffeeScript here)

GruntFile.json (grunt.js config)

Result

Links

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related